Sort data in javascript

Question

I a have problem - I am showing in my html data from javascript, and i have to sort it after click. Here is my code:

const data = [
  {
    "id": 2,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },
  {
    "id": 1,
    "title": "FGH",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  }
]
const info_container = document.querySelector('.info-container')

const sort = () => {
  data.sort((a, b) => parseFloat(a.id) - parseFloat(b.id))

  fetchData()
}

const fetchData = () => {
  data.forEach((item, index) => {
  const img = document.createElement("img");
  const title = document.createElement('h3')

  const node = document.createTextNode(item.src);
  const node_title = document.createTextNode(item.title)

  title.appendChild(node_title)
  img.src = item.src

  info_container.appendChild(title)
  info_container.appendChild(img);

})
}
window.onload = function() {
  fetchData()
}

HTML:

<div><button onclick="sort()">sort</button></div>
  <div class="info-container">    
</div>

plunker: http://plnkr.co/edit/Yjn4jaLN45pYJHFZBZLn?p=preview

Instead of updating my actual view, a new one is created, how to fix that?

Thanks for answers in advance!

why should I look elsewhere? If you do call sort, then of course it adds to the data ... all you do is appendChild — Jaromanda X
– Jaromanda X, Commented Apr 14, 2019 at 6:43

Jack Bashford · Accepted Answer · 2019-04-14 06:45:55Z

3

You need to reset the contents of info_container each time fetchData is called:

const fetchData = () => {
  info_container.innerHTML = "";
  //Rest of the code
}

Modified Plunker

answered Apr 14, 2019 at 6:45

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KKoku · Accepted Answer · 2019-04-14 07:21:54Z

-1

It is strange you don't release your info_container children number increases on each click event. You want to replace your info_container content with a new one, so your new content structure doesn't matter at first glance , you should write a function that does the job, checking that you could at least replace a string with an new one. With @jack Bashford reply you have a solution
Second wording could help in a code, just minor remark thought, your fetchData is not fetching anything at all

answered Apr 14, 2019 at 7:21

KKoku

311 silver badge9 bronze badges

Collectives™ on Stack Overflow

Sort data in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related