I'm trying to insert new keys into an array that are basically extracted from the parent array. I can't find a reason why the main array within the store would change just by inserting a new key into the extracted array.
This is how I try to add a new key value pair in a custom array
const array = [{"integrationTypeId":1,"type":"aptus","fields":[{"name":"base_url"},{"name":"hash_key"}]}]
function runArray(){
let connectorObject= {}
let newArray
if (array.length > 0) {
connectorObject =
array.find(
(c) => c.integrationTypeId === 1,
);
newArray = connectorObject.fields
newArray !== undefined &&
newArray.map((object) => {
return Object.assign(object, {
inputType: "textField",
value: object.name,
})
})
}
console.log(JSON.stringify(newArray))
console.log(JSON.stringify(array))
}
runArray();
The following is the output:
Console 1.: newArray
[{"name":"base_url","inputType":"textField","value":"base_url"},{"name":"hash_key","inputType":"textField","value":"hash_key"}]
Console 2.: Parent array
[{"integrationTypeId":1,"type":"aptus","fields":[{"name":"base_url","inputType":"textField","value":"base_url"},{"name":"hash_key","inputType":"textField","value":"hash_key"}]}]
What makes it modified with newArray value.
Even tried: newArray.map(obj => ({ ...obj, [inputType]: "textField"}));
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It is important to know that Javascript arrays and objects are passed by reference. This means that if you modify an array or object, it will be reflected in all references to that array or object.
In this case, Array-->Object-->Array-->Object is too nested. So make sure to create a new array or object when extracting. Here I use ES6
...syntax to create a new array/object. Simply use=to copy its reference, thus reflecting the changes.The code below is not optimized yet, but I hope you get the idea.
const array = [ { integrationTypeId: 1, type: "aptus", fields: [{ name: "base_url" }, { name: "hash_key" }], }, ]; function runArray() { let connectorObject = {}; let newArray = []; if (array.length > 0) { connectorObject = { ...array.find((c) => c.integrationTypeId === 1), //Creating brand new copy of array object fields: [...array.find((c) => c.integrationTypeId === 1).fields], //Creating brand new copy of fields array }; newArray = connectorObject.fields.map((field) => { //Creating brand new copy of fields array object return { ...field }; }); newArray.map((object) => { Object.assign(object, { inputType: "textField", value: object.name, }); }); } console.log(JSON.stringify(newArray)); console.log(JSON.stringify(array)); } runArray();