前端，改写数组

本篇博客是2021年的第一篇博客：在使用vant-swiper的时候，需要一页显示三条数据，这时后台返回的数据就不是我所需要的，所以我需要整合数据。

 

 

 

第一：这是后台给我的格式

{
  "food":[
    {"name":"馒头","price":"12"},
    {"name":"煎饼","price":"12"},
    {"name":"花卷","price":"12"},
    {"name":"玉米","price":"12"},
    {"name":"面条","price":"10"}
  ]
}

第二：这是我所需要的数据

{
  "food":[
    [ {"name":"馒头","price":"12"},
      {"name":"煎饼","price":"12"},
      {"name":"玉米","price":"12"}
     ],
     [{"name":"花卷","price":"12"},
      {"name":"面条","price":"10"}
     ]
  ]
}

第三步：整合数据（刚开始使用vue3.0+ts的写法很多地方不会使用）

const itemFuc = (data: any)=>{
      let productItems: any = [] //子数组
      const productDatas: any = []//父数组
      data.map((item: string,index: number)=>{
        window.console.log(item)
        if((index+1)%3 !== 0){ //只有不等于0的时候才向子数组中放对象
          productItems.push(item)
          // 假设数组有7或者八条数据，不是3的倍数则进行以下操作
          if(data.length-productDatas.length*3<3 && data.length-productDatas.length*3!==0){
            if(productDatas[productDatas.length-1].length == 3){
              productDatas.push(productItems)
            }
          }
        }else{
          //当index+1 == 3或者3的倍数需要向子数组中添加数据，这时候子数组有三条数据
          productItems.push(item)
          //当子数组有3条数据的时候将子数组添加到父数组
          productDatas.push(productItems)
          productItems = []
        }
      })
      return productDatas
    }