Is this the most efficient JavaScript for comparing two arrays of objects and modifying properties?-CodePudding

I've got a method below that is in an Ecma 6 component (Salesforce Lightning Web Components if any one is curious). I have added it here because this is more JavaScript than LWC question. Is this the best way to accomplish the task.

I have two arrays, both are of objects: I want to compare the arrays, and create a new array of objects that has a new property required: true or required: false. Is this the most efficient way to do this?

const RequiredFields = 
  [ { fieldApiName: 'FirstName', value: 'Test'         } 
  , { fieldApiName: 'LastName',   value: 'LastNameTest' } 
  ]

const AllFields = 
  [ { fieldApiName: 'FirstName', value: 'Test'         } 
  , { fieldApiName: 'LastName',   value: 'LastNameTest' } 
  , { fieldApiName: 'Suffix',     value: ''             } 
  ] 

addRequiredFields(RequiredFields, Allfields) {
  RequiredFields.forEach(field => {
    field.required = true; 
  });

  Allfields.forEach(field => {
    var hasVal = Object.values(field).includes(true); 
    if (hasVal) {
      console.log(field.fieldApiName   ' = TRUE'); 
    } else {
      field.required = false; 
    }
    console.log(field); 
    
  });
  return Allfields;  
}

console.log ( addRequiredFields(RequiredFields, Allfields) )

output =  [ 
    { fieldApiName: FirstName, value: 'Test' , required: true} 
  , { fieldApiName: LastName,   value: 'LastNameTest' , required: true} 
  , { fieldApiName: Suffix,     value: '', required: false            } 
  ]

CodePudding user response：

do that, use Array.some()

const
  RequiredFields = 
    [ { fieldApiName: 'FirstName', value: 'Test'         } 
    , { fieldApiName: 'LastName',  value: 'LastNameTest' } 
    ]
, Allfields = 
  [ { fieldApiName: 'FirstName', value: 'Test'         } 
  , { fieldApiName: 'LastName',  value: 'LastNameTest' } 
  , { fieldApiName: 'Suffix',    value: ''             } 
  ];

function addRequiredFields( ReqF , data)
  {
  data.forEach( row =>
    row.required = ReqF.some( x =>
      x.fieldApiName === row.fieldApiName 
    ) )
  }

addRequiredFields( RequiredFields, Allfields )

console.log ( Allfields )

.as-console-wrapper { max-height: 100% !important; top: 0 }

CodePudding user response：

Some feedback:

The line in your code var hasVal = Object.values(field).includes(true); could cause bugs because it'll return true if any key is assigned value true. We only want to check value assigned to key required.
Instead of mutating the array AllFields, try .map() to return a new array. Immutable programming has simplicity to it that usually makes it easier to follow.

Here's a simpler solution using .map() and .some()

const RequiredFields = [
  { fieldApiName: 'FirstName', value: 'Test'},
  { fieldApiName: 'LastName', value: 'LastNameTest' }
];

const AllFields = [
  { fieldApiName: 'FirstName', value: 'Test'},
  { fieldApiName: 'LastName', value: 'LastNameTest' },
  { fieldApiName: 'Suffix', value: ''}
];

const result = AllFields.map(field => ({
  ...field,
  required: RequiredFields.some(
    ({fieldApiName}) => fieldApiName === field.fieldApiName
  )
}));

console.log('result', result);