代码之家  ›  专栏  ›  技术社区  ›  Harshal Deshmukh

如何在ionic 2中从数组中过滤json数据

  •  0
  • Harshal Deshmukh  · 技术社区  · 6 年前

    我是爱奥尼亚2的初学者。我已成功地将URL中的数据提取到数组中。在我的json响应中,有多个重复的值。我使用 洛达斯 命令但我没有得到我所要求的正确结果。请给我这个解决方案。

    这是我的json响应:

     {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Dahanu"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Tarapur"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Navapur"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Satpati"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Kelwa mahim"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Arnala"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Uttan"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Versova"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Marve-Manori"
            },
            {
                "port_group": "Bandra Group Of Ports",
                "port_name": "Bandra"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Trombay"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Panvel (Ulva - Belapur)"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Mora"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Karanja (Rewas-Dharamtar)"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Mandawa"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Thane"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Bhiwandi"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Vasai"
            },
            {
                "port_group": "Mora Group Port",
                "port_name": "Kalyan"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Thal"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Alibaug"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Rewdanda"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Borli-Mandla"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Nandgaon "
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Murud"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Dighi"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Mandad"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Kumbharu"
            },
            {
                "port_group": "Rajpuri Group of Ports",
                "port_name": "Shriwardhan"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Bankot"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Borya"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Dabhol"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Harnai"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Jaigad"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Kelashi"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Palshet"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Ratnagiri"
            },
            {
                "port_group": "Ratnagiri Group Of Ports",
                "port_name": "Varwade"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Aachare"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Devgad"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Purngad"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Vijaydurg"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Jaitapur"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Kiranpani"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Redi"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Niwati "
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Vengurla"
            },
            {
                "port_group": "Vengurla Group Of Ports",
                "port_name": "Malvan"
            }
        ];
    

    在这一回应中 port\u组 都是一样的 port\u端口组的名称 是不同的

    这是。ts代码

    var newJsonFile = _.uniqBy(jsonarray, 'port_group'); 
       //var filtered =  _.uniqWith(jsonarray, _.isEqual);
      this.information = newJsonFile;
    

    这是我使用此代码后得到的 enter image description here

    我得到的结果是:

    Bandra端口组

    • 达哈努

    但我需要这个结果:

    Bandra端口组

    • 达哈努
    • 达拉布尔
    • 纳瓦普尔
    • 萨特帕蒂
    • 凯尔瓦·马希姆
    • 阿纳拉
    • 维索瓦

    请帮助解决此问题。

    2 回复  |  直到 6 年前
        1
  •  0
  •   Hassan Imam Ravi kant    6 年前

    您可以使用 array#reduce 将数据分组的依据 port_group .

    var data = [{ "port_group": "Bandra Group Of Ports", "port_name": "Dahanu" }, { "port_group": "Bandra Group Of Ports", "port_name": "Tarapur" }, { "port_group": "Bandra Group Of Ports", "port_name": "Navapur" }, { "port_group": "Bandra Group Of Ports", "port_name":"Satpati" }, { "port_group": "Bandra Group Of Ports", "port_name": "Kelwa mahim" }, { "port_group": "Bandra Group Of Ports", "port_name": "Arnala" }, { "port_group": "Bandra Group Of Ports", "port_name": "Uttan" }, { "port_group": "Bandra Group Of Ports","port_name": "Versova" }, { "port_group": "Bandra Group Of Ports", "port_name": "Marve-Manori" }, { "port_group": "Bandra Group Of Ports", "port_name": "Bandra" }, { "port_group": "Mora Group Port", "port_name": "Trombay" }, { "port_group": "Mora GroupPort", "port_name": "Panvel (Ulva - Belapur)" }, { "port_group": "Mora Group Port", "port_name": "Mora" }, { "port_group": "Mora Group Port", "port_name": "Karanja (Rewas-Dharamtar)" }, { "port_group": "Mora Group Port", "port_name": "Mandawa" }, { "port_group":"Mora Group Port", "port_name": "Thane" }, { "port_group": "Mora Group Port", "port_name": "Bhiwandi" }, { "port_group": "Mora Group Port", "port_name": "Vasai" }, { "port_group": "Mora Group Port", "port_name": "Kalyan" }, { "port_group": "Rajpuri Groupof Ports", "port_name": "Thal" }, { "port_group": "Rajpuri Group of Ports", "port_name": "Alibaug" }, { "port_group": "Rajpuri Group of Ports", "port_name": "Rewdanda" }, { "port_group": "Rajpuri Group of Ports", "port_name": "Borli-Mandla" }, { "port_group":"Rajpuri Group of Ports", "port_name": "Nandgaon " }, { "port_group": "Rajpuri Group of Ports", "port_name": "Murud" }, { "port_group": "Rajpuri Group of Ports", "port_name": "Dighi" }, { "port_group": "Rajpuri Group of Ports", "port_name": "Mandad" },{ "port_group": "Rajpuri Group of Ports", "port_name": "Kumbharu" }, { "port_group": "Rajpuri Group of Ports", "port_name": "Shriwardhan" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Bankot" }, { "port_group": "Ratnagiri Group Of Ports","port_name": "Borya" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Dabhol" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Harnai" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Jaigad" }, { "port_group": "RatnagiriGroup Of Ports", "port_name": "Kelashi" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Palshet" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Ratnagiri" }, { "port_group": "Ratnagiri Group Of Ports", "port_name": "Varwade"}, { "port_group": "Vengurla Group Of Ports", "port_name": "Aachare" }, { "port_group": "Vengurla Group Of Ports", "port_name": "Devgad" }, { "port_group": "Vengurla Group Of Ports", "port_name": "Purngad" }, { "port_group": "Vengurla Group Of Ports","port_name": "Vijaydurg" }, { "port_group": "Vengurla Group Of Ports", "port_name": "Jaitapur" }, { "port_group": "Vengurla Group Of Ports", "port_name": "Kiranpani" }, { "port_group": "Vengurla Group Of Ports", "port_name": "Redi" }, { "port_group":"Vengurla Group Of Ports", "port_name": "Niwati " }, { "port_group": "Vengurla Group Of Ports", "port_name": "Vengurla" }, { "port_group": "Vengurla Group Of Ports", "port_name": "Malvan" }],
        result = Object.values(data.reduce((r,o) => {
          r[o.port_group] = r[o.port_group] || {name: o.port_group, children: []};
          r[o.port_group].children.push({port_name: o.port_name});
          return r;
        },{}));
    console.log(result);
        2
  •  0
  •   Robby Cornelissen    6 年前

    使用Lodash _.groupBy() ,则, _.map() _.mapValues() :

    _(input).groupBy('port_group').mapValues(ps => _(ps).map(p => p.port_name));
    

    完整代码段:

    const input = [{
        "port_group": "Bandra Group Of Ports",
        "port_name": "Dahanu"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Tarapur"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Navapur"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Satpati"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Kelwa mahim"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Arnala"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Uttan"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Versova"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Marve-Manori"
      },
      {
        "port_group": "Bandra Group Of Ports",
        "port_name": "Bandra"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Trombay"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Panvel (Ulva - Belapur)"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Mora"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Karanja (Rewas-Dharamtar)"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Mandawa"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Thane"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Bhiwandi"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Vasai"
      },
      {
        "port_group": "Mora Group Port",
        "port_name": "Kalyan"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Thal"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Alibaug"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Rewdanda"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Borli-Mandla"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Nandgaon "
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Murud"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Dighi"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Mandad"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Kumbharu"
      },
      {
        "port_group": "Rajpuri Group of Ports",
        "port_name": "Shriwardhan"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Bankot"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Borya"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Dabhol"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Harnai"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Jaigad"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Kelashi"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Palshet"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Ratnagiri"
      },
      {
        "port_group": "Ratnagiri Group Of Ports",
        "port_name": "Varwade"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Aachare"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Devgad"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Purngad"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Vijaydurg"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Jaitapur"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Kiranpani"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Redi"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Niwati "
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Vengurla"
      },
      {
        "port_group": "Vengurla Group Of Ports",
        "port_name": "Malvan"
      }
    ];
    const output = _(input).groupBy('port_group').mapValues(ps => _(ps).map(p => p.port_name));
    
    console.log(output);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>