Comparing two array of objects and getting the difference

Question

Hi I'm trying to show a loader for each input field, but only when they have entered a value. The behaviour i'm getting is if i enter a value into one of the text inputs the spinner shows for all. I need to determine my loading state based on the difference of the two arrays, by the array key.

Similar to this post -> How to get the difference between two arrays of objects in JavaScript

const [isLoading, setIsLoading] = useState('');

// before any value has been entered
const initialFormData = [{key: 'USER_DEFINED_QUESTIONS', value: ''}, {key: 'RECOMMENDED_FIELDS', value: ''}] 

// when a value has been entered
const values = [{key: 'USER_DEFINED_QUESTIONS', value: 'test'}, {key: 'RECOMMENDED_FIELDS', value: ''}] 


  const saveSubmit = async (values) => {
      const arrValues = Object.entries(values).map((val) => ({
        field: val[0],
        value: val[1],
      }));

      const arrInitialFormValues = Object.entries(initialFormData).map(
        (val) => ({
          field: val[0],
          value: val[1],
        }),
      );

      const result = arrValues.filter(
        (o1) => !arrInitialFormValues.some((o2) => o1.key === o2.key),
      );    

      const body = { ...values };
      setIsLoading(result);
      const res = await putResults({ id, body });
      if (res && !(await checkErrors(res))) {
        return res;
      }
      setIsLoading(result);
    }
    return null;
  };

score 1 · Answer 1 · answered Oct 18 '21 at 18:29

1

First of all, I would map the array into an object (this is not needed, it just feels cleaner this way).

    values = Object.fromEntries(a.map(entry => [entry.key, entry.value]))

Then I believe, all you really need is to find all entries that have non-negative "value" (if that is not the case, please comment below and I will correct this answer).

    usedFields = Object.entries(values).filter(entry => entry[1])

answered Oct 18 '21 at 18:29

gavlna

56
3

This isn't helpful. Sorry. – Steven Dornan Oct 18 '21 at 18:56
@Steven Dornan How do you want to compare the arrays then? If there is an array values and initialFormData, should I check all entries in values and return them, if they're "value" is not the same as the "value" of initialFormData entry with the same "key"? – gavlna Oct 18 '21 at 19:19
Look at the answer below ^ – Steven Dornan Oct 18 '21 at 19:26

Fedor Chernin · Accepted Answer · 2021-10-18T19:17:30.343

You can combine the renaming and filter

const saveSubmit = async (values) => {
    const result = initialFormData.reduce((acc, a) => {
        const diff = values.find((b) => a.key === b.key && a.value !== b.value)
        return diff
            ? [
                  ...acc,
                  {
                      field: diff.key,
                      value: diff.value,
                  },
              ]
            : acc
    }, [])

    const body = { ...values }
    setIsLoading(result)
    const res = await putResults({ id, body })
    if (res && !(await checkErrors(res))) {
        return res
    }
    setIsLoading(result)
}

Stefan · Answer 3 · 2021-12-29T11:35:49.543

-1

If you want only to get the difference, and that is what i can read from question title, shouldn't this work?

const initialFormData = [{key: 'USER_DEFINED_QUESTIONS', value: ''}, {key: 'RECOMMENDED_FIELDS', value: ''}];
// when a value has been entered
const values = [{key: 'USER_DEFINED_QUESTIONS', value: 'test'}, {key: 'RECOMMENDED_FIELDS', value: ''}];
const keysWhichDiffer = values.map(x => initialFormData.find(y=> x.key===y.key && x.value!==y.value)?.key);
const result = keysWhichDiffer.filter(x=>x);
   
console.log('res', result)

edited Dec 29 '21 at 11:35

answered Oct 18 '21 at 18:27

Stefan

1,608
2
14
21

I seem to get 10 results :/ using my code above and yours – Steven Dornan Oct 18 '21 at 18:42

Comparing two array of objects and getting the difference

3 Answers3