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>