How to merge two array of objects in one big array

Question

A want to merge two array of objects. The arrays are as follows :

let vehicle_data = [
  {
    "id": 1,
    "make_text": "Peugeot",
    "model_text": "307",
    "color_text": "Bleu",
    "category_text": "CT",
    "vin": "654321",
    "autralis_id": 0
  }
]

let vehicle_slot_data = [
  {
    "vehicle_id": 1,
    "zone": "T",
    "side": "B",
    "col": 2,
    "handled": 0,
    "uploaded": 0
  },
  {
    "vehicle_id": 1,
    "zone": "A",
    "side": "E",
    "col": 1,
    "handled": 0,
    "uploaded": 0
  }
]

I want to merge these two. Thus the result that I want is:

let result = [
    {
        "id": 1,
        "make_text": "Peugeot",
        "model_text": "307",
        "color_text": "Bleu",
        "category_text": "CT",
        "vin": "654321",
        "autralis_id": 0,
        "vehicle_id": 1,
        "zone": "T",
        "side": "B",
        "col": 2,
        "handled": 0,
        "uploaded": 0
    },
    {
        "id": 1,
        "make_text": "Peugeot",
        "model_text": "307",
        "color_text": "Bleu",
        "category_text": "CT",
        "vin": "654321",
        "autralis_id": 0,
        "vehicle_id": 1,
        "zone": "A",
        "side": "E",
        "col": 1,
        "handled": 0,
        "uploaded": 0
    }
]

I tried to do it as follows:

let result = [];

vehicle_data.map(i => {
  vehicle_slot_data.map(j => {
    if (j.vehicle_id === i.id && j.handled === 0){
      result.push(Object.assign(i, j));
    }
  })
});

But with that I get the result with two same objects:

let result = [
   {
      autralis_id: 0,
      category_text: "CT",
      col: 1,
      color_text: "Bleu",
      handled: 0,
      id: 1,
      make_text: "Peugeot",
      model_text: "307",
      side: "E",
      uploaded: 0,
      vehicle_id: 1,
      vin: "654321",
      zone: "A"
   },
   {
      autralis_id: 0,
      category_text: "CT",
      col: 1,
      color_text: "Bleu",
      handled: 0,
      id: 1,
      make_text: "Peugeot",
      model_text: "307",
      side: "E",
      uploaded: 0,
      vehicle_id: 1,
      vin: "654321",
      zone: "A"
   }
]

Here is the fiddle.

Any advice?

What should the output be if the first input array has an ID not in the second array? Or vice versa? — nnnnnn
– nnnnnn, Commented May 2, 2017 at 7:23

nnnnnn · Accepted Answer · 2017-05-02 07:34:14Z

The nested loop seems more complicated than you need. Also, if you're using .map() but not returning a value then you're not using it correctly and should be using .forEach() for simple iteration.

Anyway, maybe something like this:

let vehicle_data = [
  {
    "id": 1,
    "make_text": "Peugeot",
    "model_text": "307",
    "color_text": "Bleu",
    "category_text": "CT",
    "vin": "654321",
    "autralis_id": 0
  }
]

let vehicle_slot_data = [
  {
    "vehicle_id": 1,
    "zone": "T",
    "side": "B",
    "col": 2,
    "handled": 0,
    "uploaded": 0
  },
  {
    "vehicle_id": 1,
    "zone": "A",
    "side": "E",
    "col": 1,
    "handled": 0,
    "uploaded": 0
  }
]

let result = vehicle_slot_data
  .map(v => Object.assign({}, v, vehicle_data.find(m => m.id === v.vehicle_id)))

console.log(result)

Note that you want to have Object.assign() start with a new empty object, and .find() returns undefined if there is no matching element.

EDIT: I just saw your comment about not including the items in the result if they're not matched (by ID) in both arrays). Expand the following for a way to do that:

let vehicle_data = [
  {
    "id": 1,
    "make_text": "Peugeot",
    "model_text": "307",
    "color_text": "Bleu",
    "category_text": "CT",
    "vin": "654321",
    "autralis_id": 0
  }
]

