来自 API 的数据：检索特定数据 JS

Question

我是一个新手前端，刚开始使用后端 API 有这个 API： https : //sportpro3.herokuapp.com/api/sports/Sports/其中有字段：图像、标题、描述、category_of_sports:category 问题是如下： 是否有可能在 category_of_sports:category 中获取那些数据，例如：Olympicsports

如果我要求，所有数据都来了

我会很高兴为每个答案！:)

 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() 函数创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。 所以我们传递了一个箭头函数，其中 obj 参数代表数据数组的对象。