如何在Angular JS中将Array数组转换为JSON?

时间:2017-03-20 17:02:51

标签: angularjs

这是变量'数据中的数组数据。我想使用AngularJS将数组数据转换为JSON,并在View中使用$ scope object

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

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

来自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)); 

答案 2 :(得分:0)

根据你的数组结构,我认为你希望它们显示得很好,所以我会像这样制作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();

答案 3 :(得分:0)

您错过了范围值..因此,添加范围数据,并使用以下结构......

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