如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)
更新時(shí)間：2024年09月13日 10:00:42 作者：侯六六
在開發(fā)過程中,可能會(huì)遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過循環(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)題沒有小標(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 })
}
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript高級(jí)學(xué)習(xí)筆記整理
打算做一個(gè)js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08
javascript模擬滾動(dòng)條實(shí)現(xiàn)代碼
從csdn的blog上轉(zhuǎn)過來的 做了些修改，其實(shí)寫的比較糟糕(我指的是構(gòu)造) 我用的是以前的一個(gè)drag類 在這個(gè)基礎(chǔ)上在的來完成的Slider2010-03-03
JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位
這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位,本文給大家提到j(luò)s如何限制input輸入框只能輸入數(shù)字問題，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了淺談Javascript線程及定時(shí)機(jī)制的相關(guān)資料,需要的朋友可以參考下2015-07-07
如何解決前端筆記本屏幕顯示縮放比例125%,150%對(duì)頁面布局的影響
如果要完整解決該縮放和布局問題,仍需適配,下面這篇文章主要給大家介紹了關(guān)于如何解決前端筆記本屏幕顯示縮放比例125%,150%對(duì)頁面布局的影響,需要的朋友可以參考下2022-11-11
分享JS代碼實(shí)現(xiàn)鼠標(biāo)放在輸入框上輸入框和圖片同時(shí)更換樣式
在一些網(wǎng)站我們會(huì)見到，當(dāng)鼠標(biāo)放在輸入框上輸入框和圖片同時(shí)更換樣式，那么基于js代碼是如何實(shí)現(xiàn)的呢？下面小編給大家解答下2016-09-09
本文通過簡(jiǎn)單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式 ，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08
javascript橋接橋接設(shè)計(jì)模式（Bridge Pattern）是一種結(jié)構(gòu)型設(shè)計(jì)模式,它用于將抽象部分與其具體實(shí)現(xiàn)部分分離,使它們可以獨(dú)立地變化,本文將通過代碼示例詳解的給大家介紹一下JS橋接模式,需要的朋友可以參考下2023-08-08
js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件
本節(jié)主要介紹了js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件的方法2014-07-07