js 数组按照某种顺序去重排数组

最新推荐文章于 2024-04-30 16:17:31 发布

半个开心果

最新推荐文章于 2024-04-30 16:17:31 发布

阅读量121

点赞数

文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_37299479/article/details/129534826

版权

需求：

右边地市返回的接口参考链接：

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=32.06075976453839&lng=117.26625750000005&zoom=6.5

原始表格数据：

  tableData: [{
    date: '2016-05-02',
    name: '太原',
    address: '上海市普陀区金沙江路 1518 弄'
    }, {
    date: '2016-05-04',
    name: '大同',
    address: '上海市普陀区金沙江路 1517 弄'
    }, {
    date: '2016-05-01',
    name: '晋中',
    address: '上海市普陀区金沙江路 1519 弄'
    }, {
    date: '2016-05-03',
    name: '朔州',
    address: '上海市普陀区金沙江路 1516 弄'
    }, {
    date: '2016-05-04',
    name: '忻州',
    address: '上海市普陀区金沙江路 1517 弄'
    }, {
    date: '2016-05-01',
    name: '吕梁',
    address: '上海市普陀区金沙江路 1519 弄'
    }, {
    date: '2016-05-03',
    name: '运城',
    address: '上海市普陀区金沙江路 1516 弄'
    }, {
    date: '2016-05-04',
    name: '晋城',
    address: '上海市普陀区金沙江路 1517 弄'
    }, {
    date: '2016-05-01',
    name: '长治',
    address: '上海市普陀区金沙江路 1519 弄'
    }, {
    date: '2016-05-03',
    name: '阳泉',
    address: '上海市普陀区金沙江路 1516 弄'
    }, {
    date: '2016-05-03',
    name: '临汾',
    address: '上海市普陀区金沙江路 1516 弄'
    }]

渲染效果：

修改过程：有顺序的弄个数组的，然后用find函数去匹配你table数据，生成一个新的数组放到表格数据里

mounted() {
    let that = this;
    //通过给定的ID来发送请求
    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/140000_full.json')
      .then(function (response) {
        console.log(response.data.features);
        let cityArr = []
        response.data.features.map(item=>{
          cityArr.push(item.properties.name) ;
        });
        let newTableArr = []
        console.log(cityArr,"--")
        // for(let i = 0;i<cityArr.length;i++){
        //   for(let j = 0;j<that.tableData.length;j++){
        //     // console.log(cityArr[i],that.tableData[j].name)
        //     if(cityArr[i].includes(that.tableData[j].name)){
        //       newTableArr.push(that.tableData[j])
        //     }
        //   }
        // }
        cityArr.find((item,index)=>{
          that.tableData.find((inner,indexinner)=>{
            if(item.includes(inner.name)){
              newTableArr.push(inner)
            }
          })
        })
        console.log(newTableArr,"--newTableArr")
        newTableArr.map(item=>{
          console.log(item.name)
        })
        setTimeout(() => {
           that.tableData = JSON.parse(JSON.stringify(newTableArr))
        }, 1000);
        
      }).catch(function (err) { 
        console.log(err); 
      });
  },

修改后的表格渲染：这样，左边表格的地市顺序就按照右边的地市顺序渲染了