retrieve data without duplication - ionic

Question

I'm trying to retrieve my data but without duplicating the value.

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>

It's retrieving the "add_Main_Categories", "add_Sections" and "newClothes" twice, and what I want is to have "add_Main_Categories" and "add_Sections" once and then listing "newClothes"

Answer 1

You might want to transform the response somewhat like this:

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

Now in your template:

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

Answer 2

Pass your response object to the below method, it should work

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

Your response object should be an array as an input. example - https://next.plnkr.co/edit/E2pzQuuTsgEoc09