微信小程序VantWeapp索引栏，数据根据属性归类

拿到的数据格式

思路：以字母分类，再去重拿到每个字母 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    index:[],
    branditems: [],
    indexList:[],
  },
  getCar() {
    var that=this
    wx.request({
      url: '',
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        console.log(res.data.result.branditems)
        that.setData({
          branditems: res.data.result.branditems
        })
         //分类
        const car=that.data.branditems.reduce((car,person)=>{
          const key =person.bfirstletter;
          if(!car[key]){
            car[key] = [];
          }
          car[key].push(person);
          return car;
        },{});
        console.log(car)
        that.setData({
          indexList:car
        })

        // 右边索引栏
        let arr1=[];
        for(let i in that.data.branditems){
          if(arr1.indexOf(that.data.branditems[i].bfirstletter) == -1){
            arr1.push(that.data.branditems[i].bfirstletter)
          }
        }
        console.log(arr1)
        that.setData({
          index:arr1
        })
        
      }
    })
  },
  onLoad(options) {
    this.getCar()
  },


})

 

<van-index-bar index-list="{{ index }}">
  <view wx:if="{{indexList.A}}">
    <van-index-anchor index="A"   />
    <van-cell  wx:key="i" wx:for="{{indexList.A}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.B}}">
  <van-index-anchor index="B"  />
    <van-cell  wx:key="i" wx:for="{{indexList.B}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.C}}">
  <van-index-anchor index="C"  />
    <van-cell  wx:key="i" wx:for="{{indexList.C}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.D}}">
  <van-index-anchor index="D"  />
    <van-cell  wx:key="i" wx:for="{{indexList.D}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.E}}">
  <van-index-anchor index="E"  />
    <van-cell  wx:key="i" wx:for="{{indexList.E}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.F}}">
  <van-index-anchor index="F"  />
    <van-cell  wx:key="i" wx:for="{{indexList.F}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.G}}">
  <van-index-anchor index="G"  />
    <van-cell  wx:key="i" wx:for="{{indexList.G}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.H}}">
  <van-index-anchor index="H"  />
    <van-cell  wx:key="i" wx:for="{{indexList.H}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.I}}">
  <van-index-anchor index="I"  />
    <van-cell  wx:key="i" wx:for="{{indexList.I}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.J}}">
  <van-index-anchor index="J"  />
    <van-cell  wx:key="i" wx:for="{{indexList.J}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.K}}">
  <van-index-anchor index="K"  />
    <van-cell  wx:key="i" wx:for="{{indexList.K}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.L}}">
  <van-index-anchor index="L"  />
    <van-cell  wx:key="i" wx:for="{{indexList.L}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.M}}">
  <van-index-anchor index="M"  />
    <van-cell  wx:key="i" wx:for="{{indexList.M}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.N}}">
  <van-index-anchor index="N"  />
    <van-cell  wx:key="i" wx:for="{{indexList.N}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.O}}">
  <van-index-anchor index="O"  />
    <van-cell  wx:key="i" wx:for="{{indexList.O}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.P}}">
  <van-index-anchor index="P"  />
    <van-cell  wx:key="i" wx:for="{{indexList.P}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.Q}}">
  <van-index-anchor index="Q"  />
    <van-cell  wx:key="i" wx:for="{{indexList.Q}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.R}}">
  <van-index-anchor index="R"  />
    <van-cell  wx:key="i" wx:for="{{indexList.R}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.S}}">
  <van-index-anchor index="S"  />
    <van-cell  wx:key="i" wx:for="{{indexList.S}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.T}}">
  <van-index-anchor index="T"  />
    <van-cell  wx:key="i" wx:for="{{indexList.T}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.U}}">
  <van-index-anchor index="U"  />
    <van-cell  wx:key="i" wx:for="{{indexList.U}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.V}}">
  <van-index-anchor index="V"  />
    <van-cell  wx:key="i" wx:for="{{indexList.V}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.W}}">
  <van-index-anchor index="W"  />
    <van-cell  wx:key="i" wx:for="{{indexList.W}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.X}}">
  <van-index-anchor index="X"  />
    <van-cell  wx:key="i" wx:for="{{indexList.X}}" title="{{item.name}}" />
  </view>
  <view  wx:if="{{indexList.Y}}">
  <van-index-anchor index="Y"  />
    <van-cell  wx:key="i" wx:for="{{indexList.Y}}" title="{{item.name}}" />
  </view>

  <view  wx:if="{{indexList.Z}}">
  <van-index-anchor index="Z"  />
    <van-cell  wx:key="i" wx:for="{{indexList.Z}}" title="{{item.name}}" />
  </view>
</van-index-bar>