本文详细介绍如何将后端返回的一维扁平数组转换为前端UI所需的三维嵌套结构。通过遍历一维数据，依据大标题和小标题字段进行分组，构建包含bigTitle、list及itemList的嵌套对象。文中提供了完整的JavaScript转换逻辑代码，适用于Vue等框架的数据预处理场景，帮助开发者高效处理层级数据展示。
一维度数组转换成三维数组结构
目标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' }]
}]
}]
后端接口返回的数据通常为一维列表形式，具体结构参考下图。
示例数据大致如下所示，包含value、name、bigTitle和title等字段。
const data=[
{value: "360", name: "前屈（活动度）",bigTitle: "一、测试结果及结论", title: "1、颈椎活动度测试结果"},
{value: "365",name: "前屈（与正常值相比）",bigTitle: "",title: ""},
{value: "365",name: "后伸（活动度）",bigTitle: "",title: ""},
{value: "360", name: "",bigTitle: "二、目标", title: ""},
]核心任务是将上述扁平数据转换为符合UI渲染要求的嵌套结构。
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 })
}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。