javascript - 在javascript中对数据进行排序

Question

我有一个问题 - 我在我的 html data 中显示来自 javascript 的数据，我必须在点击后对其进行排序。这是我的代码:

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>

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

创建了一个新 View 而不是更新我的实际 View ，如何解决？

提前感谢您的回答!

Answer 1

每次调用fetchData时都需要重新设置info_container的内容:

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

Modified Plunker