如何使用反应过滤 json api 具有条件的数据

Question

我正在从后端获取这些数据 api。如何将过滤器添加到 json 数据中？例如，如果用户想要搜索量超过 20000 的关键字。我该怎么做？我提前感谢你的帮助

Answer 1

你可以像这样使用JavaScript的过滤方法。

var filteredData = data.filter(function (item)
{
  return item.Search_volume >=20000;
         
}
);

Answer 2

好问题。

当从后端 api 收集数据时，在 React 中你会这样做：

const [fetchedData, setFetchedData] = React.useState(null);

function fetchData() {
    fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => setFetchedData(data));
};


// loads data initially on page load
React.useEffect(() => {
  fetchData()
  }, [])
  

//use this function to tie to an "onChange" or "onClick" event when submitting the values.
function filterData(inputValue) {
  if(inputValue === "") return;

  
  const filteredData = fetchedData.filter((value) => {
  return value.SEARCH_INDEX_VALUE_HERE >= inputValue
  }
  
  return filteredData;
}

您可以从 here

中找到很好的描述

假设返回的数据是一个对象数组，SEARCH_INDEX_VALUE_HERE 是提供给要过滤的数据的任何列键。在您的情况下，我相信这将是“搜索值”字段。

如何使用反应过滤 json api 具有条件的数据

How to filter json api data with condition using react

javascript

javascript-objects

reactjs

react-hooks