JSFiddle - React, Tailwind, and code Playground

JavaScript

function getByProperty(arr, propName, propValue) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i][propName] == propValue) return arr[i];
    }
}

var first = [{
    id: 1,
    name: 'first'
}, {
    id: 2,
    name: 'second'
}, {
    id: 3,
    name: 'third'
}]

var second = [{
    id: 2,
    filed: 'foo2'
}, {
    id: 3,
    field: 'foo3'
}, {
    id: 4,
    field: 'foo4'
}]

var third = [{
    id: 2,
    data: 'some2'
}, {
    id: 4,
    data: 'some4'
}, {
    id: 6,
    data: 'some6'
}]
var limit = first.length + second.length + third.length;
var res = [];
for (var i = 1; i < limit; i++) {

    var x = $.extend({}, getByProperty(first, "id", i), getByProperty(second, "id", i), getByProperty(third, "id", i));
    console.log(x["id"]);
    if (x["id"] === undefined) x["id"] = i;
    res.push(x);
}

console.log(res);