如何将一维度数组转换成三维数组结构

 更新时间:2024年09月13日 10:00:42   作者:侯六六  
在开发过程中,可能会遇到需要将一维数组转换为多维数组的情况,以满足特定数据结构的需求,文章介绍了如何将后端返回的一维列表数据通过编程方法转换成三维数组结构,以适应特定的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 })
        }
      })

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Javascript实现重力弹跳拖拽运动效果示例

    Javascript实现重力弹跳拖拽运动效果示例

    本文为大家详细介绍下使用Javascript实现重力弹跳拖拽运动的具体调用方法,感兴趣的朋友可以参考下哈
    2013-06-06
  • 更优雅的微信小程序骨架屏实现详解

    更优雅的微信小程序骨架屏实现详解

    这篇文章主要介绍了更优雅的微信小程序骨架屏实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS三级可折叠菜单实现方法

    JS三级可折叠菜单实现方法

    这篇文章主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下
    2016-02-02
  • event.srcElement 用法笔记e.target

    event.srcElement 用法笔记e.target

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
    2009-12-12
  • uniapp表单校验超详细讲解

    uniapp表单校验超详细讲解

    这篇文章主要给大家介绍了关于uniapp表单校验的相关资料,Uni-app内置了一些表单验证方法,可以帮助我们对表单进行有效的验证,需要的朋友可以参考下
    2023-10-10
  • JS实现网页滚动条感应鼠标变色的方法

    JS实现网页滚动条感应鼠标变色的方法

    这篇文章主要介绍了JS实现网页滚动条感应鼠标变色的方法,实例分析了javascript针对鼠标事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript事件冒泡与事件捕获实例分析

    JavaScript事件冒泡与事件捕获实例分析

    这篇文章主要介绍了JavaScript事件冒泡与事件捕获,结合实例形式分析了事件冒泡、阻止冒泡以及事件捕获的相关原理、操作技巧与注意事项,需要的朋友可以参考下
    2018-08-08
  • 前端实现Token无感刷新的思路和具体实现方法

    前端实现Token无感刷新的思路和具体实现方法

    这篇文章主要介绍了前端实现Token无感刷新的思路和具体实现方法,Token无感刷新是前端开发中提高用户体验的一种方法,通过在Token即将过期时自动刷新,避免用户因Token过期而需要重新登录,文中给出了详细的代码示例,需要的朋友可以参考下
    2025-05-05
  • JavaScript对象的浅拷贝与深拷贝实例分析

    JavaScript对象的浅拷贝与深拷贝实例分析

    这篇文章主要介绍了JavaScript对象的浅拷贝与深拷贝,结合实例形式分析了javascript浅拷贝与深拷贝的原理、实现方法与相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 解决Layui中templet中a的onclick参数传递的问题

    解决Layui中templet中a的onclick参数传递的问题

    今天小编就为大家分享一篇解决Layui中templet中a的onclick参数传递的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论