如何将一维度数组转换成三维数组结构
作者：侯六六
在开发过程中,可能会遇到需要将一维数组转换为多维数组的情况,以满足特定数据结构的需求,文章介绍了如何将后端返回的一维列表数据通过编程方法转换成三维数组结构,以适应特定的UI展示需求,通过循环遍历和数据重组的方式,可以有效地实现数组结构的转换
一维度数组转换成三维数组结构
目标UI图
实现想法
希望如下结构直接循环
<div v-for="items in dataList" class="data-info">
<g-card-title :data="{title:items.bigTitle}"></g-card-title>
//循环小标题list列表
<g-card v-for="item in items.list" :data="item">
/**组件内容示例**/
<div class="title" v-if="item .title">{{item .title}}</div>
<div class="content">
// 循环小标题内容itemList列表
<div v-for="(it, key) in item .itemList" :key="key">
{{it.name}}
</div>
</div>
/**组件内容示例**/
</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' }]
}]
}]
然后后端返回的数据为一维列表， 如下图
大概数据如下
const data=[
{value: "360", name: "前屈（活动度）",bigTitle: "一、测试结果及结论", title: "1、颈椎活动度测试结果"},
{value: "365",name: "前屈（与正常值相比）",bigTitle: "",title: ""},
{value: "365",name: "后伸（活动度）",bigTitle: "",title: ""},
{value: "360", name: "",bigTitle: "二、目标", title: ""},
]需要将此数据结构 转换成 我们所需要的结构
const dataList = [] // 目标数据列表
let bigTitleNum = 0 // 大标题的数目
let titleNum = 0 // 小标题的数目
// 循环数据
data.forEach(item => {
// 当大标题存在时
if (item.bigTitle) {
// 添加一个对象
dataList.push({ bigTitle: item.bigTitle, list: [] })
if (bigTitleNum !== 0) { titleNum = 0 }
bigTitleNum++
}
// 当小标题存在的时候 或者 只有大标题没有小标题的时候
if (item.title || (item.bigTitle && !item.title)) {
// 往该大标题的对象中添加小标题的对象
dataList[bigTitleNum - 1].list.push({ title: item.title, itemList: [], requiredFlag: item.requiredFlag })
titleNum++
}
if (titleNum > 0) {
// 添加该小标题下的数据列表内容
dataList[bigTitleNum - 1].list[titleNum - 1].itemList.push({ name: item.name, value: item.value, tagCode: item.tagCode })
}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。