как объединить / объединить два массива и создать новую строку в angular

Question

data1 = [{
 row: 1,
 name: 'edward'
}];

data2 = [{
 row: 1,
 style: 'style 1'
},{
 row: 2,
 style: 'style 2'
},{
 row: 3,
 style: 'style 3'
}];

Я пытаюсь объединить / объединить данные и создать новую строку. Я пытаюсь использовать фильтр, но он не отображает данные row2 и row3. потому что из data1 у него только 1 строка.

вот ожидаемый результат

[{
    row: 1, data1: { name: 'edward' }, data2: { style: 'style 1' }
},{
    row: 2, data1: { }, data2: { style: 'style 2' }
},{
    row: 3, data1: { }, data2: { style: 'style 3' }
}];

, а затем, когда появятся новые данные из data1, они должны быть добавлены. пример:

{ row: 5, name: 'juan' }

это должно быть так:

[{
    row: 1, data1: { name: 'edward' }, data2: { style: 'style 1' }
},{
    row: 5, data1: { name: 'juan' }, data2: { }
},{
    row: 2, data1: { }, data2: { style: 'style 2' }
},{
    row: 3, data1: { }, data2: { style: 'style 3' }
}];

код, который я пробовал:

const data = this.data1.filter((x: any) => this.data2.map((y: any) => y.row === x.row));
console.log(data)

Answer 1

Попробуйте это

data1 = [
{row: 1,name: 'edward'},
{ row: 5,name: 'juan' } 
];

data2 = [
{
 row: 1,
 style: 'style 1'
},{
 row: 2,
 style: 'style 2'
},{
 row: 3,
 style: 'style 3'
}];

function mergeData(data1,data2){
  hashDataOne = {};
  mergedArray = [];
  data1.forEach(ele =>{
    hashDataOne[ele.row] = ele.name;
  });
  
  data2.forEach(ele =>{
    if(ele.row in hashDataOne){
      mergedArray.push({
        row: ele.row,
        data2:{style:ele.style},
        data1:{name:hashDataOne[ele.row]}
      });
      delete hashDataOne[ele.row]; 
    } else {
      mergedArray.push({
        row: ele.row,
        data2:{style:ele.style},
        data1:{}
      });    
    }
  });
  
  for(const row in hashDataOne){
      mergedArray.push({
        row: row,
        data2:{},
        data1:{name: hashDataOne[row]}
      });    
  }
   
  return mergedArray;
}

console.log(mergeData(data1,data2));

Answer 2

Попробуйте функцию merge ниже. Добавлено пояснение к коду.

Я создал новую функцию getMergeResult. Как только вы add/update/delete записываете из data1 или data2, вы можете вызвать его и получить обновления array.

// it will merge records from data array based on row value.
// use property name to assign value of data to result object.
// result is optional. function will return result array 
// or you can pass result to function as it is reference type it will updated.
function merge(data, name, result = []) {
  // loop over data
  data.forEach(d => {
    // find object for row exists in result.
    let obj = result.filter(r => r.row === d.row)[0];
    // if obj is null then create new object and push to array.
    if (!obj) {
      obj = { row: d.row, data1: {}, data2: {} };
      result.push(obj);
    }
    // assign properties values to obj["data1"] or obj["data2"] with use of name parameter.
    Object.assign(obj[name], d);
    // remove row property from obj["data1"] or obj["data2"].
    delete obj[name].row;
  });
  // return result.
  return result;
}

function getMergeResult(data1, data2) {
  let result = merge(data1, 'data1');
  merge(data2, 'data2', result);
  return result;
}

let data1 = [{
  row: 1,
  name: 'edward'
}];

let data2 = [{
  row: 1,
  style: 'style 1'
}, {
  row: 2,
  style: 'style 2'
}, {
  row: 3,
  style: 'style 3'
}];

console.log("Initial result");
console.log(getMergeResult(data1, data2));

console.log("Push new record");
data1.push({ row: 5, name: 'juan' });

console.log("New result");
console.log(getMergeResult(data1, data2));