将json对象转换为数组,使用Javascript迭代ng-repeat
Convert json object in to array to iterate through ng-repeat using Javascript?
这是我的示例json,我从firebase获得json obj,我必须将列表转换为数组,以便通过ng-repeat在html中绑定。
我的Json对象是
{
"cats1": {
"Name": "cricket",
"imgUrl": "some url",
"list1": {
"bat": {
"Name": "bat",
"imgUrl": "some url",
"price": "$100"
},
"pads": {
"displayName": "pads",
"imgUrl": "some url",
"price": "$50"
}
}
},
"cats2": {
"Name": "football",
"imgUrl": "some url"
}
}
这是我需要的
这是我需要的数组结构,当我添加新列表时,它必须唯一地存储在板球类别中。
[
{
"Name": "cricket",
"imgUrl": "some url",
"list1": [
{
"Name": "bat",
"imgUrl": "some url",
"price": "$100"
},
{
"displayName": "pads",
"imgUrl": "some url",
"price": "$50"
}
]
},
{
"Name": "football",
"imgUrl": "some url"
}
]
我是一个新手,请帮助我解决这个问题
使用Object.keys
并将它们传递给Array.prototype.map
以创建您想要的数组-参见下面的演示:
var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};
var result = Object.keys(object).map(e=>object[e]);
console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}
编辑:
修正解使list1
成为数组:
var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};
var result = Object.keys(object).map(function(e){
Object.keys(object[e]).forEach(function(k){
if(typeof object[e][k] == "object") {
object[e][k] = Object.keys(object[e][k]).map(function(l){
return object[e][k][l];
});
}
});
return object[e];
});
console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}
您可以递归,但要注意这可能会导致大对象冻结,也可能导致Maximum Call Stack exceeded
- 遍历对象并检查是否所有条目都是对象。
- 如果是,那么简单的
Object.keys(obj).map(x=>obj[x])
就可以了。 - 如果没有,那么你将不得不复制单个值和If对象,然后再次循环内部对象。一个简单的方法是循环每个键,如果类型不是对象,只返回值。
function ObjectToArray(obj) {
if (typeof(obj) === 'object') {
var keys = Object.keys(obj);
var allObjects = keys.every(x => typeof(obj[x]) === 'object');
if (allObjects) {
return keys.map(x => ObjectToArray(obj[x]));
} else {
var o = {};
keys.forEach(x => {
o[x] = ObjectToArray(obj[x])
});
return o;
}
} else {
return obj;
}
}
var d={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};
console.log(ObjectToArray(d))
您可以这样做,通过迭代输入对象键并剥离键。
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.result = {
"cats1": {
"Name": "cricket",
"imgUrl": "some url",
"list1": {
"bat": {
"Name": "bat",
"imgUrl": "some url",
"price": "$100"
},
"pads": {
"displayName": "pads",
"imgUrl": "some url",
"price": "$50"
}
}
},
"cats2": {
"Name": "football",
"imgUrl": "some url"
}
};
$scope.format = Object.keys($scope.result).map((key) => $scope.result[key])
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<div>Formatted</div>
<pre>{{format | json}}</pre>
</div>
</div>
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 使用javascript将动态表从一个html页面打印到另一个html页
- 如何使用javascript或html下载PDF格式的填写表单
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何使用javascript从主svg对象动态创建svg视图框
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 使用Javascript获取所选选项ID
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 使用javascript从数据库中添加表
- JSON.parse没有'不能使用Javascript
- 使用javascript检查多个输入值,并在1次检查中标记多个输入框
- 可以't使用JavaScript获取width属性
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 使用javascript在Flash中加载外部图像
- 使用Javascript创建测验页面
- 在PHP中使用javascript更改页面标题'if'
- 使用javascript函数在页面初始化后加载jquery
- 无法使用javascript检索SPList项
- 使用javascript存储变量的最安全方式
- 使用javascript搜索具有用户输入的数组