CODEWITHSUNDEEP
javascriptecmascript-6
Diagathe Josué
Diagathe Josué

Reputation: 11976

Javascript Objects - merge an array of object with some classicals objects

I'm trying to merge an array of object in javascript with some classicals objects. But I obtain a weird big object with some array of object and some individuals objects like this:

Here a demo of my configuration.

Here the two objects I want to merge: 

var object1 = {
  "5b7973bdce3eb938a6de86a3": { addAt: 1534727291296, quantity: 1 },
  "5b7973bdce3eb938a6de86a5": { addAt: 1534727292889, quantity: 1 },
  "5b7973bdce3eb938a6de86a7": { addAt: 1534727297106, quantity: 1 }
};

var object2 = [
  {
    id: "5b7973bdce3eb938a6de86a3",
    category: "main dish",
    ingredients:
      " Peeled groundnuts ↵ Onion, garlic, pepper, salt ↵ Vegetable oil ↵  Ground crayfish ↵  Meat",
    price: "5.50"
  },
  {
    id: "5b7973bdce3eb938a6de86a5",
    category: "entry",
    ingredients:
      "1.2kg (2.6 lbs) goat meat (cut with the skin) ↵ 2 …g spoon vegetable oil. ↵  Black pepper (optional)",
    price: "6.50"
  },
  {
    id: "5b7973bdce3eb938a6de86a7",
    category: "appetizers",
    ingredients:
      "2 cups of warm water. ↵   2 tsp. baking powder. ↵ …ar. ↵    2 tsps. vegetable oil. ↵  Pinch of salt.",
    price: "5.00"
  }
];

Wished result: 

       // for each object, merge addAt and quantity with previous object
       {
        id: "5b7973bdce3eb938a6de86a7",
        category: "appetizers",
        ingredients:
          "2 cups of warm water. ↵   2 tsp. baking powder. ↵ …ar. ↵    2 tsps. vegetable oil. ↵  Pinch of salt.",
        price: "5.00",
        quantity: 1,
        addAt: 1534727297106 
      }

Obtained result from my console.log: 

// one big object, not merged
{
0:
{id: "5b7973bdce3eb938a6de86a3", category: "main dish", ingredients: " Peeled groundnuts ↵ Onion, garlic, pepper, salt, maggi ↵ Vegetable oil ↵  Ground crayfish ↵  Meat", price: "5.50", …}
1:
{id: "5b7973bdce3eb938a6de86a5",  category: "entry", ingredients: "1.2kg (2.6 lbs) goat meat (cut with the skin) ↵ 2 …g spoon vegetable oil. ↵  Black pepper (optional)", price: "6.50", …}
2:
{id: "5b7973bdce3eb938a6de86a7", category: "appetizers", ingredients: "2 cups of warm water. ↵   2 tsp. baking powder. ↵ …ar. ↵    2 tsps. vegetable oil. ↵  Pinch of salt.", price: "5.00", …}

5b7973bdce3eb938a6de86a3:
{addAt: 1534727291296, quantity: 1}

5b7973bdce3eb938a6de86a5:
{addAt: 1534727292889, quantity: 1}

5b7973bdce3eb938a6de86a7:
{addAt: 1534727297106, quantity: 1}
}

object2 =

I have tried so far these differents methods: 

Object.keys(this.props.data.compilation).map((key, index) => {
  if(this.props.data.compilation[key] === this.props.articles[index]) { 
    this.props.data.compilation[index].quantity = this.props.articleID[key]["quantity"] 
    return compilation = Object.assign({}, this.props.data.compilation[key], {
      quantity : this.props.articles[index][quantity] 
    }, { 
      addAt: this.props.articles[index][addAt]
    })
  }
})

Object.keys(this.props.data.compilation).map((key, index) => {
  if(this.props.data.compilation[key] === this.props.articles[index]) { 
    this.props.data.compilation[index].addAt = this.props.articleID[key]["addAt"], 
    this.props.data.compilation[index].quantity = this.props.articleID[key]["quantity"] 

  }
})

// lodash method
var compilation = _.merge( {},  this.props.data.compilation, this.props.articles)


//lodash method
var compilation = _.assign( {},  this.props.data.compilation, this.props.articles)

None of them works so far as I would. Why my object doesn't merge properly ? Any hint would be great, thanks.

Upvotes: 1

Views: 79

Answers (1)

ibrahim mahrir
ibrahim mahrir

Reputation: 31682

Just map object2 into a new array of objects. For each object in object2 create a new object that is the fusion of it with the equivalent object from object1 (retrieved using the id property):

var result = object2.map(o => Object.assign({}, o, object1[o.id]));

Example:

var object1 = {"5b7973bdce3eb938a6de86a3":{"addAt":1534727291296,"quantity":1},"5b7973bdce3eb938a6de86a5":{"addAt":1534727292889,"quantity":1},"5b7973bdce3eb938a6de86a7":{"addAt":1534727297106,"quantity":1}};

var object2 = [{"id":"5b7973bdce3eb938a6de86a3","category":"main dish","ingredients":" Peeled groundnuts ↵ Onion, garlic, pepper, salt ↵ Vegetable oil ↵  Ground crayfish ↵  Meat","price":"5.50"},{"id":"5b7973bdce3eb938a6de86a5","category":"entry","ingredients":"1.2kg (2.6 lbs) goat meat (cut with the skin) ↵ 2 …g spoon vegetable oil. ↵  Black pepper (optional)","price":"6.50"},{"id":"5b7973bdce3eb938a6de86a7","category":"appetizers","ingredients":"2 cups of warm water. ↵   2 tsp. baking powder. ↵ …ar. ↵    2 tsps. vegetable oil. ↵  Pinch of salt.","price":"5.00"}];

var result = object2.map(o => Object.assign({}, o, object1[o.id]));

console.log(result);

Upvotes: 4

Related Questions