Fetched data duplicates itself after sorting

Question

I fetched data by using fetch api into a table. I sort my data by clicking on column headers. It works but after it's sorted,it duplicates data. I checked on it,but i guess there's someting i've missed.

let data =[];
function veriAl() 
{
  fetch('https://jsonplaceholder.typicode.com/users')
   .then(response =>{
   if(!response.ok)
     {
       throw Error("ERROR");
     }
   return response.json();
   })
    .then(veri => {
    data=veri;
   veriEkle(data);
}).catch(error => {
    console.log(error);
  });
}

const sort_data = (field) =>
{
  data.sort((a,b) => {
    let valueA=a[field];
    let valueB= b[field];
    if(valueA<valueB)
      {
        return -1;
      }
    else if(valueB>valueA)
      {
        return 1;
      }
    return 0;            
  })
  console.log("sıralandı"+field+"e göre",data);
  veriEkle(data);
  }
const veriEkle =(array)=>
{
  
  const html=array.map(user =>{
    return `<table class="user">
      <td> ${user.id}</td>
      <td>${user.name}</td>
      <td>${user.username}</td>
      <td>${user.email}</td>
    <td>${user.address.street}/${user.address.suite}/${user.address.city}</td>
      </table>
     `;
    
  }).join("");
   console.log(html); document.querySelector('#veri_tablo').insertAdjacentHTML("afterbegin",html);
}
veriAl();

<div class="container">
<div class="row justify-content-center">
<table class="table" id="veri_tablo">
 <thead class="thead-dark">
   <tr>
     <th onclick="sort_data('id')">ID</th>
     <th onclick="sort_data('name')">Name</th>
     <th onclick="sort_data('username')">Username</th>
     <th onclick="sort_data('email')">Email</th>
     <th onclick="sort_data('address')">Adres</th>
   </tr>
 </thead>
</table>
<div>
  </div>

`sort` doesn't remove duplicates, you need to `filter` the duplicates. — Naren, Jan 31 '21 at 12:01
If you console log the data before sorting, and after sorting in `sort_data()`, is the data right before sorting? Is it duplicated after sorting? — Milan Tenk, Jan 31 '21 at 12:08
From what I've seen, there are no duplicates here. Results may have the same names but different other data such as email and username Secondly, `sort` modifies an array in place. In other words, it modifies the original array (which is usually not what you want). I think you should destructure the array before sorting: `[...data].sort(...)` — sudo_kaizen, Jan 31 '21 at 12:47

score 0 · Answer 1 · answered Jan 31 '21 at 13:14

0

 console.log("sıralandı"+field+"e göre",data);
  veriEkle(data); //---->Here

You should maybe edit here like veriEkle(...data); or you should use filter function instead of "sort"

answered Jan 31 '21 at 13:14

İlknur Sucaklı

13
4

score 0 · Answer 2 · answered Jan 31 '21 at 14:27

There seems to be nothing wrong with your data. It's not being duplicated. It is the html that's being duplicated. You're appending html without removing the existing entries. You should have a container element and change the inner html of that container instead.

Your js should look something like this...

//...
const veriEkle = (array) => {
  const html = array.map(user => {
    return `<tr class="user">
          <td> ${user.id}</td>
          <td>${user.name}</td>
          <td>${user.username}</td>
          <td>${user.email}</td><td>${user.address.street}/${user.address.suite}/${user.address.city}</td>
          </tr>
         `;
  }).join("");
  console.log(html);
  document.getElementById('table_content').innerHTML = html;
}

And your html

<div class="container">
  <div class="row justify-content-center">
    <table class="table" id="veri_tablo">
      <thead class="thead-dark">
        <tr>
          <th onclick="sort_data('id')">
            ID
          </th>
          <th onclick="sort_data('name')">
            Name
          </th>
          <th onclick="sort_data('username')">
            Username
          </th>
          <th onclick="sort_data('email')">
            Email
          </th>
          <th onclick="sort_data('address')">
            Adress
          </th>
        </tr>

        <tbody id="table_content" /> //the container element
      </thead>
    </table>
    <div />
  </div>
</div>

PS Using the innerHTML property is not considered best practice and you should look at this link for the best ways to create and render elements from html strings.

Fetched data duplicates itself after sorting

2 Answers2