Как перебрать массив объектов через каждый элемент объекта?

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

Это мой массив:

     list: [
                {header: ['id', 'name', 'date', 'verified']},
                {body: [1, 'abc', '26-10-2019', true]}
            ]

Я хочу отобразить таблицу в вертикальном положении следующим образом: enter image description here

Вот как я пытаюсь сделать:

const render = list.map((result, idx) => (
            <tr key={idx}>
                <td>{result.header}</td>                
                <td>{result.body}</td>                
            </tr>
        ))

Но результат

<tr>
   <td>id name date verified</td>
</tr>
<tr>
   <td>1 abc 26-10-2019 true</td>
</tr>

Вам также нужно перебрать result.header и result.body

Deckerz 22.05.2019 16:55

какой длины будет массив списка? это действительно непрактично делать это таким образом.

k.s. 22.05.2019 16:56

@к.с. это массив с двумя объектами

mr.abdo 22.05.2019 16:59

@mr.abdo это всегда будет просто массив с двумя объектами?

k.s. 22.05.2019 17:00
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
4
56
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

пытаться:

      const render = list.map((result, idx) => (
        <tr key={idx}>
            <td>{result.header[idx].toString()}</td>                
            <td>{result.body[idx].toString()}</td>                
        </tr>
      ))

Я получил эту ошибку Uncaught TypeError: Cannot read property '0' of undefined

mr.abdo 22.05.2019 17:02

почему вы используете toString() здесь?

Shridhar Sharma 22.05.2019 17:08

просто чтобы убедиться, что целые числа, массив и еще много чего преобразуются в строку

Nikko Khresna 22.05.2019 17:19
Ответ принят как подходящий

Вам нужно повторить всю таблицу, вот так

const render = list[0].header.map((name, i) => <tr key={i}>
                <td>{name}</td>
                <td>{String(list[1].body[i])}</td>
            </tr>)

Спасибо за вашу помощь. Я получил эту ошибку Uncaught TypeError: Cannot read property 'map' of undefined, но я пытаюсь ее решить.

mr.abdo 22.05.2019 17:11

возможно, переменная list не определена при начальной загрузке

Shridhar Sharma 22.05.2019 17:12

или будет элемент, не содержащий свойства header

Shridhar Sharma 22.05.2019 17:13

Это была моя ошибка. Я исправил это, и я получил эту ошибку Uncaught TypeError: Cannot read property '0' of undefined

mr.abdo 22.05.2019 17:24

Вы можете создать скрипку или код для своего компонента?

Shridhar Sharma 22.05.2019 17:25

Я обновил вашу скрипку на jsfiddle.net/2x3f5hqr, а также обновил свой ответ.

Shridhar Sharma 22.05.2019 17:49

Тку так много. Фантастический!!

mr.abdo 22.05.2019 18:23

Другие вопросы по теме