Javascript adding an object inside an existing object

Question

I want the user to have the option to add more stepTypes, stepCodes and properties. He can add an stepCode with an existing StepType, or with a different stepType, so, the object would like similar to this:

You see? In the stepType called 'guide', I have 2 stepCodes (G019, G040). In the stepType called 'success', I have just one (S003), and so on. Since I'm newbie with js and even more with objects, I'd like you guys to help me creating a function that checks if the stepType already exists, and then adds another stepCode to it (with its properties). And, if it doesn't exist yet, I want this function to create this new stepType, with the stepCode and its properties.

Currently, my code looks like this:

 const checkStep = () => {
    if (!Object.keys(procedures).length) {
      let proc = 
        {[key]:
          {
            [stepType]: {
              [stepCode]: {
                [language]: stepText,
                timeout,
                nextInstruction,
              }
            }
          }
        }
      setProcedures(proc)
    }
    else{
      Object.entries(procedures).forEach((p, k) =>{
        ...
      })
    }
  }

I call this function everytime the user clicks the "Add another step" button. The first part checks if the object already exists, and, if it doesn't, it creates the object with its key and so on (this part is working). What I don't know how to do is the ELSE part. I think we have to check if the stepType already exists in the object called procedures, but I don't know how to do it. I don't know how to put the stepCode and properties inside the existing object(procedures) either. Maybe I create a variable and do like: setProcedures (...procedures, variable). I don't want to lose the content I have in the procedure, just to add more content to it in the way I explained you.

PS: All the variables (stepType, stepCode, language, stepText, timeout, nextInstruction) are an useState. When the user writes anything in the input text field, I set the specific variable with the e.target.value.

Thank you.

Answer 1

You can do the loop on the each keys and if it matches then add to existing data or create a new stepType and add.

var newStepType = "test", stepCode="test1", language ="en", stepText="hello", timeout=9, nextInstruction="new ins";
    Object.keys(procedure.DOF0014).forEach(key => { 
//if newStepType matches insert stepCode. eg: stepType is "guide"
        if(key === newStepType) { 
            procedure.DOF0014[key] = { ...procedure.DOF0014[key], ...{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}
        }else{
            procedure.DOF0014 = {...procedure.DOF0014, ...{[newStepType]:{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}};
        }
    });

Try this. I didnt tested code. But hope it works. I am sharing the idea how to do.

Object.keys(procedure).forEach(codes => {
  Object.keys(procedure[codes]).forEach(key => { 
            if(key === newStepType) { 
                procedure[codes][key] = { ...procedure[codes][key], ...{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}
            }else{
                procedure[codes] = {...procedure[codes], ...{[newStepType]:{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}};
            }
        });    
  })