在 Javascript 中從嵌套的對象/數組中提取鍵和值

Question

我正在研究動態表單構建器，其中我在行/列網格結構中創建了表單元素，我的每個表單元素（對象）都有一個名為 model 的特殊鍵，它定義了字段名稱和值鍵，它定義了它的值。 我有同樣的嵌套表單，我需要提取這些模型和值並使它們成為對象，以防表單轉發器它將是一個數組。 這是我的表單數據的示例格式：

[
   {
      "component":"row",
      "attrs":{
         "child_components":[
            {
               "component":"column",
               "attrs":{
                  "child_components":[
                     {
                        "component":"input-text",
                        "attrs":{
                           "child_components":[

                           ],
                           "model":"first_name",
                           "value":"",
                        }
                     },
                     {
                        "component":"input-text",
                        "attrs":{
                           "child_components":[

                           ],
                           "model":"last_name",
                           "value":"",
                        }
                     }
                  ]
               }
            },
            {
               "component":"column",
               "attrs":{
                  "child_components":[
                     {
                        "component":"form-repeater",
                        "attrs":{
                           "child_components":[
                              {
                                 "component":"column",
                                 "attrs":{
                                    "child_components":[
                                       {
                                          "component":"input-text",
                                          "attrs":{
                                             "child_components":[

                                             ],
                                             "model":"name",
                                             "value": ""
                                          }
                                       },
                                       {
                                          "component":"input-text",
                                          "attrs":{
                                             "child_components":[

                                             ],
                                             "model":"url",
                                             "value":""
                                          }
                                       }
                                    ]
                                 }
                              },
                              {
                                 "component":"column",
                                 "attrs":{
                                    "child_components":[
                                       {
                                          "component":"input-text",
                                          "attrs":{
                                             "child_components":[

                                             ],
                                             "model":"name",
                                             "value":""
                                          }
                                       },
                                       {
                                          "component":"input-text",
                                          "attrs":{
                                             "child_components":[

                                             ],
                                             "model":"url",
                                             "value":""
                                          }
                                       }
                                    ]
                                 }
                              }
                           ],
                           "model":"links",
                           "value":""
                        }
                     }
                  ]
               }
            }
         ]
      }
   }
]

為了執行這個，我試圖做一個遞歸函數：

findModel(ele) {
  ele.forEach((element) => {
    if(typeof element.attrs.model !== 'undefined') {
      if(element.component === 'form-repeater') {
        let repeater = [];
        element.attrs.child_components.forEach((rep) => {
          let data = this.findModel(rep.attrs.child_components);
          repeater.push(data);
        })
        const repeaterData = {}
        repeaterData[element.attrs.model] = repeater;
        return repeaterData;
      }
      else {
        const data = {}
        data[element.attrs.model] = element.attrs.value;
        return data;
      }
    }
    else {
      if(typeof element.attrs.child_components !== 'undefined' && element.attrs.child_components.length) {
        return this.findModel(element.attrs.child_components);
      }
    }
  })
},

我正在調用這個函數：

let data = findModel(form_data)
console.log(data)
//Always comes undefined.

我的最終數據格式看起來像這樣，我無法實現：

{
    first_name: '',
    last_name: '',
    links: [
        {name: '', url: ''},
        {name: '', url: ''}
    ]
}

幫我實現上面的格式。 任何更好的方法都是最受歡迎的。 謝謝。

Answer 1

您的函數返回undefined因為它沒有return語句。 您擁有的return語句是從forEach回調返回的，這（顯然）不是同一個函數。

在forEach回調中返回一個值是沒有用的，因為該值會被遺忘。 forEach不是為此而設計的。

你需要：

1. 使用.map而不是.forEach
2. 返回.map的結果

所以：

return ele.map((element) => {

最后，在您的回調邏輯中有一種情況，您不返回值：外部else塊在if塊內有一個return ，但是當內部if條件不為真時沒有return語句。 因此，在某些情況下，回調在理論上有可能返回 undefined，這意味着.map將返回一個包含潛在未定義元素的數組。

您應該確保回調代碼中的所有情況都會導致受控return 。