Convert json object to array to iterate through ng-repeat using javascript?

Question

Here is my json example, I get my json obj from firebase. I need to convert a list to an array in order to bind it in html trough ng-repeat.

my json 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" } } 

this is how i demanded

this is the array structure that I need when I add a new list, which it should store uniquely in the cricket category.

 [ { "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" } ] 

I'm new to angular, someone please help me sort this out.

Answer 1

Use Object.keys and pass them to Array.prototype.map to create the array you want - see the demo below:

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

EDIT

Solution fix to make list1 array:

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

Answer 2

You can recurs, but note that this can cause large objects to freeze and can also lead to Maximum Call Stack exceeded

Logics

• Flip the object over and check if all records are objects.
• If so, then a simple Object.keys(obj).map(x=>obj[x]) will be executed.
• If not, then you will have to copy the individual values ​​and the object, and then loop back on it for internal objects. A simple way is to loop on each key, and if the type is not an object, just return the value.

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

Answer 3

You can do something similar, iterate over the keys of input objects and delete keys.

 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>