извлекать данные без дублирования - ионный

Question

Я пытаюсь получить свои данные, но без дублирования значения.

data:

addNewClothes: 
0:
addLaundryServices: "4 - Wash"
add_Main_Categories: "169 - Quilt & Blanket"
add_Sections: "275 - Quilt types"
clothesID: 911
newClothes: "Medium quilt"
price: "14"

1:
addLaundryServices: "4 - Wash"
add_Main_Categories: "169 - Quilt & Blanket"
add_Sections: "275 - Quilt types"
clothesID: 910
newClothes: "Small quilt"
price: "10"

HTML:

<ion-content padding>
  <div id="sections" *ngFor="let mainCategory of clothesListArr?.addNewClothes">
    <h4>{{mainCategory.add_Main_Categories}}</h4>
  </div>
  <div id="sections" *ngFor="let section of clothesListArr?.addNewClothes">
    <h5>{{section.add_Sections}}</h5>
  </div>
  <div id="clothes" *ngFor="let clothe of clothesListArr?.addNewClothes">
    <h6>{{clothe.newClothes}}</h6>
  </div>

  <div id=servicePrice></div>
</ion-content>

Это возвращает "add_Main_Categories""," add_Sections "и" newClothes "дважды, и я хочу иметь" add_Main_Categories "и" add_Sections "один раз, а затем перечислить" newClothes "

Answer 1

Передайте ваш объект ответа в метод ниже, он должен работать

removeDuplicates(recordsArray: Array<any>) {
    var uniqueNames = [];
    recordsArray.forEach(item => {
      let recordItem = uniqueNames.find(x => {
        console.log(x.addLaundryServices);
        console.log(item.addLaundryServices);
        return (x.addLaundryServices.indexOf(item.addLaundryServices) == -1);
      });
      if (recordItem)
        uniqueNames.push(item);
      else if (uniqueNames.length == 0) {
        uniqueNames.push(item);
      }
    });

    console.log(uniqueNames);
    return uniqueNames;
  }

Ваш объект ответа должен быть массивом в качестве входных данных.пример - https://next.plnkr.co/edit/E2pzQuuTsgEoc09

Answer 2

Возможно, вы захотите преобразовать ответ примерно так:

response: any;

let addNewClothes = [{
  "addLaundryServices": "4 - Wash",
  "add_Main_Categories": "169 - Quilt & Blanket",
  "add_Sections": "275 - Quilt types",
  "clothesID": 911,
  "newClothes": "Medium quilt",
  "price": "14"
}, {
  "addLaundryServices": "4 - Wash",
  "add_Main_Categories": "169 - Quilt & Blanket",
  "add_Sections": "275 - Quilt types",
  "clothesID": 910,
  "newClothes": "Small quilt",
  "price": "10"
}];

let {
  addLaundryServices,
  add_Main_Categories,
  add_Sections
} = addNewClothes[0];

this.response = {
  addLaundryServices,
  add_Main_Categories,
  add_Sections,
  clothes: addNewClothes.map(cloth => ({
    clothesID: cloth.clothesID,
    newClothes: cloth.newClothes,
    price: cloth.price
  }))
}

console.log(response);

Теперь в вашем шаблоне:

<ion-content padding>
  <div id="sections">
    <h4>{{response.add_Main_Categories}}</h4>
  </div>
  <div id="sections">
    <h5>{{response.add_Sections}}</h5>
  </div>
  <div id="clothes" *ngFor="let cloth of response.clothes">
    <h6>{{clothe.newClothes}}</h6>
  </div>

  <div id=servicePrice></div>
</ion-content>