how to merge/combine two array and create a new row in angular
data1 = [{ row: 1, name: 'edward' }]; data2 = [{ row: 1, style: 'style 1' },{ row: 2, style: 'style 2' },{ row: 3, style: 'style 3' }]; What I’m trying to do is to combine/merge the data and create a new row. I try to use the filter but it doesn’t display the data row2 and row3. cause the from the data1 it has only 1 row.
here’s the expected output
[{ row: 1, data1: { name: 'edward' }, data2: { style: 'style 1' } },{ row: 2, data1: { }, data2: { style: 'style 2' } },{ row: 3, data1: { }, data2: { style: 'style 3' } }]; and then when there’s a new data from data1 it should be added. example:
{ row: 5, name: 'juan' } it should be like this:
[{ 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' } }]; code that I tried:
const data = this.data1.filter((x: any) => this.data2.map((y: any) => y.row === x.row)); console.log(data) Try This out
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));
Try like merge function below. Added explanation to code.
I’ve created new function getMergeResult. Once you add/update/delete record from data1 or data2 you can call it and get updated 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));
