过滤JSON数据并将其映射到Card

Question

大家好

我有以下代码，用于使用 JSON 文件中的数据创建一些日历卡。

import { IoLocationSharp } from "react-icons/io5";
import { FaHouse } from "react-icons/fa6";
import { IoMdMicrophone } from "react-icons/io";
import { GrAssistListening } from "react-icons/gr";
import dataConcert from "../data/concertData.json"


export const Card = ( ) => (
    <div className="cards">
        {dataConcert.map((data) => (
            <label key={data.id}>
                <input type="checkbox"/>
                    <div className="card">
                        <div className="front">
                            <div className="information__card">
                                <div className="information__date">
                                <header>
                                    <h1>{data.day}</h1>
                                    <h2>{data.month}</h2>
                                </header>
                                </div>
                                <div className="icons__band">
                                    <h3><IoMdMicrophone /></h3>
                                    <h3><GrAssistListening /> </h3>
                                    <h3><FaHouse /></h3>
                                    <h3><IoLocationSharp /></h3>
                                </div>
                                <div className="information__band">
                                    <h3>{data.bandname}</h3>
                                    <h3>{data.Genre}</h3>
                                    <h3>{data.Location}</h3>
                                    <h3>{data.Place}</h3>
                                </div>
                            </div>
                            <div className="buttons_card">
                                <a class="fancy">
                                    <span class="top-key"></span>
                                    <span class="text">TICKETS</span>
                                    <span class="bottom-key-1"></span>
                                    <span class="bottom-key-2"></span>
                                </a>
                                <a class="fancy">
                                    <span class="top-key"></span>
                                    <span class="text">MERCH</span>
                                    <span class="bottom-key-1"></span>
                                    <span class="bottom-key-2"></span>
                                </a>
                            </div>
                        </div>
                    </div>
            </label>
        ))}
    </div>
);

以下是 JSON 文件中数据的一些示例

{
"id":14,
"bandname":"Westernhagen",
"Genre":"Konzert - Rock",
"day":"12",
"month":"Mai.",
"year":"2024"
},
{
"id":15,
"bandname":"Acid King",
"Genre":"Konzert - Rock",
"day":"13",
"month":"Mai.",
"year":"2024"
},
{
"id":16,
"bandname":"Argies",
"Genre":"Konzert - Punkrock/Hardcore",
"day":"13",
"month":"Mai.",
"year":"2024"
},

我只想通过检查“流派”来获取 id 14 和 id 15 的数据，因此在这种情况下，每个流派为“Konzert - Rock”的数据都应转移到新卡中

是否可以检查流派是否为“Konzert - Rock”，如果不是则跳至下一个 id？

我想我应该用 if 和 else 来做，但我不知道如何检查 JSON 文件中的数据。

有人可以帮忙吗？

问候普里莫

Answer 1

您可以在渲染之前根据“流派”字段过滤数据。您可以通过以下方式修改 Card 组件来实现此目的：

export const Card = () => {
// Filter data based on Genre
const rockConcerts = dataConcert.filter(data => data.Genre === "Konzert - Rock");

return (
    <div className="cards">
        {rockConcerts.map((data) => (
            <label key={data.id}>
                <input type="checkbox"/>
                <div className="card">
                    <div className="front">
                        <div className="information__card">
                            <div className="information__date">
                                <header>
                                    <h1>{data.day}</h1>
                                    <h2>{data.month}</h2>
                                </header>
                            </div>
                            <div className="icons__band">
                                <h3><IoMdMicrophone /></h3>
                                <h3><GrAssistListening /> </h3>
                                <h3><FaHouse /></h3>
                                <h3><IoLocationSharp /></h3>
                            </div>
                            <div className="information__band">
                                <h3>{data.bandname}</h3>
                                <h3>{data.Genre}</h3>
                                <h3>{data.Location}</h3>
                                <h3>{data.Place}</h3>
                            </div>
                        </div>
                        <div className="buttons_card">
                            <a className="fancy">
                                <span className="top-key"></span>
                                <span className="text">TICKETS</span>
                                <span className="bottom-key-1"></span>
                                <span className="bottom-key-2"></span>
                            </a>
                            <a className="fancy">
                                <span className="top-key"></span>
                                <span className="text">MERCH</span>
                                <span className="bottom-key-1"></span>
                                <span className="bottom-key-2"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </label>
        ))}
    </div>
    );
};

如果这不是您想要的，请告诉我。