How to add a field to each object in array and push that result array to another array using react and javascript?

Question

i want to add a field type to each object in an array and push the result to another array and push that to another array.

below is how the array of object looks,

const arrObj1 = [
    {
        id: '1',
        name: 'n1',
    },
    {
        id: '2',
        name: 'n2',
    }
]

const arrObj2 = [
    {
        id: '3',
        name: 'n3',
    },
    {
        id: '4',
        name: 'n4',
    }
]

what i am trying to do?

i want to add a type field with value 'type1' to arrObj1 and type field with value 'type2' to arrObj2

so the output should be like below,

const arrObj1 = [
    {
        id: '1',
        name: 'n1',
        type: 'type1',
    },
    {
        id: '2',
        name: 'n2',
        type: 'type1',
    }
]

const arrObj2 = [
    {
        id: '3',
        name: 'n3',
        type: 'type2',
    },
    {
        id: '4',
        name: 'n4',
        type: 'type2',
    }
]

then i want to combine these two arrays arrObj1 and arrObj2 into one array like below

const combinedArrObj = [
    {
        id: '1',
        name: 'n1',
        type: 'type1',
    },
    {
        id: '2',
        name: 'n2',
        type: 'type1',
    },
    {
        id: '3',
        name: 'n3',
        type: 'type2',
    },
    {
        id: '4',
        name: 'n4',
        type: 'type2',
    }
]

what i have tried?

const arrObj1Res = arrObj1.map((obj: any) => {
    return {
        ...arrObj1,
        type: 'type1',
    }
});
const arrObj2Res = arrObj2.map((obj: any) => {
    return {
        ...arrObj2,
        type: 'type2',
    }
});
const combinedArrObj = [
    ...arrObj1Res,
    ...arrObj2Res,
];

this works. but how can i refactor to something simple rather than adding field type for each obj in array and then combine

could someone help me with this. thanks.

What are the criteria of determining ```type1``` and ```type2``` ? You just have two array of objects? — tcf01, Jan 27 '21 at 14:10
Does this answer your question? [Add property to an array of objects](https://stackoverflow.com/questions/38922998/add-property-to-an-array-of-objects) — Heretic Monkey, Jan 27 '21 at 14:37
See also [Merge 2 arrays of objects](https://stackoverflow.com/q/7146217/215552) — Heretic Monkey, Jan 27 '21 at 14:39
I don't understand why you'd want to do this all in one step. The best code does things in multiple, simple, understandable steps. — Heretic Monkey, Jan 27 '21 at 14:41

score 0 · Answer 1 · answered Jan 27 '21 at 14:22

you can use this

let result=arrObj1.concat(arrObj2)
function contains(a, obj) {
    for (var i = 0; i < a.length; i++) {
        if (a[i] === obj) {
            return true;
        }
    }
    return false;
}
result.filter(element => {
      if (contains(arrObj1,element) ){
        element.type='type1'
        return element
      }else {
        element.type='type2'
        return element
      }
});

score 0 · Answer 2 · answered Jan 27 '21 at 14:34

In pure JS, just a simple for loop can do the part where you add a field named type.

for(var i = 0; i < arrObj1.length; i++){
 arrObj1[i].type = "type1";
}
for(var i = 0; i < arrObj2.length; i++){
 arrObj2[i].type = "type2";
}

and to combine the arrays together just use concat.

const combinedArrObj = arrObj1.concat(arrObj2);

score 0 · Answer 3 · answered Jan 27 '21 at 14:47

const allArrayObject = arrObj1.concat(arrObj2);


const finalResultArray = allArrayObject.reduce((finalResultArray, eachArrayObj, index) =>{
     const isTypeOne =  arrObj1.length - 1 >= index
     const relevantTypeString = isTypeOne ? "type1" : "type2"

     eachArrayObj.type = relevantTypeString
     finalResultArray.push(eachArrayObj)  
    
     return finalResultArray
}, [])

How to add a field to each object in array and push that result array to another array using react and javascript?

3 Answers3