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));

如何合并/合并两个数组并在angular

2 个答案: