如何在Ionic 2中过滤数组中的JSON数据？新手求助

嘿，作为Ionic 2新手碰到这种重复数据过滤的问题很正常，我来给你几个实用的解决方案！

先确认Lodash的安装与导入 #

• 首先确保你已经安装了Lodash：npm install lodash --save
• 在你的组件文件里导入Lodash：import * as _ from 'lodash';

场景1：提取唯一的Port Group列表 #

如果你只想得到不重复的port_group（不管对应的port_name），可以用这两种方法：

方法1：保留完整对象的唯一组 #

// 假设你的原始数据数组是portsData
const uniquePortGroups = _.uniqBy(portsData, 'port_group');

这个方法会返回每个port_group对应的第一个完整对象，自动过滤掉后续重复组的对象。

方法2：只提取Port Group名称的数组 #

如果你只需要port_group的字符串列表，用这个更直接：

const uniquePortGroupNames = _.uniq(_.map(portsData, 'port_group'));

场景2：按Port Group分组整理Port Name #

如果你的需求是把同一组下的所有port_name归类到一起，用_.groupBy就很合适：

// 先按port_group分组
const groupedPorts = _.groupBy(portsData, 'port_group');

// 如果你想把每个组里的port_name单独提取成数组，可以再加工一步
const groupedPortNames = _.mapValues(groupedPorts, group => _.map(group, 'port_name'));

加工后的结果会是一个结构化的对象，键是port_group名称，值是该组下所有port_name的数组，示例如下：

{
"Bandra Group Of Ports": ["Dahanu", "Tarapur", "Navap..."]
}

为啥你之前的Lodash命令没生效？ #

大概率是用错了方法！比如直接用_.uniq(portsData)的话，因为每个对象都是独立的引用，Lodash会默认认为它们都是不同的，所以不会过滤重复。这时候必须用_.uniqBy指定按port_group属性去重才行。

内容的提问来源于stack exchange，提问作者Harshal Deshmukh