Проблема с слиянием и переупорядочением двух массивов объектов

Question

Я пытаюсь выяснить, как объединить два массива объектов. Вот что мне нужно сделать:

• field свойство является уникальным идентификатором каждого объекта
• выход должен только объекты, перечисленные в originalArray, в том числе объектов originalArray, которые не существуют в localStorageArray
• порядок localStorageArray необходимо поддерживать, с вниманием к предыдущему требованию (заказ должен быть: bar, bee, foo, baz)
• Выход должен содержать тыс е следующие значения свойств из localStorageArray: hidden и width (field это давание в, так как его идентификатор)
• Все другие свойства originalArray необходимости поддерживать на выходе

Вот мой ненормальный на него:

var outputArray = []; 

localStorageArray.forEach(function(localItem){ 
    originalArray.forEach(function(originalItem){ 
     if(originalItem.field === localItem.field){ 
      var item = JSON.parse(JSON.stringify(originalItem)); 
      item.hidden = localItem.hidden; 
      item.width = localItem.width; 
      outputArray.push(item); 
     } 
    }); 
}); 

Full JS Fiddle

Я был в состоянии получить заказ правильно и свойства права, но одно sue У меня есть, когда объект существует в originalArray, которого нет в localStorageArray, этот объект не включен в outputArray.

Любые предложения по моему решению?

Вот мои массивы:

var originalArray = [ 
    {field: "foo", hidden: true, sortable: false, template: "<div>#=text#</div>", width: "20px", propA: "a", propB: "b"}, 
    {field: "bee", hidden: true, sortable: false, template: "=#text#", int: 4}, 
    {field: "bar", hidden: false, sortable: false, template: "", width: "20%", propC: "C"}, 
    {field: "baz", hidden: false, sortable: true, template: "<span>#=text#</span>", int: 3} 
]; 

var localStorageArray = [ 
    {field: "bar", hidden: false, sortable: false, width: "100px"}, 
    {field: "foo", hidden: true, sortable: false, template: "<div>#=text#</div>", width: "40px"}, 
    {field: "boo", hidden: true, sortable: true, template: "<div>Boo: #=text#</div>", width: "200px"}, 
    {field: "baz", hidden: true, template: "baz:#=text#", width: "20px"} 
]; 

А вот мой желаемый результат:

var desiredArray = [ 
    {field: "bar", hidden: false, sortable: false, template: "", width: "100px", propC: "C"}, 
    {field: "bee", hidden: true, sortable: false, template: "=#text#", int: 4}, 
    {field: "foo", hidden: true, sortable: false, template: "<div>#=text#</div>", width: "40px", propA: "a", propB: "b"}, 
    {field: "baz", hidden: true, sortable: true, template: "<span>#=text#</span>", width: "20px", int: 3} 
] 

Answer 1

Если я правильно понимаю, вы хотите перезаписать hidden и width свойства этих объектов в originalArray, что также присутствуют в localStorageArray (2 объекта считаются одинаковыми, если field - то же самое)

(function() { 
    var fieldArray = localStorageArray.map(function(e) { return e.field; }); 
    originalArray.forEach(function(originalItem) { 
     var index = fieldArray.indexOf(originalItem.field); 
     var localItem; 
     if(index !== -1) { 
     //it's also in localStorage, overwrite 
     localItem = localStorageArray[index]; 
     originalItem.hidden = localItem.hidden || originalItem.hidden; 
     originalItem.width = localItem.width || originalItem.width; 
     outputArray.push(originalItem); 
     } 
    })(); 

Вместо того чтобы создать дополнительный массив, вы можете также цикл через localStorageArray и сравнить field свойство