Delete the duplicates in API Angular-CodePudding

I am trying to print the userId once no duplicates like 1,2 no need 1,1,2. I tried this in code but it doesn't work - any help?

I am just beginner

Here is a screenshot of the printout:

duplicates

[
  {
    userId: 1,
    id: 1,
    title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    userId: 1,
    id: 2,
    title: "qui est esse",
    body: "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    userId: 2,
    id: 12,
    title: "in quibusdam tempore odit est dolorem",
    body: "itaque id aut magnam praesentium quia et ea odit et ea voluptas et sapiente quia nihil amet occaecati quia id voluptatem incidunt ea est distinctio odio"
  }
]

here is my component html :

<ul >
  <li  *ngFor="let title of dataArray">
      <div  >
          <p>{{title.userId}}</p>
          <div>
              <i ></i>
              <i ></i>
          </div>
      </div>
  </li>
</ul>

here my api that i call data from jsonplace holder:

  constructor( private http:HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
      data =>{
        this.dataArray = data
      }
    )
  }

CodePudding user response：

The easiest way is to filter out the unique userId using find().

var dataArray = [{ userId: 1, id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto" }, { userId: 1, id: 2, title: "qui est esse", body: "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla" }, { userId: 2, id: 12, title: "in quibusdam tempore odit est dolorem", body: "itaque id aut magnam praesentium quia et ea odit et ea voluptas et sapiente quia nihil amet occaecati quia id voluptatem incidunt ea est distinctio odio" }]

let dataToPrint = []

for (let data of dataArray) {
  if (!dataToPrint.find((existingData) => existingData.userId == data.userId))
    dataToPrint.push(data);
}

console.log(dataToPrint)

The above is a running example. You can use that in your subscription:

public dataToPrint = [];
constructor( private http:HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
      data =>{
        this.dataArray = data

        for (let data of dataArray) {
            if (!dataToPrint.find((existingData) => existingData.userId == data.userId))
                dataToPrint.push(data);
        }
    )
  }

<ul >
  <li  *ngFor="let title of dataToPrint">
      <div  >
          <p>{{title.userId}}</p>
          <div>
              <i ></i>
              <i ></i>
          </div>
      </div>
  </li>
</ul>