new Set实现数组去重(根据名称重分数组)

红太狼 2021-09-07 12:38 419阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]

使用的数据

"typeDevice" : [ {
    	  "value_info" : 2,
          "info_name" : "123",
        }, {
          "value_info" : 2,
          "info_name" : "123",
        }, {
          "value_info" : 3,
          "info_name" : "33131",
        }, {
          "value_info" : 5,
          "info_name" : "123",
        } ]

<template>
    				<view class="content">
    					<view v-for="(item,index) in typeList">
    						<view class="sub_nav">
    							<view>
    								<text>{
       {item.key}}</text>
    							</view>
    						</view>
    						<view class="line" v-for="(items,indexs) in item.vals">
    							<view class="li-name">{
       {items.column_name}}</view>
    						</view>
    					</view>
    				</view>
    			</template>

byqinfo() { 
    				//获取全部数据
    				this.$http.get('/typeDevice/info', { 
    				}).then(res => { 
    					if (res.data.result === 1) { 
    						let server = res.data.data;
    						server.map(item => { 
    							this.typeDevice = item.typeDevice
    						})
    
    						this.typeDevice.map(item => { 
    							return item.info_name
    						})
    						//根据名称分类
    						if (this.typeDevice) { 
    							let keys = this.typeDevice.map(item => { 
    								return item.info_name
    							})
    							//new Set实现数组去重
    							keys = [...new Set(keys)]
    							let newArr = []
    							
    							//循环去重后的数组
    							keys.forEach(item => { 
    								let obj = []
    								//使用filter函数筛选
    								obj = this.typeDevice.filter(val => { 
    									return item == val.info_name
    								})
    								//赋值数组
    								obj = { 
    									...{ 
    										key: item
    									},
    									...{ 
    										vals: obj
    									}
    								}
    								//添加数据到newArr里
    								newArr.push(obj)
    							})
    						}
    				})
    			},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/5e67ca65535e45be8cef6c60e7ccf2f3.png