Javascript 在現有 object 中添加 object

Question

我希望用戶可以選擇添加更多 stepTypes、stepCodes 和屬性。 他可以使用現有的 StepType 或不同的 stepType 添加 stepCode，因此，object 會與此類似：

你看？ 在名為“guide”的 stepType 中，我有 2 個 stepCode（G019、G040）。 在名為“成功”的 stepType 中，我只有一個 (S003)，依此類推。 由於我是 js 的新手，甚至是對象的新手，我希望你們幫助我創建一個 function 來檢查 stepType 是否已經存在，然后向它添加另一個 stepCode（及其屬性）。 而且，如果它還不存在，我希望這個 function 使用 stepCode 及其屬性創建這個新的 stepType。

目前，我的代碼如下所示：

 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) =>{
        ...
      })
    }
  }

每次用戶單擊“添加另一個步驟”按鈕時，我都會將此稱為 function。 第一部分檢查 object 是否已經存在，如果不存在，則使用其密鑰創建 object 等等（這部分正在工作）。 我不知道該怎么做的是 ELSE 部分。 我想我們必須檢查在object調用程序中是否已經存在stepType，但我不知道該怎么做。 我也不知道如何將 stepCode 和屬性放在現有對象（過程）中。 也許我創建了一個變量並喜歡：setProcedures (...procedures, variable)。 我不想丟失程序中的內容，只是按照我向您解釋的方式添加更多內容。

PS：所有的變量（stepType、stepCode、language、stepText、timeout、nextInstruction）都是一個useState。 當用戶在輸入文本字段中寫入任何內容時，我使用 e.target.value 設置特定變量。

謝謝你。

Answer 1

您可以對每個鍵執行循環，如果匹配，則添加到現有數據或創建新的 stepType 並添加。

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}}}};
        }
    });

嘗試這個。 我沒有測試代碼。 但希望它有效。 我正在分享如何做的想法。

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}}}};
            }
        });    
  })