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

 更新时间: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 })
        }
      })

总结

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

相关文章

  • 使用canvas实现魔法摄像头的示例代码

    使用canvas实现魔法摄像头的示例代码

    我们用手机的摄像头自拍,很容易实现简单的自拍效果,如复古、黑白等等,其实我们使用web端的JavaScript也是可以实现的,接下来就带领小伙伴实现一个魔法摄像头,并且提供了截图下载功能,需要的朋友可以参考下
    2023-08-08
  • 详解JavaScript的三种this指向方法

    详解JavaScript的三种this指向方法

    这篇文章主要介绍JavaScript的三种this指向的方法:call()、bind()、apply(),文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JavaScript 读URL参数增强改进版版

    JavaScript 读URL参数增强改进版版

    网上有不少JavaScript 读 URL 参数的函数,但没考虑到 URL 中带 # 符的情况,我的可以处理这种情况,并使用了点对象写法,优化了些性能。
    2008-10-10
  • 小程序实现分页效果

    小程序实现分页效果

    这篇文章主要为大家详细介绍了小程序实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 非常不错的三种简洁的Tab导航(网页选项卡)简析

    非常不错的三种简洁的Tab导航(网页选项卡)简析

    非常不错的三种简洁的Tab导航(网页选项卡)简析...
    2007-08-08
  • Vue项目中关于全局css的处理

    Vue项目中关于全局css的处理

    我们在写CSS的时候,会遇到大量相同的属性(比如:margin-top:10px)这种属性几乎每个vue页面都有。这个时候,我们可以把css挂载到全局上,供所有vue页面使用,同时也方便修改。感兴趣的同学可以参考一下
    2023-04-04
  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    这篇文章主要为大家详细介绍了微信小程序实现吸顶特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js window.addEventListener 简介

    js window.addEventListener 简介

    window.addEventListener是JavaScript中用于添加事件监听器的方法,允许在发生特定事件时执行函数,本文给大家介绍js window.addEventListener 是什么,感兴趣的朋友一起看看吧
    2024-09-09
  • 在子窗口中关闭父窗口的一句代码

    在子窗口中关闭父窗口的一句代码

    在子窗口中关闭父窗口在某些特殊的情况下还是有存在的必要的,其实很简单,只需一句代码便可实现,感兴趣的朋友可以了解下
    2013-10-10
  • 微信小程序开发中的疑问解答汇总

    微信小程序开发中的疑问解答汇总

    这篇文章主要给大家总结了关于微信小程序开发中的各种疑问解答,文中将在微信小程序开发中可能遇到的问题都进行了整理和解答,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07

最新评论