JS一维数组转化为三维数组方法

有人提问想要将一维数组转化为三位数组的需求,下面就给提问的的小伙伴安排上

下面是后端同学返给我们的一维数组数据格式:

    [{
      '品牌': 'xiaomi', '机型': '10', '配置': '512'
    },
    {
      '品牌': 'xiaomi', '机型': '10', '配置': '128'
    },
    {
      '品牌': 'xiaomi', '机型': '11', '配置': '128'
    },
    {
      '品牌': 'xiaomi', '机型': '11', '配置': '64'
    },
    {
      '品牌': 'iPhone', '机型': '10', '配置': '128'
    },
    {
      '品牌': 'iPhone', '机型': '11', '配置': '64'
    },
    {
      '品牌': 'iPhone', '机型': '12', '配置': '64'
    },
    {
      '品牌': 'honor', '机型': '4', '配置': '256'
    },
    {
      '品牌': 'honor', '机型': '5', '配置': '128'
    },
    {
      '品牌': 'honor', '机型': '6', '配置': '128'
    }];

下面是我们想要转化的数据格式(转化成三维数组 第一层级为品牌、第二层级为型号、第三层级为配置)

   [
      {
        "value": "xiaomi",
        "label": "xiaomi",
        "children": [
          {
            "value": "10",
            "label": "10",
            "children": [
              {
                "value": "512",
                "label": "512"
              },
              {
                "value": "128",
                "label": "128"
              }
            ]
          },
          {
            "value": "11",
            "label": "11",
            "children": [
              {
                "value": "128",
                "label": "128"
              },
              {
                "value": "64",
                "label": "64"
              }
            ]
          }
        ]
      },
      {
        "value": "iPhone",
        "label": "iPhone",
        "children": [
          {
            "value": "10",
            "label": "10",
            "children": [
              {
                "value": "128",
                "label": "128"
              }
            ]
          },
          {
            "value": "11",
            "label": "11",
            "children": [
              {
                "value": "64",
                "label": "64"
              }
            ]
          },
          {
            "value": "12",
            "label": "12",
            "children": [
              {
                "value": "64",
                "label": "64"
              }
            ]
          }
        ]
      },
      {
        "value": "honor",
        "label": "honor",
        "children": [
          {
            "value": "4",
            "label": "4",
            "children": [
              {
                "value": "256",
                "label": "256"
              }
            ]
          },
          {
            "value": "5",
            "label": "5",
            "children": [
              {
                "value": "128",
                "label": "128"
              }
            ]
          },
          {
            "value": "6",
            "label": "6",
            "children": [
              {
                "value": "128",
                "label": "128"
              }
            ]
          }
        ]
      }
    ]

首先我们定义一个arr变量接收我们的一维数组,然后将arr作为参数传递给我们转化数组的函数,函数返回的就是我们最终的三维数组了

下面就是我们的arrConversion源码:

    arrConversion (arr) {
      let keys = Object.keys(arr[0])
      let level1 = keys[0]//获取一级属性名称
      let level2 = keys[1]//获取二级属性名称
      let level3 = keys[2]//获取三级属性名称
      let list = Array.from(new Set(
        arr.map(item => {
          return item[level1]
        })))
      let subList = []
      list.forEach(res => {
        arr.forEach(ele => {
          if (ele[level1] === res) {
            let nameArr = subList.map(item => item.value)
            if (nameArr.indexOf(res) !== -1) {
              let nameArr2 = subList[nameArr.indexOf(res)].children.map(item => item.value)
              if (nameArr2.indexOf(ele[level2]) !== -1) {
                subList[nameArr.indexOf(res)].children[nameArr2.indexOf(ele[level2])].children.push({
                  value: ele[level3],
                  label: ele[level3],
                })
              } else {
                subList[nameArr.indexOf(res)].children.push({
                  value: ele[level2],
                  label: ele[level2],
                  children: [{
                    value: ele[level3],
                    label: ele[level3],
                  }]
                })
              }
            } else {
              subList.push({
                value: res,
                label: res,
                children: [{
                  value: ele[level2],
                  label: ele[level2],
                  children: [{
                    value: ele[level3],
                    label: ele[level3],
                  }]
                }]
              })
            }
          }
        })

      })
      return subList

    }

输出结果正确:

