web-dev-qa-db-ja.com

JSON配列から重複を削除するAngular2

アプリをAngular2に移動すると、JSON配列のフィルターに問題があります。 In 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

配列から重複を削除するにはどうすればよいですか？

arraysangularjsfilterangularngfor
8
notsaltydev

私はこの問題の解決策を持っています:)

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)))

Array.from＆Setの詳細

助けてくれてありがとう:)

6
notsaltydev

たぶんそれはあなたを助けることができる

myList = ["One","two","One","tree"];

myNewList =  Array.from(new Set(myList ));
11
ABDERRAHIME FARHANE

次の方法を使用できます。

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;
}

お役に立てれば。

3
Bhushan Gadekar

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)
  });
2
Dimuthu

通常のjson配列をループする代わりに、対応するTypeScriptクラスに別の配列を作成し、必要に応じてこれを変更できます。あなたの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クラスにこのfilteredApps配列が必要です。

TypeScript

 let filteredApps = [];

そして、関数で、たとえばonInitメソッドで、そのfilteredAppsを作成できます。

onInit()
{
    filteredApps = // filter logic
}
1
Dylan Meeus

trackBy が必要です。

で試してください：

*ngFor="#appsUnique of posts;trackBy:appsUnique?.app"

それが役に立てば幸い。

1
alejandromav