Как объединить два массива JavaScript объектов JSON, не используя JQUERY?

Question

У меня есть два массива объектов (если я не использую правильную терминологию, пожалуйста, прости меня. Я новичок в JS).Массивы dataset и dataset2 имеют объекты с общим ключом id.Я хочу объединить каждый объект, чтобы сформировать новый массив объединенных объектов.Как показано в datasetCombined ниже.

dataset = [{​
    "State": "AL",
    "id": 1000,
    "name": "Alabama",​​
    "percent_educated": 24},

    {​
    "State": "AL",
    "id": 1001,
    "name": "Autauga County",​​
    "percent_educated": 24.6},

    {​
    "State": "AL",
    "id": 1003,
    "name": "Baldwin County",​​
    "percent_educated": 29.5
    }]

dataset2 = [{​
    "id": 1000,
    "qualified_professionals": "64,767,787",​​
    "high_school": "58,820,411",
    "middle_school_or_lower": "27,818,380" },

    {
    "id": 1001,
    "qualified_professionals": "783,076",​​
    "high_school": "1,009,593",
    "middle_school_or_lower": "496,036" },

    {​
    "id": 1003,
    "qualified_professionals": "8,968",​​
    "high_school": "12,519",
    "middle_school_or_lower": "4,528" 
    }]

Желаемый результат:

datasetCombined = [{​
    "State": "AL",
    "id": 1000,
    "name": "Alabama",​​
    "percent_educated": 24,
    "qualified_professionals": "64,767,787",​​
    "high_school": "58,820,411",
    "middle_school_or_lower": "27,818,380"},

    {​
    "State": "AL",
    "id": 1001,
    "name": "Autauga County",​​
    "percent_educated": 24.6,
    "qualified_professionals": "783,076",​​
    "high_school": "1,009,593",
    "middle_school_or_lower": "496,036"},

    {​
    "State": "AL",
    "id": 1003,
    "name": "Baldwin County",​​
    "percent_educated": 29.5,
    "qualified_professionals": "8,968",​​
    "high_school": "12,519",
    "middle_school_or_lower": "4,528"
    }]

Answer 1

Если вы не используете ES6 и не хотите использовать какую-либо библиотеку, такую ​​как Lodash, и If Количество объектов в обоих массивах равно, и они расположены в порядке по свойству id (какпоказано в вашем примере), то вы можете использовать код ниже:

var datasetCombined = [];

dataset.map(function(obj,keyNo){
  for (var key in dataset2[keyNo]){
    obj[key]=dataset2[keyNo][key];
  }
  datasetCombined.push(obj)
});

Answer 2

После ошибки, связанной с неправильным прочтением вашего вопроса, я потратил немного времени и создал этот пример для вас, чтобы объединить два массива на основе идентификатора.

let dataset = [{
    "State": "AL",
    "id": 1000,
    "name": "Alabama",
    "percent_educated": 24
  },
  {
    "State": "AL",
    "id": 1001,
    "name": "Autauga County",
    "percent_educated": 24.6
  },
  {
    "State": "AL",
    "id": 1003,
    "name": "Baldwin County",
    "percent_educated": 29.5
  }
];

let dataset2 = [{
    "id": 1000,
    "qualified_professionals": "64,767,787",
    "high_school": "58,820,411",
    "middle_school_or_lower": "27,818,380"
  },
  {
    "id": 1001,
    "qualified_professionals": "783,076",
    "high_school": "1,009,593",
    "middle_school_or_lower": "496,036"
  },
  {
    "id": 1003,
    "qualified_professionals": "8,968",
    "high_school": "12,519",
    "middle_school_or_lower": "4,528"
  }
];

// create a function to reduce your arrays
let reducer = function(accumulator, currentValue, currentIndex, array) {
   // check if the item already exists in the array
	let found = accumulator.find((item) => item.id == currentValue.id);
  
  if (found) {
    // if it exists then use assign to merge the two values
    Object.assign(found, currentValue)
  } else {
    // doesn't exist, just add it to the array
  	accumulator.push(currentValue);
  }
  
  return accumulator;
}

let datasetCombined = [];

dataset.reduce(reducer, datasetCombined);
dataset2.reduce(reducer, datasetCombined);

console.log(datasetCombined);

Answer 3

Возможное решение вышеуказанной проблемы может быть:

Object.assign(b, a);

Таким образом, b будет иметь как свои собственные свойства, так и свойства a.Тем не менее, мы могли бы хотеть избежать изменения б.В таком случае мы можем ввести новый пустой объект и скопировать в него свойства a и b.

const c = Object.assign({}, a, b);

И если по какой-то причине вы не можете использовать функции языка ES6 в своем приложении, вы можете прибегнуть к помощи.использовать библиотеку Lodash.

const c = _.assign({}, a, b);

Answer 4

Вы можете найти id и добавить существующий объект или вставить копию объекта в набор результатов.

Это работает для произвольного числа массивов.

var dataset = [{ State: "AL", id: 1000, name: "Alabama", percent_educated: 24 }, { State: "AL", id: 1001, name: "Autauga County", percent_educated: 24.6 }, { State: "AL", id: 1003, name: "Baldwin County", percent_educated: 29.5 }],
    dataset2 = [{ id: 1000, qualified_professionals: "64,767,787", high_school: "58,820,411", middle_school_or_lower: "27,818,380" }, { id: 1001, qualified_professionals: "783,076", high_school: "1,009,593", middle_school_or_lower: "496,036" }, { id: 1003, qualified_professionals: "8,968", high_school: "12,519", middle_school_or_lower: "4,528" }],
    result = [dataset, dataset2].reduce((r, a) => {
        a.forEach(o => {
            var temp = r.find(({ id }) => o.id === id);
            if (!temp) {
                r.push(Object.assign({}, o));
            } else {
                Object.assign(temp, o);
            }
        });
        return r;
    }, []);
    
console.log(result);

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

Немного лучший подход с Map.

var dataset = [{ State: "AL", id: 1000, name: "Alabama", percent_educated: 24 }, { State: "AL", id: 1001, name: "Autauga County", percent_educated: 24.6 }, { State: "AL", id: 1003, name: "Baldwin County", percent_educated: 29.5 }],
    dataset2 = [{ id: 1000, qualified_professionals: "64,767,787", high_school: "58,820,411", middle_school_or_lower: "27,818,380" }, { id: 1001, qualified_professionals: "783,076", high_school: "1,009,593", middle_school_or_lower: "496,036" }, { id: 1003, qualified_professionals: "8,968", high_school: "12,519", middle_school_or_lower: "4,528" }],
    result = Array.from([dataset, dataset2].reduce(
        (r, a) => a.reduce((m, o) => m.set(o.id, Object.assign(m.get(o.id) || {}, o)), r),
        new Map
    ).values());
    
console.log(result);

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

Answer 5

Вы можете использовать Array.prototype.reduce:

const datasetCombined = dataset1.reduce((acc, next) => {
    const combinedItem = Object.assign(
        {},
        next,
        dataset2.find(item => (item.id = next.id))
    );
    acc.push(combinedItem);
    return acc;
}, []);

Answer 6

Попробуйте это с Underscore.js или Lodash

var mergedList = _.map(dataset1, function(item){
  return _.extend(item, _.findWhere(dataset2, { 
    id: item.id 
  })); 
});