Вложенный цикл внутри reactjs

#reactjs #for-loop

#reactjs #for-цикл

Вопрос:

Я новичок в React JS и в настоящее время пытаюсь выполнить итерацию определенных данных, чтобы представить их в react js, но не могу сделать то же самое. Данные, которые выглядят примерно так

Теперь конечный результат должен выглядеть примерно так в табличном формате

То, что я пробовал, это:-

Ошибка, которую я получаю ниже, относится к 1 изображению, а во-вторых, код не анализируется.

[![ошибка][5]][5]

Итак, как добиться желаемого результата в react js

1. Что вы уже пробовали?

2. @TheTisiboth Я обновил свой вопрос. Пожалуйста, взгляните. Спасибо.

3. Не могли бы вы, пожалуйста, избегать использования изображений, а вместо этого просто скопировать свой код (вы можете отформатировать его, выбрав его и нажав CTRL K) Его гораздо проще читать и изменять для нас

4. Как listData выглядит, когда вы его печатаете?

5. listdata выглядит как « Конференц-зал 1:[ 0: {имя_поля: «Имя SSID», значение: «xfcsd», имя_секции: «Конференц-зал 1»} 1: {имя_поля: «имя», значение: «sdfdsf», имя_секции: «Конференц-зал 1»} ] Конференц-зал 2:[ 0: {имя_поля: «Имя SSID», значение: «sdfds», имя_секции: «Конференц-зал 2»} 1: {имя_поля: «имя», значение: «sdfdsf», имя_секции: «Конференц-зал 2″} ] Конференц-зал 3:[ 0: {имя_поля:»Имя SSID», значение: «sdfsdf», имя_секции: «Конференц-зал 3»} 1: {имя_поля: «имя», значение: «sdfdsfs», имя_секции: «Конференц-зал 3»} ] «

Ответ №1:

Похоже, вы пытаетесь использовать map для объекта, в то время как вы должны использовать его в коллекции. Может быть, попробуйте что-то вроде этого :

 Object.values(listData.data).map((meetingRoom) => { // your code here });

Это позволит вам использовать содержимое внутри вашего объекта данных как массив объектов.

Редактировать: Извините, я не понял, что вам нужно получить доступ к ключу, а также к значению. Для достижения этого вы можете просто использовать Object.entries which вернет ключ ( Meeting Room 1 Meeting Room 2 в данном случае) в первой переменной и массив элементов во второй переменной.

Вот краткий пример:

 Object.entries(listData.data).forEach(([key, value]) => {
    console.log(key, value);
    // You could use value.map() to iterate over each object in your meeting room field array.
});

Примечание: вы также можете использовать цикл for (… of …), подобный этому, вместо forEach :

 for (const [key, value] of Object.entries(listData.data)) {
    console.log(key, value);
};

Для получения дополнительной информации о методе Object.entries, не стесняйтесь проверить страницу MDN Webdocs об этом здесь .

1. Спасибо за ответ, но в вашем случае я не буду получать заголовок Meeting Room 1 для каждой таблицы, как показано на рисунке выше.

2. Я обновил свой первоначальный ответ, чтобы предоставить более подходящее решение. Дайте мне знать, если у вас возникнут какие-либо проблемы или вопросы!

3.Спасибо за ответ. Мне нужно было сделать лишь небольшую модификацию, чтобы заставить ее работать для меня в среде react:- Object.entries(listData.data).forEach(([key, value]) => { // You could use value.map() to iterate over each object in your meeting room field array. }); Object.entries(listData.data).map(([key, value]) => { // You could use value.map() to iterate over each object in your meeting room field array. });