如何在Angular JS中將Array的數組轉換爲JSON？

Question

這是變量'data'中的數組數據數組。我想使用AngularJS數組數據的數組轉換成JSON和使用$範圍對象在視圖中使用

$scope.data =[["Name", "Age", "Address"], 
       [ "A", "43", "CA" ], 
       [ "B", "23", "VA" ], 
       [ "C", "24", "NY" ]] 

功能寫信給數組的數組轉換爲JSON：

$scope.jsonData = function() { 
      var result = []; 
      var keys = data[0]; 

      for (var i = 1; i < data.length; i++) { 
       var item = {}; 
       item[keys[0]] = data[i][0]; 
       item[keys[1]] = data[i][1]; 
       item[keys[2]] = data[i][2]; 
       result.push(item); 
      } 
return result 
     }; 

我沒有看到JSON輸出，我在哪裏做錯了？

所需的輸出：

[ 
    { 
    "Name": "A", 
    "Age": "43", 
    "Address": "CA" 
    }, 
    { 
    "Name": "B", 
    "Age": "23", 
    "Address": "VA" 
    }, 
    { 
    "Name": "C", 
    "Age": "24", 
    "Address": "NY" 
    } 
] 

Answer 1

你缺少$範圍盈數據，

for (var i = 1; i < $scope.data.length; i++) { 
    var item = {}; 
    item[keys[0]] = $scope.data[i][0]; 
    item[keys[1]] = $scope.data[i][1]; 
    item[keys[2]] = $scope.data[i][2]; 
    $scope.result.push(item); 
} 

DEMO

var demoApp = angular.module('demoApp', []); 
 
var controllers = {}; 
 
controllers.SimpleController = function ($scope) { 
 
$scope.data =[["Name", "Age", "Address"], 
 
       [ "A", "43", "CA" ], 
 
       [ "B", "23", "VA" ], 
 
       [ "C", "24", "NY" ]]; 
 
       $scope.result = []; 
 
    $scope.jsonData = function() { 
 
      var result = []; 
 
      var keys = $scope.data[0]; 
 

 
      for (var i = 1; i < $scope.data.length; i++) { 
 
       var item = {}; 
 
       item[keys[0]] = $scope.data[i][0]; 
 
       item[keys[1]] = $scope.data[i][1]; 
 
       item[keys[2]] = $scope.data[i][2]; 
 
       $scope.result.push(item); 
 
      } 
 
      console.log($scope.result); 
 
};   
 
       
 
}; 
 
demoApp.controller(controllers);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="SimpleController"> 
 
<div ng-init="jsonData()"> 
 
    
 
</div> 
 
</div>

Answer 2

來自how-to-convert-array-of-arrays-to-json的解決方案。

使用Array.prototype.slice（），Array.prototype.map（）和Array.prototype.forEach（）：

let arrays = [ 
["Name", "Age", "Address"], 
["A", "43", "CA"], 
["B", "23", "VA"], 
["C", "24", "NY"] 
]; 

let keys = arrays[0]; 
let values = arrays.slice(1); 
let objects = values.map(array => { 
let object = {}; 

keys.forEach((key, i) => object[key] = array[i]); 

return object; 
}); 

console.log(JSON.stringify(objects)); 

Answer 3

根據您的陣列結構，我認爲你希望他們很好地顯示，所以我會做這樣的HTML：

<ul> 
    <li ng-repeat="c in contacts track by $index"> 
     <h3>c.Name</h3> 
     <h3>c.Age</h3> 
     <h3>c.Address</h3> 
    </li> 
</ul> 

而且在你的JavaScript（角）部分：

var generateArray = function() { 
     var result = []; 
     var keys = data[0]; 

     for (var i = 1; i < data.length; i++) { 
      var item = {}; 
      item[keys[0]] = data[i][0]; 
      item[keys[1]] = data[i][1]; 
      item[keys[2]] = data[i][2]; 
      result.push(item); 
     } 
     return result 
     }; 

$scope.contacts = generateArray(); 

Answer 4

你錯過所以，添加示波器數據，並使用以下結構...

 $scope.jsonData = function() { 
     var result = []; 
     var keys = $scope.data[0]; 

     for (var i = 1; i < $scope.data.length; i++) { 
      var item = {}; 
      var data = $scope.data[i]; 
      item[keys[0]] = data[0]; 
      item[keys[1]] = data[1]; 
      item[keys[2]] = data[2]; 
      result.push(item); 
     } 
    };