如何从离子2中的数组中过滤json数据

时间：2018-03-27 06:06:32

标签： javascript ionic2 ionic3 lodash

我是Ionic 2的初学者。我已成功将URL中的数据提取到数组中。在我的json响应中，有多个重复值。我使用 lodash 命令过滤了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_group 都相同，并且port_group 的每个 port_name都不同

这是.ts代码 

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

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

我收到了结果：

Bandra集团港口

  • 达哈努

但我需要这个结果：

Bandra集团港口

  • 达哈努
  • 塔拉普尔
  • 纳瓦普尔
  • Satpati
  • Kelwa mahim
  • Arnala
  • Versova

请帮助解决此问题。

2 个答案:

答案 0 :(得分：0)

您可以使用array#reduce根据port_group对数据进行分组。

＆＃13;
＆＃13; 
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);
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

相关问题
最新问题