如何從http.get（//從服務器的json）到Javascript變量分配JSON數據？

Question

我已經盡了一切努力將我的JSON數據（JSON對象？）與$ http.get（「https://server url to my json data」）.javascript（function（response）{} ）分配給javascript中的局部變量，但它doesnt't的工作。我與這一切JSON字符串和對象的真糊塗。這裏是我的代碼。我的JSON數據

形式，我從服務器

{ 
    "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", 
     } 
    ] 
} 

所以得到的，我的問題是我如何使用這個數據存儲它在一個js數組。我需要它爲我的javascript高圖形控制器。我試過這..

個

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; 
} 

//當我做這種方式（測試用例）（JSON變量只有一條線路，並與 '' 這工作真精

// 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. 

但當我用我的json數據的真實形式（帶{}的多行）嘗試它時，它不起作用。

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", 
     } 
    ] 
}; 

我真的不知道該做什麼了。首先，我想用一個像上面這樣的局部變量來嘗試它（var jsonData = {..};因爲使用oneline string''），然後我想直接從服務器使用這個json數據（ $ scope.jsondata ...）。

謝謝！

Answer 1

var url = "http://<domainname>/<url>" 

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

檢查jsonData變量中的json響應。

Answer 2

$ http.get被稱爲異步。

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; 
     } 
    }); 

Answer 3

在代碼中有多個問題。首先所有的服務器響應數據的不

$scope.jsonData = response.data; 

，但你會發現它在

$scope.jsonData = response.data.data; 

的$ http.get返回從服務器發送的響應的JSON對象。但是，響應主體位於正在返回的響應對象的data屬性中。由於服務器的響應也具有數據屬性，因此您需要更深入一級。其他var json = JSON.parse(jsonData);將不起作用。在執行這行代碼時，數據不可用。把這個放在你的$http.get()方法的成功回調中，你會沒事的。

它應該是這個樣子：

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); 
}); 

Answer 4

您需要處理您的jsonData在$http.get()調用成功，方法，因爲它是異步的。

控制器。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; 
    });