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到数组[重复]

如何从 Angular2(Typescript)中的 Json 数组中获取值的总和

从Angular2中的JSON数组打印属性值

Angular 2将JSON对象解析为角度类[重复]

从数组打字稿中删除对象(Angular 2)

从 JSON-Array 中完全删除 JSON-Object [重复]