我有一個任務，我需要將一個物件陣列資料轉換為指定的資料樹結構，以便在前端顯示它tree-table。下面是我的物件陣列資料。
<!-- This is my JSON Data -->
Collection: {
Fields: [{
fieldName: 'mainField',
properties: [{
id: 1,
carName: 'carName_01',
type:string'
},
{
id: 2,
carName: 'carName_02',
type: 'object',
ref: 'subField'
}]
},
{
fieldName: 'subField',
properties: [{
id: 1,
carName: 'carName_11',
type: 'string'
},
{
id: 1,
carName: 'carName_12',
type: 'object',
ref: 'subField1'
}]
},
{
fieldName: 'subField1',
properties: [{
id: 1,
carName: 'carName_21',
type: 'string'
}]
}]
}
我必須將此資料更改為以下資料結構。
<!-- Desired Output -->
tableData: [{
id: 1,
carName: 'carName_01',
type: 'string'
},
{
id: 2,
carName: 'carName_02',
type: 'object'
source: 'subField'
children: [{
id: 11,
carName: 'carName_11',
type: 'object',
ref: 'subField1',
children: [{
id: 12,
carName: 'carName_12',
type: 'string'
}]
}
我曾嘗試在方法中使用遞回來做到這一點，但是我不能以我想要的方式做到這一點。我的任務是，每當type: 'object'is 物件與該物件陣列中的另一個參考物件時，我都必須添加一個子物件。順便說一下，資料是來自 mongodb 資料庫的動態資料。這只是代碼的簡化版本。如果我的資訊不足或對此似乎不合理感到抱歉，我更新鮮，我只是問我想要什么。預先感謝您的幫助。
uj5u.com熱心網友回復：
第一的
首先，兩個注意事項：
在 StackOverflow 上，我們希望您做自己的作業，并展示您的最佳嘗試，解釋哪里出了問題。這是一個問答網站，而不是為您撰寫代碼的網站。這次我會嘗試回答你，但對于未來，請閱讀提出好的問題。
您的評論“這是我的 JSON 資料”不準確。JSON 是一種字串格式，用于在不同系統之間傳輸資料或存盤資料。您在這里擁有的是純 JavaScript 資料結構。
回答
我認為這是一個相當簡單的解決方案。但它提出了一個可能不合理的假設。我沒有看到任何方法來區分輸入結構中的根物件，除了它們是第一個。我選擇使用第一個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}我們的主要功能是convertModels，它接受模型串列和我們要搜索的鍵。它使用該鍵在模型中搜索那些模型，然后attributes通過復制所有屬性來平面映射它們，如果型別是，則通過在模型和欄位上重復來"object"添加節點。childrensource
我們將它包裝在convert其中處理您的外部物件，它的models屬性convert以及第一個模型的model屬性，將結果存盤在tableData新物件的屬性中。
如果您確實想使用"form"識別符號而不是使用第一條記錄，則代碼會稍微簡單一些：
const convertModels = (models, key = 'form') => // only slightly more complex
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
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/507853.html
標籤：javascript 数组 递归 Vuejs2 树表
上一篇：如何迭代序言中的空輸入？