Home > OS >  How we made array of object from array of array in javascript?
How we made array of object from array of array in javascript?

Time:11-30

Here I am trying to convert contents of array to object content.

Below is my code -

let arr = [["a",12],["b",15],["c",10],["d",19],["e",20]]
let resArr = []
let resObj = {}
arr.map(( ele,index ) => {
    resObj.label = ele[0]
    resObj.value = ele[1]
    resArr[index] = resObj
})

and I am getting output as -

resObj = 
[{label:"e",value:12},
{label:"e",value:12},
{label:"e",value:12},
{label:"e",value:12},
{label:"e",value:12}]

The last array content is copied to whole object.

Output should be -

resObj = 
[{label:"a",value:12},
{label:"b",value:15},
{label:"c",value:10},
{label:"d",value:19},
{label:"e",value:20}]

Please help me. Thanks in Advance. Please mention what is the mistake in my code

CodePudding user response:

You should create resObj inside the map callback; otherwise, you are modifying the same object in each iteration. Additionally, you should directly return resObj in the callback and use the result of map as the result array, as Array#map returns an array created by the return values of the callback after being called on each element of the original array.

let arr = [["a",12],["b",15],["c",10],["d",19],["e",20]]
let resArr = arr.map(( ele,index ) => {
    let resObj = {}
    resObj.label = ele[0]
    resObj.value = ele[1]
    return resObj;
});
console.log(resArr);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

For a simpler solution, you can use destructuring and shorthand property names.

let arr = [["a",12],["b",15],["c",10],["d",19],["e",20]]
let resArr = arr.map(([label, value]) => ({label, value}));
console.log(resArr);
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Consider using Array.reduce

const toObj = [["a",12],["b",15],["c",10],["d",19],["e",20]]
  .reduce( (acc, [key, value]) => [...acc, {label: key, value: value}], [] );
document.querySelector(`pre`).textContent = JSON.stringify(toObj, null, 2);
<pre></pre>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

The issue is caused by referring to and changing the same object over and over again. You should create the object inside your map() to avoid that. By the way you can use a shorter version like this:

let arr = [["a",12],["b",15],["c",10],["d",19],["e",20]];
let resArr = arr.map(ele => {return {[ele[0]]: ele[1]}});
console.log(resArr);
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related