let vehicle_slot_data = [
  {
    "vehicle_id": 1,
    "zone": "T",
    "side": "B",
    "col": 2,
    "handled": 0,
    "uploaded": 0
  },
  {
    "vehicle_id": 2,
    "zone": "A",
    "side": "E",
    "col": 1,
    "handled": 0,
    "uploaded": 0
  }
]

let result = []
vehicle_slot_data.forEach(v => {
  var match = vehicle_data.find(m => m.id === v.vehicle_id)
  if (match)
    result.push(Object.assign({}, v, match))
})
console.log(result)

Nina Scholz · Accepted Answer · 2017-05-02 07:34:38Z

You need to use an empty object as source object.

result.push(Object.assign({}, i, j));
//                        ^^

For better performance, i suggest to use Map and collect all vehicle data in a map and use Array#map for slot data.

let vehicle_data = [{ id: 1, make_text: "Peugeot", model_text: "307", color_text: "Bleu", category_text: "CT", vin: "654321", autralis_id: 0 }],
    vehicle_slot_data = [{ vehicle_id: 1, zone: "T", side: "B", col: 2, handled: 0, uploaded: 0 }, { vehicle_id: 1, zone: "A", side: "E", col: 1, handled: 0, uploaded: 0 }],
    vehicleMap = new Map(vehicle_data.map(v => [v.id, v])),
    result = vehicle_slot_data.map(v => Object.assign({}, vehicleMap.get(v.vehicle_id), v));

console.log(result);

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

Aravindh Gopi · Accepted Answer · 2017-05-03 11:29:51Z

let vehicle_data = [
  {
    "id": 1,
    "make_text": "Peugeot",
    "model_text": "307",
    "color_text": "Bleu",
    "category_text": "CT",
    "vin": "654321",
    "autralis_id": 0
  }
]

let vehicle_slot_data = [
  {
    "vehicle_id": 1,
    "zone": "T",
    "side": "B",
    "col": 2,
    "handled": 0,
    "uploaded": 0
  },
  {
    "vehicle_id": 1,
    "zone": "A",
    "side": "E",
    "col": 1,
    "handled": 0,
    "uploaded": 0
  }
]

let result = [];

vehicle_slot_data.map(i => {
      vehicle_data.map(j => {
        if (j.vehicle_id === i.id && i.handled === 0){
          result.push(Object.assign(i, j));
        }
      })
    });

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>

Just swap the maps:

  vehicle_slot_data.map(i => {
      vehicle_data.map(j => {
        if (j.vehicle_id === i.id && i.handled === 0){
          result.push(Object.assign(i, j));
        }
      })
    });

Èric Tramunt · Accepted Answer · 2017-05-02 07:29:30Z

Have you tried the "concat"?

function myFunction() {
    var hege = [{
    "id": 1,
    "make_text": "Peugeot",
    "model_text": "307",
    "color_text": "Bleu",
    "category_text": "CT",
    "vin": "654321",
    "autralis_id": 0
  }];
    var stale = [{
    "vehicle_id": 1,
    "zone": "T",
    "side": "B",
    "col": 2,
    "handled": 0,
    "uploaded": 0
  },
  {
    "vehicle_id": 1,
    "zone": "A",
    "side": "E",
    "col": 1,
    "handled": 0,
    "uploaded": 0
  }];
    var children = hege.concat(stale); 
    document.getElementById("demo").innerHTML = JSON.stringify(children);
}

<!DOCTYPE html>
<html>
<body>

<p>Click the button to join two arrays.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

</body>
</html>

I hope it helps you!

L.Ann · Accepted Answer · 2017-05-02 07:31:37Z

0

It seems you want to merge vehicle_slot_data[0] with vehicle_data[0],vehicle_slot_data[1] with vehicle_data[0] ,so I advice use jquery extend method ,or you can write a function to do the same job

var result=[
            $.extend({},vehicle_slot_data[0],vehicle_data[0]),
            $.extend({},vehicle_slot_data[1],vehicle_data[0])
           ]

answered May 2, 2017 at 7:31

L.Ann

881 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to merge two array of objects in one big array

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related