如何在 ionic 2 中对 Unique JSON 对象形式 JSON 数组进行排序

Question

我是 Ionic 2 的初学者。我已经成功地从 URL 中获取数据到 array.In 我的 json 响应中，有多个重复的 JSON对象。我需要对这个 json 对象进行排序，并且需要在 accordion-list

中显示

这是我的json回复：

{
    "result": [
        {
            "ws_type": "Speed Boat",
            "ws_district": "Thane"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Thane"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Thane"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Thane"
        },
        {
            "ws_type": "Parasailing",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Kayaking",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Rubber Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride ",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Kayaking",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride ",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Motar Lounch",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Yacht",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Rubber Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Rubber Boat",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Raigad"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Banana ride",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Speed Boat ",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "ATV Ride",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Ratnagiri"
        },
        {
            "ws_type": "WaterScooter",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Jet ski",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "WaterScooter",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Speed Boat",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Parasailing",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "WaterScooter",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Kayaking",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Banana ride ",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Bumper ride",
            "ws_district": "Sindhudurg"
        },
        {
            "ws_type": "Parasailing",
            "ws_district": "Sindhudurg"
        }
    ]
}

这是我的代码

我正在使用以下代码对 json 对象进行排序，但我没有得到所需的结果：

var  result = _.values((this.information.reduce((r,o) => {
            r[o.ws_type] = r[o.ws_type] ||  r[o.ws_district] ||{ws_type: o.ws_type, children: []};
            //r[o.ws_district] = r[o.ws_district] ||  r[o.ws_district] ||{ws_district: o.ws_district, children: []};
            r[o.ws_type].children.push( r[o.ws_district] ||  r[o.ws_district] ||{ws_district: o.ws_district});
            return r;
          },{})));

这是我得到的输出

需要输出

我希望 Raigad 区在我的 list.This 中只有一次出现，因为我的 结果 JSON 数组[=49= 中有多个重复的 json 对象]

所需结果：

-快艇

雷加德

拉特纳吉里

辛德杜尔格

塔那

Thanks.Please 帮忙解决这个问题。

Answer 1

使用过滤方法，我更新了我的答案引用 link : https://jsfiddle.net/rv6d1byr/

let uniquedata = {}
let fruits = [
    {
        "ws_type": "Speed Boat",
        "ws_district": "Thane"
    },
    {
      "ws_type": "Bumper ride",
       "ws_district": "Thane"
    },
    {
        "ws_type": "Bumper ride",
      "ws_district": "Thane"
    }

]
let filtered = fruits.filter(obj => !uniquedata[obj.ws_type] && (uniquedata[obj.ws_type] = true));

 console.log(filtered);

Answer 2

使用reduce方法过滤掉

 let result = results.reduce((cur,prev)=>{
      const type = prev['ws_type'].replace(/(^\s+|\s+$)/g, '')
      if(cur.hasOwnProperty(type)){
        if(cur[type].indexOf(prev['ws_district']) == -1){
          cur[type].push(prev['ws_district'])
        }
      }else{
        cur[type] = [prev['ws_district']]
      }
      return cur
    },{})
console.log(result)
console.log(result['Speed Boat'])

参考这个https://stackblitz.com/edit/ionic-fu91dt?file=pages%2Fhome%2Fhome.ts

如何在 ionic 2 中对 Unique JSON 对象形式 JSON 数组进行排序

How to sort Unique JSON Object form JSON array in ionic 2

ionic-framework

ionic2

ionic-native

ionic3