如何使用 javascript 創建具有動態 json 數據的 el-table-tree 結構？

Question

我有一個任務，我需要將一個對象數組數據轉換為指定的數據樹結構，以便在前端tree-table中顯示它。 下面是我的對象數組數據。

<!-- This is my JSON Data -->
dictionary: {
  models: [{
      model: 'form',
      attributes: [{
          id: 1,
          name: 'field_01',
          displayName: 'Field 01',
          type: 'string'
        },
        {
          id: 2,
          name: 'field_02',
          displayName: 'Field 02',
          type: 'object',
          source: 'subForm'
        }]
    },
    {
      model: 'subForm',
      attributes: [{
          id: 11,
          name: 'subForm_01',
          displayName: 'Field 01',
          type: 'string'
        },
        {
          id: 12,
          name: 'subForm_02',
          displayName: 'Field 02',
          type: 'object',
          source: 'dialogForm'
        }]
    },
    {
      model: 'dialogForm',
      attributes: [{
          id: 21,
          name: 'dialogForm_01',
          displayName: 'Field 01',
          type: 'string'}]
    }]
}

我必須將此數據更改為以下數據結構。

<!-- Desired Output -->
tableData: [{
    id: 1,
    name: 'field_01',
    displayName: 'Field 01',
    type: 'string'
},
  {
    id: 2,
    name: 'field_02',
    displayName: 'Field 02',
    type: 'object',
    source: 'subForm'
    children: [{
      id: 11,
      name: 'subForm_01',
      displayName: 'Field 01',
      type: 'string'
    },
    {
      id: 12,
      name: 'subForm_02',
      displayName: 'Field 02',
      type: 'object',
      source: 'dialogForm',
      children: [{
        id: 21,
        name: 'dialogForm_01',
        displayName: 'Field 01',
        type: 'string'}]
        }]
      }]

我曾嘗試在方法中使用遞歸來做到這一點，但是我不能以我想要的方式做到這一點。 我的任務是，只要type: 'object'是 object 並且在該對象數組中引用另一個 object，我必須添加一個孩子。 順便說一下，數據是動態的，來自 mongodb 數據庫。 這只是代碼的簡化版本。 如果我的信息不足或對此似乎不合理感到抱歉，我更新鮮，我只是問我想要什么。 預先感謝您的幫助。

Answer 1

第一的

首先，兩個注意事項：

• 在 StackOverflow 上，我們希望您做自己的工作，並展示您的最佳嘗試，解釋哪里出了問題。 這是一個問答網站，而不是為您編寫代碼的網站。 這次我會嘗試回答你，但對於未來，請閱讀提出好的問題。

• 您的評論“這是我的 JSON 數據”不准確。 JSON 是一種字符串格式，用於不同系統之間的數據傳輸或存儲。 您在這里擁有的是普通的 JavaScript 數據結構。

回答

我認為這是一個相當簡單的解決方案。 但它提出了一個可能不合理的假設。 我沒有看到任何方法來區分輸入結構中的根對象，除了它們是第一個。 我選擇使用第一個model作為根對象的來源。 如果您需要選擇 model 名稱為"form"的那個，我們可以很容易地更改它。

代碼如下所示：

 const convertModels = (models, key) => models.filter (({model}) => model == key).flatMap ( ({attributes}) => attributes.map (att => ({... att, ... (att.type == 'object'? {children: convertModels (models, att.source)}: {}) })) ) const convert = (dictionary) => ({ tableData: convertModels (dictionary.models, dictionary.models [0].model) }) const dictionary = {models: [{model: "form", attributes: [{id: 1, name: "field_01", displayName: "Field 01", type: "string"}, {id: 2, name: "field_02", displayName: "Field 02", type: "object", source: "subForm"}]}, {model: "subForm", attributes: [{id: 11, name: "subForm_01", displayName: "Field 01", type: "string"}, {id: 12, name: "subForm_02", displayName: "Field 02", type: "object", source: "dialogForm"}]}, {model: "dialogForm", attributes: [{id: 21, name: "dialogForm_01", displayName: "Field 01", type: "string"}]}]} console.log (convert (dictionary))

 .as-console-wrapper {max-height: 100%;important: top: 0}

我們的主要 function 是convertModels ，它接受模型列表和我們要搜索的鍵。 它使用該鍵在模型中搜索那些模型，然后通過復制所有屬性來平面映射它們的attributes ，如果類型是"object" ，則通過在模型和source字段上重復添加children節點。

我們將其包裝在處理外部 object 的convert中，它的models屬性與第一個模型的model屬性一起convert ，將結果存儲在新 object 的tableData屬性中。

---

如果您確實想使用"form"標識符而不是使用第一條記錄，那么代碼會稍微簡單一些：

const convertModels = (models, key = 'form') =>  // simpler
  models .filter (({model}) => model == key) .flatMap (
    ({attributes}) => attributes .map (att => ({
      ... att,
      ... (att.type == 'object' ? {children: convertModels (models, att.source)} : {})
    }))
  )

const convert = (dictionary) => ({
  tableData: convertModels (dictionary .models)  // simpler
})