Question

我正在尝试使用data过滤我的more_than，并且只想显示data，它比输入中的输入大。我不知道为什么我的过滤器不起作用。这是我的JS：

number

HTML：

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()
}

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

Answer 1

尝试并return过滤掉的数组，避免在助手功能中引入副作用。

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))

Answer 2

data.filter不会更改原始的data。您应该将其结果分配给另一个变量，然后将其作为参数传递给fetchData函数。

// we rename data to originalData for example's purpose
const originalData = [
  {
    "id": 2,
    "number": 50,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },...
]

...

// we pass newData to your fetchData function
const more_than = (e) => {
  const newData = data.filter((a) => {
    return parseFloat(a.number) > parseFloat(e)
  })
  fetchData(newData)
}

// we pass data as a parameter
const fetchData = (data) => {
  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(originalData)
}

Answer 3

创建一个新变量以传递经过过滤的数据并基于此呈现UI。默认情况下，将默认数据传递到fetchData()。过滤后，将过滤后的数据传递到fetchData()。

这是更新的插件URL：http://embed.plnkr.co/oFe2WCIdwxIhlasS5H7O/

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"
  }
]

var newData = [];

const info_container = document.querySelector('.info-container')

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

const fetchData = (_data) => {
  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(data)
}

Answer 4

您的代码是正确的，但是您忘记了filter函数不会对数据变量进行变异，因此您需要保存filter的新变异输出，然后使用它。

  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) => {
      let result = data.filter((a) => {
        return parseFloat(a.number) > parseFloat(e)
      })
      fetchData(result)
    }

    const fetchData = (result) => {
      info_container.innerHTML = "";
      if (!result) result = data;

      result.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()
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <input oninput="more_than(value)" class="input-number" type="number">
  <div class="info-container">

  </div>
  
  </body>
  </html>

使用JavaScript之外的数据过滤数据

4 个答案: