快捷導(dǎo)航

如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)

更新時(shí)間：2024年09月13日 10:00:42 作者：侯六六

在開(kāi)發(fā)過(guò)程中,可能會(huì)遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過(guò)編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過(guò)循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實(shí)現(xiàn)數(shù)組結(jié)構(gòu)的轉(zhuǎn)換

一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)

目標(biāo)UI圖

實(shí)現(xiàn)想法

希望如下結(jié)構(gòu)直接循環(huán)

    <div v-for="items in dataList" class="data-info">
      <g-card-title :data="{title:items.bigTitle}"></g-card-title>
     //循環(huán)小標(biāo)題list列表
      <g-card v-for="item in items.list" :data="item">
        /**組件內(nèi)容示例**/
     	 <div class="title" v-if="item .title">{{item .title}}</div>
     	 <div class="content">
     	 // 循環(huán)小標(biāo)題內(nèi)容itemList列表
     	  <div  v-for="(it, key) in item .itemList" :key="key">
     	  	{{it.name}}
     	  </div>
     	 </div>
     	/**組件內(nèi)容示例**/
      </g-card>
    </div>

   const dataList = [{
        bigTitle: 'bigTitle',
        list: [{
          title: 'title',
          itemList: [{ name: 'name', value: 'value' },
            { name: 'name', value: 'value' }]
        },
        {
          title: 'title',
          itemList: [{ name: 'name', value: 'value' },
            { name: 'name', value: 'value' }]
        }]
      }]

然后后端返回的數(shù)據(jù)為一維列表，如下圖

大概數(shù)據(jù)如下

const data=[
{value: "360", name: "前屈（活動(dòng)度）",bigTitle: "一、測(cè)試結(jié)果及結(jié)論", title: "1、頸椎活動(dòng)度測(cè)試結(jié)果"},
{value: "365",name: "前屈（與正常值相比）",bigTitle: "",title: ""},
{value: "365",name: "后伸（活動(dòng)度）",bigTitle: "",title: ""},
{value: "360", name: "",bigTitle: "二、目標(biāo)", title: ""},
]

需要將此數(shù)據(jù)結(jié)構(gòu) 轉(zhuǎn)換成我們所需要的結(jié)構(gòu)

      const dataList = [] //  目標(biāo)數(shù)據(jù)列表
      let bigTitleNum = 0 // 大標(biāo)題的數(shù)目
      let titleNum = 0 // 小標(biāo)題的數(shù)目
      // 循環(huán)數(shù)據(jù)
      data.forEach(item => {
        // 當(dāng)大標(biāo)題存在時(shí)
        if (item.bigTitle) {
          // 添加一個(gè)對(duì)象
          dataList.push({ bigTitle: item.bigTitle, list: [] })
          if (bigTitleNum !== 0) { titleNum = 0 }
          bigTitleNum++
        }
        // 當(dāng)小標(biāo)題存在的時(shí)候 或者 只有大標(biāo)題沒(méi)有小標(biāo)題的時(shí)候
        if (item.title || (item.bigTitle && !item.title)) {
          // 往該大標(biāo)題的對(duì)象中添加小標(biāo)題的對(duì)象
          dataList[bigTitleNum - 1].list.push({ title: item.title, itemList: [], requiredFlag: item.requiredFlag })
          titleNum++
        }
        if (titleNum > 0) {
          // 添加該小標(biāo)題下的數(shù)據(jù)列表內(nèi)容
          dataList[bigTitleNum - 1].list[titleNum - 1].itemList.push({ name: item.name, value: item.value, tagCode: item.tagCode })
        }
      })