Converting JSON object into array of arrays in javascript

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

• holydragon: Your JSON is not correct.
• Feathercrown: @holydragon Looks good to me
• holydragon: @Feathercrown Well. It has been edited. It is correct now.
• Feathercrown: @holydragon Ah, missed that :P

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

• Derek Nguyen: @Shiva here's a jsbin with your provided obj: jsbin.com/sexuqahiqa/edit?js,console
• Shiva: const boxes = Object.values(obj).map(value => value.box) but the first method is not storing in array of array which should be like this [[1,2,3,4],[3,6,7,8],[5,8,9,3]]
• Derek Nguyen: @Shiva I'm not sure if we're looking at the same code? I've made a new one here with exact same function & it returns nested array: jsbin.com/cicubuhobo/edit?js,console
• Shiva: list: 0.27345794439315796,0.5364106297492981,0.4557124972343445,0.7002899050712585
• Derek Nguyen: @Shiva this is what I'm looking at: imgur.com/a/uid9Hbi I messed with the original one a bit and change console.log() to console.log(boxes[0]) which only log out the first value, maybe that's what you're looking at?

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

• Shiva: I tried the same way but couldn't able to achieve it.