vue接收数组集合后根据条件生成新的数组
以下是获取json的方法
methods: {
getPostion: function () {
axios({
method: 'post',
url: 'http://127.0.0.1:8090/commonInterface/getLastLocationInfo',
headers: {
'accName': 'zhanwu',
'accPassword': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1xxx',
'accImei': '123',
'requestd': '',
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
console.log(res.data.data)
}
下图为console.log(res.data.data)打印出的内容。目的是把locationInfo这个集合中的48条数组中locationName相同的所有数组存成一个新的集合，locationName有24种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = {
"locationInfo":
[
{
"locationAltitude": "23", "locationDevicenum": "00000001",
"locationDevicetype": "0", "locationDirection": "138", "locationId": "1",
"locationLatitude": "134.1213", "locationLongitude": "118.2121", "locationMsgtype": "1",
"locationName": "地点1", "locationSpeed": "3", "locationStarnumber": "1",
"locationTime": 1646133123000
},
{
"locationAltitude": "23", "locationDevicenum": "00000002",
"locationDevicetype": "0", "locationDirection": "138", "locationId": "4",
"locationLatitude": "134.1213", "locationLongitude": "118.2121", "locationMsgtype": "1",
"locationName": "地点2", "locationSpeed": "3", "locationStarnumber": "1",
"locationTime": 1646119203000
},
{
"locationAltitude": "23", "locationDevicenum": "00000002",
"locationDevicetype": "0", "locationDirection": "138", "locationId": "4",
"locationLatitude": "134.1213", "locationLongitude": "118.2121", "locationMsgtype": "1",
"locationName": "地点2", "locationSpeed": "3", "locationStarnumber": "1",
"locationTime": 1646119203000
},
{
"locationAltitude": "23", "locationDevicenum": "00000002",
"locationDevicetype": "0", "locationDirection": "138", "locationId": "4",
"locationLatitude": "134.1213", "locationLongitude": "118.2121", "locationMsgtype": "1",
"locationName": "地点2", "locationSpeed": "3", "locationStarnumber": "1",
"locationTime": 1646119203000
}
]
}
function arr_type(arrList) {
let list = []
arrList.forEach((item) => {
let index = list.findIndex((zitem) => {
return zitem.some((sitem, sindex) => { return sitem.locationName == item.locationName })
});
if (~index) {
list[index].push(item)
} else {
list[list.length] = [item]
}
})
return list
}
console.log(arr_type(arr.locationInfo))
</script>
</body>
</html>
那么问题来了，新集合组合规则是啥？
确定新集合格式,然后复制一个res.data.data.locationInfo数据执行一个while循环,内次弹出一个对象,拿到这个对象locationName,随后遍历省下所有的对象是否有locationName一样的,一样的就拿到按照你的需求组成新的集合,的同时,将这个对象在复制的列表中删除或弹出,将新的集合存入新列表即可
思路大概就这样,也许有更好的,但是这个是有手就能做的
有帮助请点击右上角采纳,有疑问可以继续讨论哦
你把数据发出来 直接给你写好
data() {
return {
arr1: [
{
id: 1,
name: "bbb",
value: 45,
},
{
id: 2,
name: "aaa",
value: 46,
},
{
id: 3,
name: "aaa",
value: 35,
},
{
id: 4,
name: "ccc",
value: 16,
},
{
id: 5,
name: "bbb",
value: 35,
},
{
id: 6,
name: "ccc",
value: 34,
},
{
id: 7,
name: "aaa",
value: 67,
},
{
id: 8,
name: "aaa",
value: 23,
},
{
id: 9,
name: "aaa",
value: 46,
},
{
id: 10,
name: "ddd",
value: 39,
},
],
arr2: [],
};
},
mounted() {
this.newArray();
},
methods: {
newArray() {
let tempArr = [];
for (let i in this.arr1) {
if (tempArr.indexOf(this.arr1[i].name) === -1) {
this.arr2.push({
name: this.arr1[i].name,
origin: [this.arr1[i]],
});
tempArr.push(this.arr1[i].name);
} else {
for (let j = 0; j < this.arr2.length; j++) {
if (this.arr2[j].name == this.arr1[i].name) {
this.arr2[j].origin.push(this.arr1[i]);
break;
}
}
}
}
console.log(this.arr2, 888); //最后得到的数组
},
},
// 将locationInfo 的值替换为接口返回的数据
let locationInfo = []
let locationMap = new Map()
locationInfo.forEach(item => {
if (!locationMap.has(item.locationName)){
locationMap.set(item.locationName, [])
}
locationMap.get(item.locationName).push(item)
})
console.log(locationMap.values())
可以使用reduce，
let obj={}
locationInfo = Array.from(new Set(locationInfo)).reduce((preArr,cur)=>{
if(!obj[cur.locationName]){
obj[cur.locationName] ={
locationName:cur.locationName
}
preArr.push(cur)
}else{
if (cur.status>obj[cur.locationName].locationName) {
for(let i=0;i<preArr.length;i++){
if (preArr[i].locationName== cur.locationName) {
preArr[i]=[...preArr[i],...cur]
}
}
}
}
return preArr
},[])
```javascript