如何在 Angular JS 中将 Array of Array 转换为 JSON？答案

【问题标题】：How to convert Array of Array to JSON in Angular JS?如何在 Angular JS 中将 Array of Array 转换为 JSON？
【发布时间】：2017-03-20 17:02:50
【问题描述】：

这是变量“data”中的数组数据数组。我想使用 AngularJS 将数组数据数组转换为 JSON，并在使用 $scope 对象的视图中使用

$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"
  }
]

【问题讨论】：

可以直接使用JSON.stringify($scope.data)。

标签： angularjs

【解决方案1】：

您在数据前面缺少 $scope，

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

演示

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>

【讨论】：

【解决方案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));

【讨论】：

【解决方案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 (Angular) 部分：

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

【讨论】：

【解决方案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);
        }
    };

【讨论】：