Format an array to new array by multiple filelds

December 1, 2022

In order to select address from Japan, what open next level when i checked on above level (eg: open cities if I check on prefecture, open area if I check on city). I found the v-treeview component, which can display data as I wanted. But i don’t know how to pass my data to v-treeview item format. From DB, I have an areas array like this:

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": "東京都"
  }
]

I want to parse this array to below format base on prefecture and city field to pass it to v-treeview component, how can i do this? Thank for your support!

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丁目' }
         ]
       }
    ]
  }
]

>Solution :

using forEach and 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)