Как выбрать нужный массив json в React JS

Question

У меня есть json файл

[
{
    "live": [
        {
            "id": 1,
            "name": "StatTrak™ MAC-10 | Neon Rider",
            "imageUrl": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou-6kejhjxszFJTwW09Kzm7-FmP7mDLfYkWNFpsch2evFo9Wl2lflr0RtZzilJNTBdgE3ZAyDr1nrx-vs0cK9vsmamnt9-n51UgTl8ms/100fx74f/image.png",
            "line": "live-card__line__purple",
            "badge": "purple"
        },
        {
            "id": 2,
            "name": "Desert Eagle | Blaze",
            "imageUrl": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgposbaqKAxf0Ob3djFN79fnzL-cluX5MrLVk2Vu5Mx2gv2P8dWsiQKyrxFoMGj3Io_BcwA6YFDSq1a6lLq91J7o6Z3MzHVhvHFz4GGdwUK867nN7w/100fx74f/image.png",
            "line": "live-card__line__orange",
            "badge": "orange"
        },
        {
            "id": 3,
            "name": "StatTrak™ MAC-10 | Neon Rider",
            "imageUrl": "https://steamcommunity-a.akamaihd.net/economy/image/fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz5rbbOKMyJYYl2STKFNVfw3-x7TBCI24dJuGoOy8-0EKgrv5YaVMbgkOIpJTcbSU_OFYwuo7UIxg_JafJCMqXvqjn_3ejBdkE3axU4/100fx74f/image.png",
            "line": "live-card__line__blue",
            "badge": "blue"
        },
        {
            "id": 4,
            "name": "StatTrak™ MAC-10 | Neon Rider",
            "imageUrl": "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoo6m1FBRp3_bGcjhQ09-jq5WYh8j3KqnUjlRc7cF4n-SPrYrx2wKxqRY9ZGCgdYSScFJtZAnQ-VDryLjqgJG0uJybz3BgvXQm4mGdwUKgJSXXOg/100fx74f/image.png",
            "line": "live-card__line__blue",
            "badge": "blue"
        }
    ]
}

]

И код React:

import liveGuns from "../../../DataBase/Live.json";

                     <div className="live-top__container">
                    {liveGuns.map((gun) => {
                      return (
                        <div className="live-card__card" key={gun.id}>
                          {/* <div className="live-card__name">
                            <span>{gun.name}</span>
                          </div> */}
                          <div className="live-card__line">
                              <span className={gun.line}></span>
                          </div>

                          <div className="live-card__badge">
                              <span className={gun.badge}></span>
                          </div>
                          
                          <div className="live-card__img">
                            <img src={gun.imageUrl} alt="gun" />
                          </div>
                          {/* <div className="live-card__tag">
                            <span className={gun.badge}></span>
                          </div> */}
                        </div>
                      );
                    })}
                  </div>

Как мне сделать так, чтобы брать элементы именно с массива "live", потому что будут там и другие

Answer 1

Если я Вас правильно понял, то вам нужно перебирать не liveGuns, а liveGuns[0].live. Вот так:

Если у вас Live.json массив

{liveGuns[0].live.map((gun) => {
  return (
    'your JSX'
  )
})}

Если у вас Live.json не массив

{liveGuns.live.map((gun) => {
  return (
    'your JSX'
  )
})}

БЛОГ НА HUSL

Как выбрать нужный массив json в React JS

Ответы (1 шт):