從JSON創建地圖/數組
[英]Make a map / array from JSON
問題描述
我有以下對象結構，
{
carMaker: {
Id: '01',
Name: 'Audi',
Headquarter: 'Germany'
},
modelName: 'R8',
Id: '1',
CarMaker: 'Audi',
color: 'black'
}
基本上，這是一列按名稱引用其CarMaker的汽車。 而且CarMaker的詳細信息也嵌套在具有密鑰CarMaker的json中。
我想要的是填充一個帶有CarMaker列表的JSON結構，其中包含它們在鍵carsList下的數組中創建的汽車。
任何人都可以提出一種有效的方法來執行此操作，而不用使用兩個for循環，這將是簡單的方法，並且會影響較大值的性能。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../content/vendor_js/AngularJS/angular.js"></script>
<script>
var testmodule = angular.module('testmodule', []);
testmodule.controller('testcontroller', ['$scope', function ($scope) {
$scope.carList = [
{
carMaker: {
Id: '01',
Name: 'Audi',
Headquarter: 'Germany'
},
modelName: 'R8',
Id: '1',
CarMaker: 'Audi',
color: 'black'
}, {
carMaker: {
Id: '01',
Name: 'Audi',
Headquarter: 'Germany'
},
modelName: 'A7',
Id: '2',
CarMaker: 'Audi',
color: 'red'
}, {
carMaker: {
Id: '02',
Name: 'Nissan',
Headquarter: 'Japan'
},
modelName: 'GTR',
Id: '4',
CarMaker: 'Nissan',
color: 'yellow'
}, {
carMaker: {
Id: '03',
Name: 'Volkswagen',
Headquarter: 'Germany'
},
modelName: 'Polo',
Id: '5',
CarMaker: 'Volkswagen',
color: 'black'
}
];
$scope.carMakerList = {};
$scope.createJSONArray = function () {
angular.forEach($scope.carList, function (car) {
$scope.carMakerList[car.carMaker.Name] = car.carMaker;
});
angular.forEach($scope.carMakerList, function (carMaker) {
carMaker.cars = [];
});
angular.forEach($scope.carList, function (car) {
$scope.carMakerList[car.CarMaker]["cars"].push(car);
});
};
$scope.createJSONArray();
}]);
</script>
</head>
<body ng-app="testmodule" ng-controller="testcontroller">
<table border="1">
<tr ng-repeat="carmaker in carMakerList">
<td><p ng-bind="carmaker.Id"></p></td>
<td><p ng-bind="carmaker.Name"></p></td>
<td>
<ul>
<li ng-repeat="cars in carmaker.cars">
<p ng-bind="cars.modelName"></p>
</li>
</ul>
</td>
</tr>
<tr>
<h3></h3>
</tr>
</table>
</body>
</html>
1 個解決方案
解決方案1
2 2016-05-02 21:14:47
這是一個單循環建議，帶有Array#forEach()和一個對象，作為對carsList引用。
var data = [{ carMaker: { Id: '01', Name: 'Audi', Headquarter: 'Germany' }, modelName: 'R8', Id: '1', CarMaker: 'Audi', color: 'black' }, { carMaker: { Id: '01', Name: 'Audi', Headquarter: 'Germany' }, modelName: 'A7', Id: '2', CarMaker: 'Audi', color: 'red' }, { carMaker: { Id: '02', Name: 'Nissan', Headquarter: 'Japan' }, modelName: 'GTR', Id: '4', CarMaker: 'Nissan', color: 'yellow' }, { carMaker: { Id: '03', Name: 'Volkswagen', Headquarter: 'Germany' }, modelName: 'Polo', Id: '5', CarMaker: 'Volkswagen', color: 'black' }], grouped = []; data.forEach(function (a) { var key = a.carMaker.Name, o; if (!this[key]) { o = { Id: a.carMaker.Id, Name: a.carMaker.Name, Headquarter: a.carMaker.Headquarter, carsList: [] }; this[key] = o.carsList; grouped.push(o); } this[key].push({ modelName: a.modelName, Id: a.Id, color: a.color }); }, Object.create(null)); document.write('<pre>' + JSON.stringify(grouped, 0, 4) + '</pre>');
從 JSON 制作數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.