JSON array from $http.GET returning undefined even though it shouldn't be

Question

Here is my code:

function getLineGraphData(unit, startTs, endTs, startState, endState){
points = [];
console.log('/file/tsDataPoints/'+unit+"?startDate="+startTs+"&endDate="+endTs+"&startState="+startState+"&endState="+endState);
$http.get('/file/tsDataPoints/'+unit+"?startDate="+startTs+"&endDate="+endTs+"&startState="+startState+"&endState="+endState).success(function(data){
    for (var i = 0; i < data.length; i++) {
        points.push({x:getBasicTimeFromEpoch(data[i].ts), y:data[i].data});
    }
  return points;
  });
}

function fileStateLineGraph(unit, startTs, endTs){
getLineGraphData(unit, startTs, endTs, 1, 2);

console.log(getLineGraphData(unit, startTs, endTs, 1, 2));
var dp1= getLineGraphData(unit, startTs, endTs, 1, 2);
var dp2= getLineGraphData(unit, startTs, endTs, 2,3);
var dp3 = getLineGraphData(unit, startTs, endTs, 3,4);
console.log(dp1);
console.log(dp2);
console.log(dp3);
var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Click on legend items to hide/unhide dataseries"
    },
    legend: {
        cursor: "pointer",
        itemclick: function (e) {
            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            chart.render();
        }
    },
    data: [{
      //axisYType:"secondary",
        showInLegend: true,
        type: "line",
        dataPoints: dp1
    }, {
        showInLegend: true,
        type: "line",
        dataPoints: dp2
    }, {
        showInLegend: true,
        type: "line",
        dataPoints: dp3
         }]
  });
  chart.render();
}
fileStateLineGraph("day",1404000000, 1406000000)

When I run the console.logs just display "undefined." I'm wondering if it is because the function is running before the JSON call is completed, but I've never encountered an error like this.

Are you using AngularJS? Where does $http come from?

Scott Rippey
– Scott Rippey

2014-07-09 17:07:08 +00:00
Commented Jul 9, 2014 at 17:07 — Scott Rippey
– Scott Rippey, Commented Jul 9, 2014 at 17:07
@ScottRippey yes, I am using AngularJS

Sleep Deprived Bulbasaur
– Sleep Deprived Bulbasaur

2014-07-09 17:13:05 +00:00
Commented Jul 9, 2014 at 17:13 — Sleep Deprived Bulbasaur
– Sleep Deprived Bulbasaur, Commented Jul 9, 2014 at 17:13

Scott Rippey · Accepted Answer · 2014-07-10 18:22:10Z

1

First of all, your getLineGraphData function does not have a return value. Second, it's running asynchronously, so you must wait for the success handler before you can access the points data.

So first, you must add a return statement: return $http.get(.... This will return a Promise.

Second, to get access to points, you must use promise.then(function(points) { ... }). Within the then function, you have access to the data.

Now, if you rely on multiple sets of points, you have to wait for them ALL to finish. You can use $q.all(...) as follows:

$q.all({
    dp1: getLineGraphData(unit, startTs, endTs, 1,2),
    dp2: getLineGraphData(unit, startTs, endTs, 2,3),
    dp3: getLineGraphData(unit, startTs, endTs, 3,4)
}).then(function(dataPoints) {
    var dp1 = dataPoints.dp1, dp2 = dataPoints.dp2, dp3 = dataPoints.dp3;
    ... Create your chart ...
});

edited Jul 10, 2014 at 18:22

answered Jul 9, 2014 at 17:06

Scott Rippey

15.8k5 gold badges73 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sleep Deprived Bulbasaur Over a year ago

Could you elaborate more on how to use $q.all? I don't quite understand how I'm supposed to use it

Scott Rippey Over a year ago

Sure :) When you have a Promise, you use .then(callback) (same as .success(...)) to access the results. In your example, you have multiple promises. So, $q.all() is a utility method that lets all the promises run in parallel, and when they're ALL finished, it'll execute your callback, with all the data. You can give $q.all(...) either an object ({key: promise1}) or an array ([promise1, promise2]), and the results will be in the same format (either {key: data1} or [data1, data2]). You should read up on Promises if you can, they're awesome!

Jenian · Accepted Answer · 2014-07-09 17:12:59Z

in getLineGraphData - you return points from the success callback of $http.get. This doesn't mean that it is returned from getLineGraphData. $http.get returns a promise and that is what you should return from the function. Then put a success callback on the promise and populate dp1 and so on..

 function getLineGraphData(unit, startTs, endTs, startState, endState){
    points = [];
    console.log('/file/tsDataPoints/'+unit+"?startDate="+startTs+"&endDate="+endTs+"&startState="+startState+"&endState="+endState);
    return $http.get('/file/tsDataPoints/'+unit+"?startDate="+startTs+"&endDate="+endTs+"&startState="+startState+"&endState="+endState);
 }

var dp1 = [];
getLineGraphData(unit, startTs, endTs, 1, 2).success(function(data){
    for (var i = 0; i < data.length; i++) {
        dp1.push({x:getBasicTimeFromEpoch(data[i].ts), y:data[i].data});
    }
    console.log(dp1);
  });

dp1 should be printed ok.

Collectives™ on Stack Overflow

JSON array from $http.GET returning undefined even though it shouldn't be

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related