Based on one array object keys and other array object values create one more new array?

Question

I have two arrays like this

    arr1 = [  
   {  
      'name':'Victoria Cantrell',
      'position':'Integer Corporation',
      'office':'Croatia',
      'ext':'0839',
      'startDate':'2015-08-19',
      'salary':208.178
   },
   {  
      'name':'Pearleeee',
      'position':'In PC',
      'office':'Cambodia',
      'ext':'8262',
      'startDate':'2014-10-08',
      'salary':114.367
   },
   {  
      'name':'Pearl Crosby',
      'position':'Integer',
      'office':'Cambodia',
      'ext':'8162',
      'startDate':'2014-10-08',
      'salary':114.367
   }
]

arr2 = 

[{
  'name': 'name',
  'checkfilter': false
},
{
  'name': 'position',
  'checkfilter': true
},
{
  'name': 'office',
  'checkfilter': true
},
{
  'name': 'startDate',
  'checkfilter': false
},
{
  'name': 'ext',
  'checkfilter': false
},
{
  'name': 'salary',
  'checkfilter': false
}]

based on checkfilter== true i want produce third array like this

arr3 = `

[{
  name: 'position',
  values: [{
    checkName: 'Integer Corporation'

  },
  {
    checkName: 'In PC'

  },
  {
    checkName: 'Integer'

  }]
},

{ 
 name:'office',
  values: [{
    checkName: 'Croatia'

  },
  {
    checkName: 'Cambodia'

  }]
}
]

` I tried to solve this scenario like this, but its not working perfect

    arr3=[]
      this.arr2.forEach((column: any) => {
      if (column.ischeckFilter === true) {
        this.arr3.push({
          name: column.name,
          values: []
        });
      }
    });

 this.arr1.forEach((d: any) => {
      this.arr2.forEach((column: any) => {
        if (column.ischeckFilter === true) {
        this.arr3.forEach((c: any) => {
         // console.log(d[column.name], c.name, 'JJJJ');
         // console.log(Object.keys(d), 'BBBBBBBBB');
          let keys = Object.keys(d);
          keys.forEach((k: any) => {
            if (k === c.name) {
              if (find( c.values, { 'checkName': d[column.name]}) === undefined) {
                c.values.push({
                  checkName: d[column.name] ,
                  ischeck: false
                });
              }

            }
          });

      });
    }
      });
    });
    console.log( this.arr3)
  }

the output array values should not contain any duplicate, I used for each loops, is there any best practices to solve this scenario like decresing the loops, because above arrays length is somuch, if i use more loops it's incresing the loading time, so please let me know how to solve this issue smartly

Thanks in advance

Answer 1

Fairly easy with use of standard map, filter and reduce:

var arr1 = [{  
  'name':'Victoria Cantrell',
  'position':'Integer Corporation',
  'office':'Croatia',
  'ext':'0839',
  'startDate':'2015-08-19',
  'salary':208.178
 }, {  
  'name':'Pearleeee',
  'position':'In PC',
  'office':'Cambodia',
  'ext':'8262',
  'startDate':'2014-10-08',
  'salary':114.367
}, {  
  'name':'Pearl Crosby',
  'position':'Integer',
  'office':'Cambodia',
  'ext':'8162',
  'startDate':'2014-10-08',
  'salary':114.367
}];

const arr2 = [{
  'name': 'name',
  'checkfilter': false
},{
  'name': 'position',
  'checkfilter': true
},{
  'name': 'office',
  'checkfilter': true
},{
  'name': 'startDate',
  'checkfilter': false
},{
  'name': 'ext',
  'checkfilter': false
},{
  'name': 'salary',
  'checkfilter': false
}];

const isDuplicate = (arr, name) => !arr.find(({ checkname }) => checkname === name);
const arr3 = arr2
  .filter(({ checkfilter  }) => checkfilter)
  .map(({ name }) => ({
    name: name,
    values: arr1.reduce((names, item) =>  isDuplicate(names, item[name]) ?
      [...names, { checkname: item[name] } ] : names, [])
}));

console.log(arr3);