Best way to dynamically add items from an array to an object as new values

Question

I'm trying to achieve something like this:

let obj = [
    {"id": "1"},
    {"id": "2"},
    {"id": "3"}
]
const arr = ["a", "b", "c"];

obj = addAtoO(arr, obj); // expected outcome: obj = [{"id": "1", "text": "a"}, {"id": "2", "text": "b"}, {}]

In words: dynamically add values from an array to an object as new values.

Here's what I'm trying:

const addAtoO = (a, o) => {
    o.map((i) => {
        console.log(Object.keys(i));
        // a.forEach((e) => {
        //     console.log(e);
        // });
        i['text'] = 'something'; // just add text for testing
    });
    return o;
};

obj = addAtoO(arr, obj);
console.log('result:');
console.log(obj);

But it seems like there must be a better way.

Thank you so much guys. All your solutions are correct. I had to mark one so I picked the one that is the closest to this specific question.

Answer 1

You can use map as you are using , & use it's index to get the value from arr array and create a new object with values from obj & arr

 let obj = [{ "id": "1" }, { "id": "2" }, { "id": "3" } ] const arr = ["a", "b", "c"]; let output = obj.map(function(item, index) { return Object.assign({}, item, { text: arr[index] }) }) console.log(output) 

Else you can also use forEach and mutate the original obj array

 let obj = [{ "id": "1" }, { "id": "2" }, { "id": "3" } ] const arr = ["a", "b", "c"]; obj.forEach(function(item, index) { item.text = arr[index] }) console.log(obj) 

Answer 2

You can use .map() like this:

 const arr1 = [ {"id": "1"}, {"id": "2"}, {"id": "3"} ] const arr2 = ["a", "b", "c"]; const merge = (a1, a2) => a1.map((o, i) => Object.assign({}, o, {text: a2[i]})); console.log(merge(arr1, arr2)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 3

The way you are using addAtoO suggests that you don't care about altering the original objects. If that's the case, then a simple forEach will do:

const addAtoO = (arr, obj) => arr.forEach((t, i) => obj[i].text = t);

addToO alters the original array of objects obj , so it doesn't return anything.

Example:

 const addAtoO = (arr, obj) => arr.forEach((t, i) => obj[i].text = t); let obj = [ {"id": "1"}, {"id": "2"}, {"id": "3"}]; const arr = ["a", "b", "c"]; addAtoO(arr, obj); console.log(obj); 

Answer 4

For more flexibility, i suggest to use a key for the function as well as parameter.

 const addTo = (objects, values, key) => objects.map((o, i) => Object.assign({}, o, { [key]: values[i] })); console.log(addTo([{ id: "1" }, { id: "2" }, { id: "3" }], ["a", "b", "c"], 'text')); 

If you like to mutate the given objects, just remove the empty object from Object.assign .

 const addTo = (objects, values, key) => objects.map((o, i) => Object.assign(o, { [key]: values[i] })); var objects = [{ id: "1" }, { id: "2" }, { id: "3" }]; addTo(objects, ["a", "b", "c"], 'text'); console.log(objects); 

Answer 5

There is no need to make things complicated. Just use a forEach .

 let obj = [{ "id": "1" }, { "id": "2" }, { "id": "3" } ] const arr = ["a", "b", "c"]; obj.forEach((object, index) => { object.text = arr[index] }) console.log(obj)