javascript - 使用 Javascript 以外的方式过滤数据

Question

我正在尝试使用 more_than 过滤我的数据，并且我只想显示数据，其中数字 大于输入中输入的值。 我不知道为什么我的过滤器不起作用。 这是我的 JS:

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

const more_than = (e) => {
  data.filter((a) => {
    return parseFloat(a.number) > parseFloat(e)
  })
  fetchData()
}

const fetchData = () => {
  info_container.innerHTML = "";
  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:

<input oninput="more_than(value)" class="input-number" type="number"> 
 <div class="info-container">

 </div>

plnkr:http://plnkr.co/edit/6U4kf30dvBAtOyRCraEr?p=preview

Answer 1

尝试返回过滤后的数组，避免在辅助函数中引入副作用。

const data = [{
    "id": 2,
    "number": 50,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },
  {
    "id": 1,
    "number": 122,
    "title": "FGH",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  }
]

const moreThan = (e) => {
  return data.filter(a => parseFloat(a.number) > parseFloat(e))
}

console.log(moreThan(40))
console.log(moreThan(120))

// fetchData(moreThan(40))

// Readabillity
const moreThanNum = (num,dataArray) => dataArray.filter(data => parseFloat(data.number) > parseFloat(num))