到此这篇关于JS一维数组转化为三维数组方法的文章就介绍到这了,更多相关JS一维数组转化为三维数组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS一维数组转化为三维数组的实现示例

    今天在CSDN上问答区看到一个提问的小伙伴,是想要将一维数组转化为三位数组的需求,正好不是很忙,乐于助人的我立马给这位同学安排上,当然也没有顾及那么多去看资料什么的,就直接按照自己的思路走了!下方有源码 上面是他的数据格式,下面呢是要转化的数据格式 话不多说直接上代码 let arr = [{ 'peovince': 'a', 'city': 'b', 'area': 'c' }, { 'peovince': 'a', 'city': 'b', 'area': 'd' }, { 'peovinc

  • JS一维数组转化为三维数组方法

    有人提问想要将一维数组转化为三位数组的需求,下面就给提问的的小伙伴安排上 下面是后端同学返给我们的一维数组数据格式:     [{       '品牌': 'xiaomi', '机型': '10', '配置': '512'     },     {       '品牌': 'xiaomi', '机型': '10', '配置': '128'     },     {       '品牌': 'xiaomi', '机型': '11', '配置': '128'     },     {       '

  • PHP实现将MySQL重复ID二维数组重组为三维数组的方法

    本文实例讲述了PHP实现将MySQL重复ID二维数组重组为三维数组的方法.分享给大家供大家参考,具体如下: 应用场景 MYSQL在使用关联查询时,比如 产品表 与 产品图片表关联,一个产品多张产品图片,关联查询结果如下: $arr=[ ['id'=>1,'img'=>'img1'], ['id'=>1,'img'=>'img2'], ['id'=>1,'img'=>'img3'], ['id'=>2,'img'=>'img1'], ['id'=>2,'

  • Python reshape的用法及多个二维数组合并为三维数组的实例

    reshape(shape) : 不改变数组元素,返回一个shape形状的数组,原数组不变.是对每行元素进行处理 resize(shape) : 与.reshape()功能一致,但修改原数组 In [1]: a = np.arange(20) #原数组不变 In [2]: a.reshape([4,5]) Out[2]: array([[ 0, 1, 2, 3, 4], [ 5, 6, 7, 8, 9], [10, 11, 12, 13, 14], [15, 16, 17, 18, 19]])

  • js接收并转化Java中的数组对象的方法

    在做项目时,要向ocx控件下发命令,就要在js中得到java中的对象,然后拼成一种格式,下发下去...当对象是一个时比较简单,但如果对象是一个数组时,就略显麻烦了. 开始我以为有简单的方式,可以直接进行内容的转化,后来发现不可以,网上说js与java没有桥接的东西,所以呢: 我的解决方案是:在action层,将java的对象数组转化为Json串,而在js中,再把json转化为数组对象. 1.将java的对象数组转化为Json串: 要用到两个类: net.sf.json.JSONObject ne

  • python将三维数组展开成二维数组的实现

    以前写过一篇:python实现把两个二维array叠加成三维array示例 这篇文章尝试用"曲线救国"的方法来解决二维数组叠加成三维数组的问题. 但天道有轮回,苍天绕过谁.好不容易把数组叠加在一块儿了,新的需求又出现了:将三维数组展开成二维数组.有借有还,再借不难.今天就来解决把三维数组展开成二维数组的问题. 相对于叠加三维数组,numpy对展开数组支持得很好,只需要用好np.reshape(A,(a,b)) 函数即可. 用到的参数: A:需要被重新组合的数组 (a,b): 各个维度的

  • js一维数组、多维数组和对象的混合使用方法

    这篇文章的主要目的是讲解JavaScript数组和对象的混合使用,由于JS的弱检查特性,因此在JS数组中可以同时存储不同类型的变量,比如你可以把数字.字符串.字符.对象等内容放在同一个数组中.对象也可以做同样的事情,区别是对象可以指定对象里每一个成员的别名,这样在编程的时候数据更易读,比如: var arr1 = ["飞鱼", 25, 172, "江苏"]; var person = {name:"飞鱼",age: 25, height:172,

  • JS实现二维数组横纵列转置的方法

    我想将一个二维数组横纵列转过来,我就不信只有我有这个需求,可是百度了好久,四海八荒都找遍了-- 后来证明还是大神说的google好用 ~ 第一条就是,鄙视臭百度 此番记录下来,也方便各位道友查阅(好想说"仙友",最近被一部剧毒害的后遗症 ~~~) var newArray = arr[0].map(function(col, i) { return arr.map(function(row) { return row[i]; }) }); 以上这篇JS实现二维数组横纵列转置的方法就是小

  • js多维数组降维的5种方法

    目录 一,递归 二,将多维数组转为字符串,再转化为一维数组 三,利用数组的方法 四.利用contact 五.利用扩展运算符 多维数组降维也就是数组扁平化 数组扁平化的方法有很多种,但是我主要用五种,如下: 一,递归 // 一,递归 let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]] let newArr = [] const getArr=(array)=>{ array.forEach((item)=>{

  • JS实现遍历不规则多维数组的方法

    本文实例讲述了JS实现遍历不规则多维数组的方法.分享给大家供大家参考,具体如下: 直接进入正文: 我们有时候处理数据,可能会遇到一些不规则(无法预料的数据结构),那么拿到这种数据我们如何进行遍历操作呢?举个例子: var data= { a: { one: 1, two: 2, three: {four:'2',five:'4'} }, b: { six: 4, seven: 5, eight: 6 }, c: { nine: 7, ten: 8} } 比如上边的数据(实际情况是这个数据会有各种

随机推荐