JS: Add objects form an array to objects inside another array

Question

DISCLAIMER: Please dont mind my stupid object names, its just to learn the basics

I have an array of objects named "cars":

const cars = [
  {
    name: "red",
    competes: true,
    category: 2,
    given: 400
  },
  {
   name: "blue",
   competes: false,
   category: 2,
    given: 0
  },
  {
    name: "green",
    competes: true,
     category: 2,
    given: 0
  }
]

And another array of objects named addOns:

const addOns = [
  {
    name: "hyperblast",
    upgrade: 100
  },
  {
    name: "catalyst",
    upgrade: 400
  }
]

Question

How can i add for example the addOn {name: "catalyst", upgrade: 400} to the car named "green"?
Ive tried with

cars[2].push(addOns[1]);

but it doesnt work. And all my google searches were without result (arrays of objects seem so important but I constantly fail to find anything regarding. Only about arrays or objects, never together)

What should the "car" look like after you've "added" a catalyst? — Andreas
– Andreas, Commented Nov 17, 2021 at 14:56

zedian · Accepted Answer · 2021-11-17 15:01:30Z

1

You could add the addOns as another field of the car object. For your example: cars[2].extra = addOns[0]; . After typing this, if you try to console the cars[2] you will see:

{
  name: 'green',
  competes: true,
  category: 2,
  given: 0,
  extra: { name: 'hyperblast', upgrade: 100 }
}

Since you are working with vanilla Js, the cars[0].extra is going to work, but if you use TS in future, it would be better to define a field before adding it, or changing the structure of the script completely

answered Nov 17, 2021 at 15:01

zedian

4771 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

youngmago Over a year ago

Thanks for the answer! Yes Im still trying to learn the basics but ill keep it in mind for the future

John Patrick Meyers · Accepted Answer · 2021-11-17 15:39:09Z

0

As cars and addOns both have the property key 'name', I would change the second one to 'addOnName' or something of that sort. Otherwise, 'green' will just be overwritten to 'hyperblast' in the result.

Being that you're trying to add multiple properties to an object, you should use a for...in loop. As you can see below, I've cycled through the cars array with a regular for loop. If the given car's name is 'green' I call the addProps function and pass it the given car object as an argument. Each prop in your chosen addOns object is then added on to the given car obj.

const addProps = (obj) => {
  for (let prop in addOns[0]) {
    obj[prop] = addOns[0][prop];
  }
}

for (let i = 0; i < cars.length; i++) {
  if (cars[i].name === 'green') {
    addProps(cars[i]);
  }
}

console.log(cars);

answered Nov 17, 2021 at 15:39

John Patrick Meyers

1

1 Comment

max Over a year ago

While this makes sense, I think the question is too unclear to answer with this level of detail.

Collectives™ on Stack Overflow

JS: Add objects form an array to objects inside another array

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related