0

i'm getting this data from backend api. How can i add filter into json data? For Example if user want keywords which has search volume more than 20000. how can i do that? i appreciate your help in advance

3
  • Please try to clarify your question and show some example code or what you want to achieve. It's way too broad. Commented Jan 14, 2022 at 7:54
  • i'm getting this data what data (JSON)? There's only an image of the rendered view. Also, what have you tried to filter it? Have you tried .filter() ? Commented Jan 14, 2022 at 7:57
  • You probably shouldn't be doing filtering on the client site, if there are so many entries: try designing your queries such that the results can be paginated, and if you want to perform filtering, try doing it on the server side. Commented Jan 15, 2022 at 17:45

2 Answers 2

2

Great question.

When gathering data from a backend api, in react here's how you would do it:

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;
}



  

You can find a good description from here

This is given that the data returned is an array of objects, and the the SEARCH_INDEX_VALUE_HERE is whatever column key that is provided to the data you're filtering. In your case, it would be the "Search value" field I believe.

Sign up to request clarification or add additional context in comments.

Comments

0

You can use filter method of JavaScript like this.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.