I have a JSON file with image Names. I want to store data in a Key-Value Object. I'm creating the key using regex to remove -img[image No]. I'm unable to store all image Names in the array. When I add a new element it overwrites it to the previous value.
How can I push new data in an array without wiping off previously-stored data?
Data Document
[
"apple-img1",
"apple-img2",
"apple-img3",
"apple-img4",
"apple-img5",
"dell-img1",
"dell-img2",
"dell-img3",
"hp-img1",
"hp-img2"
]
My Code
content.map((contentInfo) => {
let key = contentInfo.replace(/-img\d$/, "") //Return Company Name without -i{Digit} For Example apple-img1 whould be apple
let imgName = contentInfo //Name of the Image
data[key] = {
Images: imgName //Append New Image 2 Array Instead of OverWriting Them
}
console.log(data);
})
Current Output
{
"apple": {
"Images": [
"apple-img5"
]
},
"dell": {
"Images": [
"dell-img3"
]
},
"hp": {
"Images": [
"hp-img2"
]
}
}
Expected Output
{
"apple": {
"Images": [
"apple-img1",
"apple-img2",
"apple-img3",
"apple-img4",
"apple-img5"
]
},
"dell": {
"Images": [
"dell-img1",
"dell-img2",
"dell-img3"
]
},
"hp": {
"Images": [
"hp-img1",
"hp-img2"
]
}
}
Output of Array.prototype.map() will again be an array. In your case, Array.prototype.reduce() is the ideal function to achive it:
const data = [
"apple-img1",
"apple-img2",
"apple-img3",
"apple-img4",
"apple-img5",
"dell-img1",
"dell-img2",
"dell-img3",
"hp-img1",
"hp-img2",
];
const output = data.reduce((prev, curr) => {
// get the keyname
const [keyName] = curr.split("-");
if (prev[keyName]) {
// If the property exists then push to Images array
prev[keyName].Images.push(curr);
} else {
// If the property name does not exist,
// create it and add the initial value in the format you want
prev[keyName] = { Images: [curr] };
}
return prev;
}, {});
console.log(output);You can use the spread operator to accomplish this task
content.map((contentInfo) => {
let key = contentInfo.replace(/-img\d$/, "") //Return Company Name without -i{Digit} For Example apple-img1 whould be apple
let imgName = contentInfo //Name of the Image
data = {
Images: {...imgName, key} //Append New Image 2 Array Instead of OverWriting Them
}
console.log(data);
})
This should work.
The spread operator can be used for adding values to an array.
content.map((contentInfo) => {
let key = contentInfo.replace(/-img\d$/, ''); //Return Company Name without -i{Digit} For Example apple-img1 whould be apple
let imgName = contentInfo; //Name of the Image
if (data[key] == undefined) {
data[key] = {
Images: [imgName],
};
} else {
data[key] = {
Images: [...data[key].Images, imgName], //Append New Image 2 Array Instead of OverWriting Them
};
}
console.log(data);
});