Angular2 从 JSON 数组中删除重复项
Posted
技术标签:
【中文标题】Angular2 从 JSON 数组中删除重复项【英文标题】:Angular2 removing duplicates from an JSON array 【发布时间】:2016-11-24 21:08:41 【问题描述】:当我将我的应用程序移动到 Angular2 时,我的 JSON 数组中的过滤器出现问题。在 Angular 1.x 中,这更容易。我在过滤器中使用了'unique'
,这会删除所有重复项。
应用程序:
"app":"database_1",
"host":"my_host1",
"ip":"00.000.00.000"
,
"app":"database_1",
"host":"my_host1",
"ip":"00.000.00.000"
,
"app":"database_2",
"host":"my_host2",
"ip":"00.000.00.000"
,
"app":"database_2",
"host":"my_host2",
"ip":"00.000.00.000"
部分html代码:
<div *ngFor='#appsUnique of apps '>
<div class="row dashboard-row">
<div class="col-md-2">
<h4>appsUnique.app </h4>
</div>
</div>
</div>
结果是:
database_1
database_1
database_2
database_2
我想得到结果:
database_1
database_2
如何从数组中删除重复项?
【问题讨论】:
如 angular2 过滤器被管道替换,一些过滤器在 angular2 中不可用。您可以编写自定义 @Pipe 来过滤数组。对于数组处理,lodash js 也很有帮助。 感谢回复,找到了类似的话题:***.com/questions/34417250/… 【参考方案1】:它可以帮助你
myList = ["One","two","One","tree"];
myNewList = Array.from(new Set(myList ));
【讨论】:
【参考方案2】:我有这个问题的解决方案:)
Array.from(new Set(["app":"database_1",
"host":"my_host1",
"ip":"00.000.00.000"
,
"app":"database_1",
"host":"my_host1",
"ip":"00.000.00.000"
,
"app":"database_2",
"host":"my_host2",
"ip":"00.000.00.000"
,
"app":"database_2",
"host":"my_host2",
"ip":"00.000.00.000"
].map((itemInArray) => itemInArray.app)))
More about Array.from & Set
感谢大家的帮助:)
【讨论】:
【参考方案3】:您可以使用以下方法:
names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
ngOnInit()
let filteredNames=this.remove_duplicates(this.names);
console.log(filteredNames);
console.log(this.names);
remove_duplicates(arr)
let obj = ;
for (let i = 0; i < arr.length; i++)
obj[arr[i]] = true;
arr = [];
for (let key in obj)
arr.push(key);
return arr;
希望这会有所帮助。
【讨论】:
【参考方案4】:你也可以使用 Observable 方法,非常简单。
let filteredData = [];
let arrayData = [
"app": "database_1",
"host": "my_host1",
"ip": "00.000.00.000"
,
"app": "database_1",
"host": "my_host1",
"ip": "00.000.00.000"
,
"app": "database_2",
"host": "my_host2",
"ip": "00.000.00.000"
,
"app": "database_2",
"host": "my_host2",
"ip": "00.000.00.000"
];
Observable.merge(arrayData)
.distinct((x) => x.app)
.subscribe(y =>
filteredData.push(y)
console.log(filteredData)
);
【讨论】:
我也想通过比较特定对象变量从对象数组中获取唯一对象。我尝试了所有可用的解决方案,但只有这个对我有用。谢谢。【参考方案5】:您可以在相应的 typescript 类中创建另一个数组,而不是循环遍历普通的 json 数组,并根据需要进行更改。然后在您的 html 中,您可以拥有以下内容
html
<div *ngFor='let appsUnique of filteredApps'>
<div class="row dashboard-row">
<div class="col-md-2">
<h4>appsUnique.app </h4>
</div>
</div>
</div>
接下来,您需要在相应的 typescript 类中使用这个 filters 数组。
打字稿
let filteredApps = [];
然后您可以在一个函数中创建过滤后的应用程序,例如在onInit
方法中。
onInit()
filteredApps = // filter logic
【讨论】:
【参考方案6】:你需要trackBy。
尝试:
*ngFor="#appsUnique of posts;trackBy:appsUnique?.app"
希望对你有帮助。
【讨论】:
我尝试使用trackBy,但无法实现。你可以在这里做实验吗fiddle.jshell.net/1y0tw6zf/53 trackBy 是在 beta 3 中添加的。也许您使用的是以前的版本。 tweet 我有 angular2-2.0.0-beta.15,当我使用您的代码 (*ngFor="#appsUnique of apps;trackBy:appsUnique?.app
) 时,结果与开始时相同。
可以看到更多详情here以上是关于Angular2 从 JSON 数组中删除重复项的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 *ngFor的数组/ json渲染中的深层嵌套json到数组[重复]