用多个文件将数组格式化为新数组

Question

为了选择来自日本的地址，当我检查以上级别时，下一级开放的是什么(例如:开放的城市，如果我检查县，开放的区域，如果我检查城市)。我找到了v-treeview组件，它可以显示我想要的数据。但我不知道如何将数据传递给v-treeview项格式。在DB中，我有这样一个区域数组：

const areas = [
  {
    "id": 1,
    "name": "的場一丁目",
    "city": "川越市",
    "prefecture": "埼玉県"
  },
  {
    "id": 2,
    "name": "大字中野林",
    "city": "さいたま市西区",
    "prefecture": "埼玉県"
  },
  {
    "id": 3,
    "name": "大字中釘",
    "city": "さいたま市西区",
    "prefecture": "埼玉県"
  },
  {
    "id": 4,
    "name": "平和台1丁目",
    "city": "練馬区",
    "prefecture": "東京都"
  },
  {
    "id": 5,
    "name": "平和台2丁目",
    "city": "練馬区",
    "prefecture": "東京都"
  },
  {
    "id": 6,
    "name": "平和台3丁目",
    "city": "練馬区",
    "prefecture": "東京都"
  }
]

我想要基于专区和城市字段将这个数组解析为下面的格式，以便将其传递给v-treeview组件，我如何才能做到这一点？谢谢你的支持！

items = [
  {
    name: '埼玉県',
    id: '埼玉県',
    children: [
       {
         name: '川越市',
         id: '川越市',
         children: [
           { id: 1, name: '大字三条町' }
         ]
       },
       { 
         name: 'さいたま市西区',
         id: 'さいたま市西区',
         children: [
           { id: 2, name: '大字中野林' },
           { id: 3, name: '大字中釘' }
         ]
       }
    ]
  },
  {
    name: '東京都',
    id: '東京都',
    children: [
       { 
         name: '練馬区',
         id: '練馬区',
         children: [
           { id: 4, name: '平和台1丁目' },
           { id: 5, name: '平和台2丁目' },
           { id: 6, name: '平和台3丁目' }
         ]
       }
    ]
  }
]

Answer 1

使用forEach和find

​

const areas = [
    {
        "id": 1,
        "name": "的場一丁目",
        "city": "川越市",
        "prefecture": "埼玉県"
    },
    {
        "id": 2,
        "name": "大字中野林",
        "city": "さいたま市西区",
        "prefecture": "埼玉県"
    },
    {
        "id": 3,
        "name": "大字中釘",
        "city": "さいたま市西区",
        "prefecture": "埼玉県"
    },
    {
        "id": 4,
        "name": "平和台1丁目",
        "city": "練馬区",
        "prefecture": "東京都"
    },
    {
        "id": 5,
        "name": "平和台2丁目",
        "city": "練馬区",
        "prefecture": "東京都"
    },
    {
        "id": 6,
        "name": "平和台3丁目",
        "city": "練馬区",
        "prefecture": "東京都"
    }
]

let treeArray = [];
areas.forEach(area => {
    const match = treeArray.find(t => t.id === area.prefecture);
    if (match) {
        const firstDepth = match.children;
        const firstDepthMatch = firstDepth.find(f => f.name === area.city);
        if (firstDepthMatch) {
            const secondDepth = firstDepthMatch.children;
            secondDepth.push({id: area.id, name: area.name});
        } else {
            firstDepth.push({
                name: area.city,
                id: area.city,
                children: [{
                    id: area.id,
                    name: area.name
                }]
            })
        }
    } else {
        treeArray.push({
            name: area.prefecture,
            id: area.prefecture,
            children: [{
                name: area.city,
                id: area.city,
                children: [{
                    id: area.id,
                    name: area.name
                }]
            }]
        })
    }
})
console.log(treeArray)

​

Answer 2

​

const areas = [
    {
        "id": 1,
        "name": "的場一丁目",
        "city": "川越市",
        "prefecture": "埼玉県"
    },
    {
        "id": 2,
        "name": "大字中野林",
        "city": "さいたま市西区",
        "prefecture": "埼玉県"
    },
    {
        "id": 3,
        "name": "大字中釘",
        "city": "さいたま市西区",
        "prefecture": "埼玉県"
    },
    {
        "id": 4,
        "name": "平和台1丁目",
        "city": "練馬区",
        "prefecture": "東京都"
    },
    {
        "id": 5,
        "name": "平和台2丁目",
        "city": "練馬区",
        "prefecture": "東京都"
    },
    {
        "id": 6,
        "name": "平和台3丁目",
        "city": "練馬区",
        "prefecture": "東京都"
    }
]

const result = areas.reduce((p, c) => {
    const foundPre = p.findIndex(p => p.name === c.prefecture);
    if (foundPre !== -1) {
        const foundCity = p[foundPre].children.findIndex(pc => pc.name === c.city);
        if (foundCity !== -1) {
            p[foundPre].children[foundCity].children.push({ id: c.id, name: c.name });
        } else {
            p[foundPre].children.push({
                name: c.city,
                id: c.city,
                children: [{
                    id: c.id,
                    name: c.name
                }]
            })
        }
    } else {
        p.push({
            name: c.prefecture,
            id: c.prefecture,
            children: [{
                name: c.city,
                id: c.city,
                children: [{
                    id: c.id,
                    name: c.name
                }]
            }]
        })
    }
    return p;
}, []);

console.log(result);

​