在javascript中将JSON对象转换为数组数组

Question

I have tried to take the particular array value of key from a JSON object and store that in an array which will be look like this.

Example:

var obj = { "1":{"class":2,"percent":0.99,"box":[0.2,0.3,0.4,0.5]},
            "2":{"class":2,"percent":0.99,"box":[0.12,0.23,0.45,0.56]},
            "3":{"class":2,"percent":0.99,"box":[0.52,0.83,0.34,0.59]}
           } 

and so on like this

Now i need to take the value of key "box" and store in an array.

var list = []
list = [[0.2,0.3,0.4,0.5],[0.12,0.23,0.45,0.56],[0.52,0.83,0.34,0.59]]

But, i tried multiple ways to store the array inside the array, but i could able to get like this when i printed the list

list = 0.2,0.3,0.4,0.5,0.12,0.23,0.45,0.56,0.52,0.83,0.34,0.59

Answer 1

You can use Object.keys (which returns an array of all key of your json) in combination with array's map to transform your json into a new array:

const boxes = Object.keys(obj).map(key => obj[key].box)

You can also use Object.values, which is actually nicer in your case:

const boxes = Object.values(obj).map(value => value.box)

How it works

Object.keys return an array:

Object.keys(obj) // ["1", "2", "3"]

then you can map over them to get the value of each item:

Object.keys(obj).map(key => obj[key]) // [{box: [...]}, {box: [...]}, {box: [...]}]

then in array.map 's callback, you can simply only return the box value:

Object.keys(obj).map(key => obj[key].box) // [[...], [...], [...]]

---

Without Object.keys()

function getBoxes (object) {
  var boxes = [];
  for (var key in object) {
    if (!object.hasOwnProperty(key)) continue;
    boxes.push(object[key].box);
  }
  return boxes;
}

console.log(getBoxes(obj))

for...in can loop through object's properties, but it'll also loop over inherited properties, therefore we need to guard the loop with object.hasOwnProperty(key) .

---

Object.keys() : Return an array of all enumerable property names of an object

Object.values() : Return an array of all enumerable values of an object

array.map() : Return a new array with each item of the original array transformed in a given callback function

array.slice() : Return a shallow copy of the original array

Answer 2

Try this:

Object.values(obj).map(x=>x.box);

 var obj = { "1":{"class":2,"percent":0.99,"box":[0.2,0.3,0.4,0.5]}, "2":{"class":2,"percent":0.99,"box":[0.12,0.23,0.45,0.56]}, "3":{"class":2,"percent":0.99,"box":[0.52,0.83,0.34,0.59]} } let list = Object.values(obj).map(x=>x.box); console.log(JSON.stringify(list)) 

The Object.values returns array of obj values, then we use map to iterate over that values (we use arrow function ) and create new array with box values.

Answer 3

Check next example:

1) First, use Object.keys() to get an array with the keys of the object.

2) Second, loop on every key and access the box property of the object associated with every key, then push this box property on a new array.

 var obj = { "1": {"class":2, "percent":0.99, "box":[0.2,0.3,0.4,0.5]}, "2": {"class":2, "percent":0.99, "box":[0.12,0.23,0.45,0.56]}, "3": {"class":2, "percent":0.99, "box":[0.52,0.83,0.34,0.59]} }; var arrayOfArrays = []; Object.keys(obj).forEach(function(k){ arrayOfArrays.push(obj[k].box); }); console.log(arrayOfArrays); 

Here is (just for fun) another alternative using the reduce() method:

 var obj = { "1": {"class":2, "percent":0.99, "box":[0.2,0.3,0.4,0.5]}, "2": {"class":2, "percent":0.99, "box":[0.12,0.23,0.45,0.56]}, "3": {"class":2, "percent":0.99, "box":[0.52,0.83,0.34,0.59]} }; const reducer = (accumulator, currVal) => { accumulator.push(currVal.box); return accumulator; }; arrayOfArrays = Object.values(obj).reduce(reducer, []); console.log(arrayOfArrays);