如何从 ionic 2 中的 JSON 数组中对唯一的 JSON 对象进行排序答案

【问题标题】：How to sort Unique JSON Object form JSON array in ionic 2如何从 ionic 2 中的 JSON 数组中对唯一的 JSON 对象进行排序
【发布时间】：2018-04-03 04:58:32
【问题描述】：

我是 Ionic 2 的初学者。我已成功将数据从 URL 提取到数组中。在我的 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 区在我的列表中只出现一次。这是因为我的结果 JSON 数组

中有多个重复的 json 对象

要求的结果：

- 快艇

雷加德
拉特纳吉里
辛杜杜尔格
领主

谢谢。请帮忙解决这个问题。

【问题讨论】：

标签： ionic-framework ionic2 ionic3 ionic-native

【解决方案1】：

使用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

【讨论】：

如何将此响应存储到数组中？前任。变成父子
你参考堆栈闪电战链接。你能详细说明你在问什么
我的机器无法访问此链接
我以前使用过这段代码，但在这段代码中，孩子没有过滤 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}); 返回 r; },{})));
让我们continue this discussion in chat。

【解决方案2】：

使用过滤器方法，我更新了我的答案参考链接：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);

【讨论】：

你能用这段代码告诉你吗 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，儿童：[]}; r[o.ws_type].children.push(r[o.ws_district] || r[o.ws_district] ||{ws_district: o.ws_district}); return r; } ,{})));我在哪里做错了？
先生，我需要这样的输出所需结果：**- 快艇 ** Raigad Ratnagiri Sindhudurg Thane
让我们continue this discussion in chat。