Вывод списка объектов на страницу react приложения

Question

Имеется массив:

[
    {
        "bets": {
            "0": {
                "odds": "1.44",
                "match": "mc - mu",
                "id": 0,
                "market": "goal"
            },
            "1": {
                "market": "corner",
                "match": "Torpedo - Pobeda",
                "odds": "2.05",
                "id": 1
            }
        },
        "id": "cepNnANcuoV368WH8VrF"
    }
]

Необходимо вывести список значений ключей market. Подскажите, что делаю не так?

const betsOdds = [...new Set(массив.map(el => el.bets))];

    return (
            <ul> 
             {betsOdds.map((bet)=>(
                <li key={bet.id}>{bet.market}</li>
             )
             )}
            </ul> 
    );

Answer 1

Вы из вашего массива достаете объект bets и его кладете в betsOdds как элемент массива. А у bets нет ключа market

Надо для каждого элемента bets пробегаться циклом и вытаскивать данные.

const betsOdds = []
arr.forEach(el => {
  for (let i in el.bets) {
    if (!betsOdds.find(it => el.bets[i].market === it.market))
    betsOdds.push(el.bets[i])
  }
})

const arr = [
    {
        "bets": {
            "0": {
                "odds": "1.44",
                "match": "mc - mu",
                "id": 0,
                "market": "goal"
            },
            "1": {
                "market": "corner",
                "match": "Torpedo - Pobeda",
                "odds": "2.05",
                "id": 1
            }
        },
        "id": "cepNnANcuoV368WH8VrF"
    },
    {
        "bets": {
            "0": {
                "odds": "1.44",
                "match": "mc - mu",
                "id": 0,
                "market": "goal"
            },
            "1": {
                "market": "street",
                "match": "Torpedo - Pobeda",
                "odds": "2.05",
                "id": 1
            }
        },
        "id": "cepNnANcuoV368WH8VrF"
    }
];

const betsOdds = []
arr.forEach(el => {
  for (let i in el.bets) {
    if (!betsOdds.find(it => el.bets[i].market === it.market))
    betsOdds.push(el.bets[i])
  }
})

console.log(betsOdds)

Вот такой массив уже сможете отрендерить

БЛОГ НА HUSL

Вывод списка объектов на страницу react приложения

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