« first day (48 days earlier)      last day (159 days later) » 

10:45
Hey @IsmaelMiguel, what's the best way to send a GET request in vanilla JS
Using XHR
I tried this: stackoverflow.com/a/4033310/3296811, but it didn't seem to work
Try the 2nd method
You could try JSONP
Depending on what you want, you can it
It works on every browser with Javascript
I don't recommend it
@IsmaelMiguel sorry, which method?
function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.send(null);
}
 
4 hours later…
14:40
@IsmaelMiguel, how does that callback work?
That is simply a function that you pass
Example: httpGetAsync('http://google.com/', function(data){ console.log(data); });
var data = '';
var set_data = function(val){
    data = val;
}
var data_retrieve = function() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            set_data(JSON.parse(this.responseText));
    }
    xmlHttp.open("GET", 'api.php', true); // true for asynchronous
    xmlHttp.send(null);
}
data_retrieve();
something like that?
Something like that
it doesn't seem to work for me
var data = '';
var set_data = function(val){
    console.log(val);
}
var data_retrieve = function() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            set_data(this.responseText);
    }
    xmlHttp.open("GET", 'index.php', true); // true for asynchronous
    xmlHttp.send(null);
}
data_retrieve();
This worked
15:22
    "use strict";
    var data = '';
    var set_data = function(val){
        data = val;
    }
    var data_retrieve = function() {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                set_data(this.responseText);
            }
        }
        xmlHttp.open("GET", 'api.php', true); // true for asynchronous
        xmlHttp.send(null);
        return xmlHttp;
    }
    var app = angular.module('a', []);
I don't know angular
But it looks ok
It doesn't work ;-;
Any error?
data isn't assigned
and doFoo reports data is empty
15:24
er
you didn't call $scope.$apply() for one
angular already has $http. use that
how do I $scope?
hold on.
app.controller('aController', function ($scope) {
is that right?
'use strict';
 angular.module('a', [])
    .controller('aController', ['$scope', function($scope, $http) {
        $http.get('/api.php')
            .success(function(data) {
                // if api.php returns JSON do something with data.
            })
    }]);
what you are doing is not how you use angular
the above is the most basic translation of what you were doing to angular
I gave him the advice to use XHR, but in my defense I had no idea it was for Angular
15:27
$scope.$apply is what is necessary when you use stuff that isn't from Angular
Because Angular runs in its own event loop, if you use stuff like XHR (like Ismael suggested), Angular isn't going to detect the change and thus the controller won't be updated
That's why you use $http - or, alternatively, $scope.$apply
I had no idea it was for Angular :/
Even then, I don't know why you write it like that :(
Use a callback, not set_data
The original wasn't like that
        .success(function(data) {
            this.data = data;
        })
that won't work
15:29
The original was a code from a question
this inside of function(data){} will be bound to that function
instead of the controller
@Quill The one I told you to use?
@IsmaelMiguel oh yeah, sorry, I thought you meant the angular
  "use strict";
    var data_retrieve = function(callback) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                callback && callback(this.responseText);
            }
        }
        xmlHttp.open("GET", 'api.php', true); // true for asynchronous
        xmlHttp.send(null);
        return xmlHttp;
    }
    angular.module('a', [])
      .controller('aController', function ($scope) {
if you really want to use XHR.. thats how you would doi t
@Quill The angular wasn't me. I don't use angular
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200 && (callback instanceof Function)){
            callback(this.responseText);
        }
15:32
it's shorter
or better yet, callback = callback || function() {}
just do callback && callback(this.responseText);
I know, but it won't ensure that callback is a function
I'm really not a fan of type sniffing
Instance
instanceof is type sniffing
You verify if it is an instance of an object
15:33
sure, they both work, but I'd rather not do it
It's different than type sniffing
instanceof is type sniffing lol
It isn't
 TypeError: Cannot read property 'get' of undefined
It will verify if the value is an instance of a constructor
15:35
@Quill woops... add a '$http' next to '$scope' in the array
@IsmaelMiguel no, it will verify whether type A is in type B's prototype chain.
Which means it will walk all the way up the prototype chain checking each instance
I'd rather not do that and rely on the caller to not do something stupid
@DanPantry where?
 ['$scope', function($scope, $http) {
there?
'use strict';
 angular.module('a', [])
    .controller('aController', ['$scope', '$http', function($scope, $http) {
        $http.get('/api.php')
            .success(function(data) {
                // if api.php returns JSON do something with data.
            })
    }]);
there
you probably don't need the [] but it's worth having to show you what the minification stuff worksl ike
if you minify your code without having ['$scope', '$http', then it will break
.controller('aController', ['$scope', '$http', function($scope, $http) {
    var d = '';
    $http.get('api.php')
        .success(function(data) {
           d = data;
        });
   console.log(d);
}]);
global.onload = function(){
    //console.clear();
};
15:40
that.. won't work
well, I've managed to break it again
$http.get is asynchronous.
You haven't broken it. You just don't understand how asynchrony works.
@DanPantry that sounds closer
By the time you reach console.log, d is still going to be ''.
where do I collect and define the scope variables, then
15:41
$http.get is always asynchronous, it's not going to invoke .success until at least the next tick (probably later).
should I define them inside .success?
you would use $q.all([promises])
if you have more than one promise, obviously
if you just have one promise, then, yes, you assign to the $scope from within .success
a promise like this.title = data['title']; and this.body = data['body'];?
......... you have a long way to go
a promise is an object that represents an asynchronous operation
$http.get returns a promise.
If you have multiple promises that you want to wait to be finished for you use $q.all(arrayOfPromises) and then the then callback will be invoked
A promise has a couple of methods on them, but the main ones are then, catch and finally
each of them takes a callback and each of those callbacks are invoked at different points.
the then calback is invoked when the promise fulfills itself (finishes the operation with no errors) with the result of the operation. In this case, then will contain a XHR response object.
catch is invoked when there is an error in either the asynchronous operation or in the then callback.
finally is called regardless of then or catch.
So, your code should be $http.get('/someUrl').then(function(response) { $scope.data = response.data; });
(or similar)
What if I have to process the response with an outside function? should I use $scope.$apply somewhere?
15:56
That's not how it works lol
You would need to call the 'outside function' from within the callback
Because you haven't got the data until you're actually within that callback
What are you actually trying to do?
Because you might have an XY problem here. Also, BTW.Home
I've got an array, and I need to assign them all position values 1->6, back to 1, start again kinda process
function convert (data) {
    if (typeof data != 'object'){ throw new TypeError("Input parameter needs to be an object");}
    var dataWithAttributes = [],
        position = 1;
    data.forEach(function (elem) {
        dataWithAttributes.push({
            name: elem,
            pos: position
        });
        position == 6 ? position= 1 : position++;
    });
    return dataWithAttributes;
}
I could probably move that into the controller
Actually, I might just modify api.php
16:47
Oh my, Angular won't find my scope variables now
@DanPantry, angular won't find my scope variables now. I have all the code in an iife, will that make a difference?
why are you trying to use Angular, I mean
1 hour ago, by Quill
I've got an array, and I need to assign them all position values 1->6, back to 1, start again kinda process
mainly for the ng-repeat functionality
sorry for all the beginner questions, I'm still trying to get the hang of angular
17:23
@Quill ?.
Angular is a web framework.
Don't use it for something as trivial as this.
oh, alright
Angular is for like
fully-fledged web apps.
Not for simple web pages - use vanilla JS fro that
okay

« first day (48 days earlier)      last day (159 days later) »