Data from API: Retrieving specific data JS

Question

I am a novice frontender and just started working with backend API There is this API: https://sportpro3.herokuapp.com/api/sports/Sports/ where there are fields: image, title, description, category_of_sports:category The question is as follows: Is it possible to get those data where category_of_sports:category for example: Olympic sports

If I request, all the data comes

I will be very happy for every answer!:)

 export const MainPart = () => { const [mainCards, setMainCards] = useState([]); useEffect(() => { const fetchMain = async () => { const response = await axios .get("https://sportpro3.herokuapp.com/api/sports/Sports/") .catch((err) => console.log(err)); console.log(response); setMainCards(response.data); }; fetchMain(); }, []); console.log(mainCards); return ( <> <div className="main"> <div className="main__container"> <div className="main__title">Sports</div> <div className="sports__title">National Sports</div> <div className="main__cards"></div> <MainComponent mainCards={mainCards} /> <div className="sports__title">Olympia sports</div> <OlympicSport /> <div className="sports__title">Nonolympia sports</div> <NotOlympicSport /> <div className="sports__title">Para and Sourdough</div> <ParaSport /> </div> </div> </> ); }; Main Component function MainComponent({ mainCards }) { return ( <div> {mainCards && mainCards.map((mainCards) => ( <MainInfo mainCards={mainCards} key={mainCards.id} /> ))} </div> ); } export default MainComponent; MainINfo function MainInfo({ mainCards }) { return ( <div className="main__info"> <img src={mainCards.image} alt="" className="main__image"></img> <div className="main__container"> <div className="main__up"> <span className="main__author">{mainCards.title}</span> <br /> </div> <h1 className="main_title">{mainCards.description}</h1> <p>{mainCards.category_of_sports.category}</p> <Link to={`/main/${mainCards.toString()}`}>Read more...</Link> </div> </div> ); } export default MainInfo;

Answer 1

const filteredData = data.filter((obj)=> obj.category_of_sports.category === 'Olympic');

filter() function creates a new array with all elements that pass the test implemented by the provided function. so we passed an arrow function where the obj parameter represents the object of the data array.