[英]How to filter json data from array in ionic 2
I am a beginner in Ionic 2. I have successfully fetch data from URL into an array.In my json response, there are multiple duplicate values. 我是Ionic 2的初学者。我已成功将URL中的数据提取到数组中。在json响应中,存在多个重复值。 I have filter json response by using lodash command.
我通过使用lodash命令过滤了json响应。 But I am not getting a proper result which I required.Please give me solution for this.
但是我没有得到所需的正确结果。请为此提供解决方案。
This is my json response: 这是我的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"
}
];
In this response most of port_group are same and every port_name of port_group is different 在此响应中,大多数port_group相同,而每个port_group的port_name不同
This is .ts code 这是.ts代码
var newJsonFile = _.uniqBy(jsonarray, 'port_group');
//var filtered = _.uniqWith(jsonarray, _.isEqual);
this.information = newJsonFile;
This is i am getting after using this code 这是我在使用此代码后得到的
I am getting the result: 我得到结果:
Bandra Group Of Ports 班德拉港集团
But I need this result: 但是我需要这个结果:
Bandra Group Of Ports 班德拉港集团
Please help to solve this issue. 请帮助解决此问题。
You can use array#reduce
to group your data based on port_group
. 您可以使用
array#reduce
基于port_group
对数据进行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);
Using Lodash's _.groupBy()
, _.map()
and _.mapValues()
: 使用Lodash的
_.groupBy()
, _.map()
和_.mapValues()
:
_(input).groupBy('port_group').mapValues(ps => _(ps).map(p => p.port_name));
Complete snippet: 完整代码段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.