JS check if object exists in object and add the value to the formatted object

Question

I am filling in fields for a form and I have a formattedData object which keeps a deep copy of the original data object. In the form if a field changes, I need to change the formatted data object with properties in the values object.

I have made a mock data object of the fields:

const formattedData = {
            model_type: 'Config',
            accessModel: '5732132',
            // Random fields
            advancedData: {
              isLion: {
                enabled: true,
                animalType: 'Cat',
                move: {
                  model_type: '',
                  source: '',
                  value: 'auto'
                }
              },
              isTiger: {
                enabled: true,
                animalType: 'Cat',
                move: {
                  model_type: '',
                  source: '',
                  value: 'auto'
                }
              }
            },
            data: {
              isLion: {
                enabled: true,
                animalType: 'Cat',
                id: 8,
                power: 6
              },
              isTiger: {
                enabled: true,
                animalType: 'Cat',
                id: 8,
                power: 6
              }
            }
          }

This is the object from my form:

const values = {
            advancedData: {
              isLion: {
                move: {
                  value: '89'
                }
              },
              isTiger: {
                move: {
                  value: '89'
                }
              }
            }
          }

I need to check if values.advancedData : isLion or isTiger has changed then, put that changed value into the formattedData object. In my example I gave, the user changed values.advancedData.isLion and values.advancedData.isTiger and I need to put those values into formattedData without changing anything other than the value property.

Also, if the value has changed, I need to change the source to 'manual'

Answer 1

You can grab the new value from values and then assign it to formattedData :

// choose your favorite animal
const isAnimal = 'isLion'

// Grab the value from `values`
const new_value = values.advancedData[isAnimal].move.value

// Put the new value info `formattedData`
formattedData.advancedData[isAnimal].move.value = new_value

Answer 2

A simple way to achieve this is as shown below, assuming the data structure will always be the same.

// DATA
// For brevity I omitted the data body, but same as yours

const formattedData = {
    // ... rest of data body
};

const values = {
   // ... rest of data body
};


// SOLUTION - Using object spread

formattedData.advancedData.isLion = { ...formattedData.advancedData.isLion, ...values.advancedData.isLion };
formattedData.advancedData.isLion.move.model_type = 'manual';

formattedData.advancedData.isTiger = { ...formattedData.advancedData.isTiger, ...values.advancedData.isTiger };
formattedData.advancedData.isTiger.move.model_type = 'manual';