Obtengo estos datos de la API de backend. ¿Cómo puedo agregar un filtro a los datos json? Por ejemplo, si el usuario quiere palabras clave que tengan un volumen de búsqueda superior a 20000, ¿cómo puedo hacer eso? Agradezco tu ayuda de antemano
Gran pregunta.
Al recopilar datos de una API de back-end, reaccionar así es como lo haría:
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; }Puedes encontrar una buena descripción desde aquí .
Esto se debe a que los datos devueltos son una matriz de objetos, y SEARCH_INDEX_VALUE_HERE es cualquier clave de columna que se proporcione a los datos que está filtrando. En su caso, creo que sería el campo "Valor de búsqueda".
Puede usar el método de filtro de JavaScript como este.
var filteredData = data.filter(function (item) { return item.Search_volume >=20000; } );