current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have tried everything to assign my JSON data (JSON Object?) with $http.get("https://server url to my json data").success(function (response) {} to a local variable in javascript, but it doesnt't work. I am really confused with all of this json strings and objects. Here's my code.

Form of my json data which I get from the server

{
   "status":"success",
   "data":{
      "user":{
         "username":"user1",
         "fullName":"name "       
      },
      "vehicles":[ ],
      "chargeBoxes":
      [
         {
            "id":1,            
            "name":"Station 1",
            "availability":"offline", 
         },
         {
            "id":2,            
            "name":"Station 2",
            "availability":"online", 
         },
         {
            "id":3,            
            "name":"Station 3",
            "availability":"online", 
         }
     ]
}

So, my question is how I can use this data an store it in an js array. I need it for my javascript highchart controller. I tried this..

controller.js

myApp = angular.module('ServiceDashboard');
myApp.controller('DataController' function($scope, $http, $interval) {
   $http.get("https://server-url.com/../login?username=..&password=..").success(function(response) {
        $scope.jsonData = response.data;
   });


var categorieData = [];

var json = JSON.parse(jsonData); 

for (var i = 0; i <= jsonData.chargeBoxes.length - 1; i++)
{
    categorieData[i] = jsonData.chargeBoxes[i].name;
}

//This works really fine when I do it this way (test case) (json variable in just one line and with ' '

// Here I have a json string (one line with ' ')
var jsonData= '{"status": "success", "data": {"chargeboxes":[{..},{..},{..}]}';
// and then I parse this json string to an json object and iterate over it and store the chargeBoxes.name values into the categorieDate array.

But when I try it with the real form of my json data (multiline with {}), then it doesn't work.

var jsonData = {
   "status":"success",
   "data":{
      "user":{
         "username":"user1",
         "fullName":"name "       
      },
      "vehicles":[ ],
      "chargeBoxes":
      [
         {
            "id":1,            
            "name":"Station 1",
            "availability":"offline", 
         },
         {
            "id":2,            
            "name":"Station 2",
            "availability":"online", 
         },
         {
            "id":3,            
            "name":"Station 3",
            "availability":"online", 
         }
     ]
};

I really don't know what to do anymore. First of all, I would like to try it with a local variable like above (var jsonData = {..}; because with oneline string ' ' it works), and then I would like to use this json data directly from the server ($scope.jsondata...).

Thanks!

share|improve this question
    
Why you do var json = JSON.parse(jsonData); and then use jsonDatainstead of json? Try for (var i = 0; i <= json.chargeBoxes.length - 1; i++)... – ojovirtual Mar 17 at 10:53
    
Your question doesn't make much sense. Your controller.js code won't work because Ajax is Asynchronous. The "real form of your JSON data" isn't JSON at all. – Quentin Mar 17 at 10:55
    
Possible duplicate of How do I return the response from an asynchronous call? – Hacketo Mar 17 at 10:58
    
This was just a spelling mistake. Ok, but it must be a way to visualize some data I got from the server (with this form of json data) in a highchart-controller!? – D. O. Mar 17 at 11:31
up vote 0 down vote

$http.get is called async.

myApp = angular.module('ServiceDashboard');
myApp.controller('DataController' function($scope, $http, $interval) {
    $http.get("https://server-url.com/../login?username=..&password=..").success(function(response) {
        $scope.jsonData = response.data;
        // >> Put your parse code here
        var categorieData = [];
        var json = JSON.parse(jsonData); 
        for (var i = 0; i <= jsonData.chargeBoxes.length - 1; i++)
        {
            categorieData[i] = jsonData.chargeBoxes[i].name;
        }
    });
share|improve this answer
up vote 0 down vote

You have multiple issues in your code. First of all the servers response data is not in 

$scope.jsonData = response.data;

but you will find it in 

$scope.jsonData = response.data.data;

The $http.get returns a json object of the response sent from the server. The response body however is in the data property of the response object being returned. Since the server's response also has a data property you will need to go one level deeper.

Secondly var json = JSON.parse(jsonData); will not work. At the time this line of code is executed the data is not available. Put this in the success callback of your $http.get() method and you'll be fine.

It should look something like this:

myApp = angular.module('ServiceDashboard');
myApp.controller('DataController' function($scope, $http, $interval) {
$http.get("https://server-url.com/../login?username=..&password=..").success(function(response) {
    $scope.jsonData = response.data.data;
    for (var i in $scope.jsonData.chargeBoxes)
        categorieData.push(jsonData.chargeBoxes[i].name);
});
share|improve this answer
    
Thank! I tried this but I cannot display this data in my highchart-ng. i tried to access categorieData in my $scope.barChartConfig = ..{ catergories: categorieData}, but it doesnt't work. Is categorieData now a global array? – D. O. Mar 17 at 11:25
up vote 0 down vote

You need to process your jsonData in the success-method of the $http.get() call, since it's asynchronous.

controller.js

var myApp = angular.module('ServiceDashboard');
myApp.controller('DataController' function($scope, $http, $interval) {

$scope.barChartConfig = { categories: [] };
$http.get("https://server-url.com/../login?username=..&password=..").success(function(response) {
    $scope.jsonData = response.data.data;

    var json = JSON.parse($scope.jsonData); 
    var categorieData = [];
    for (var i = 0; i <= json.chargeBoxes.length - 1; i++)
    {
        categorieData.push($scope.jsonData.chargeBoxes[i].name);
    }
    $scope.barChartConfig.categories = categorieData;
   });
share|improve this answer
    
Thanks! But how I can use the categorieData array in my controller? (for visualizing highchart) – D. O. Mar 17 at 11:38
    
See my edited answer – aup Mar 17 at 11:51
    
Thanks!But it's still not working.. – D. O. Mar 17 at 12:08
    
Like markus below says, use response.data.data (since you have a property in your json that's called "data"). I'll update my answer. I also changed the for-loop to use json.chargeBoxes.length - I had missed that before – aup Mar 17 at 12:09
    
I've already tried it.. In controller -> $scope.barChartConfig = {..categories: I tried both categoryData and $scope.catergoryData, but it isn't working. – D. O. Mar 17 at 12:13
up vote -2 down vote 
var url = "http://<domainname>/<url>"

var jsonData = $.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

Check your json response in jsonData variable.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.