Показать динамический список массивов с помощью reactJS

Я работаю над созданием веб-приложения с использованием reactJS. Мы должны отображать продукт, на который подписались пользователи. Количество продуктов, на которые подписывается каждый пользователь, различается. Например, вот ответ:

 {
    "data" : [
        {
          "user": "user1",
          "subscriptions": 
          {
           "user1_product_1" : 20,
           "user1_product_2": 25
          }
        },
        {
            "user": "user2",
            "subscriptions": {
            "user2_product_1": 30,
            "user2_product_2": 25,
            "user2_product_3": 50,
            "user2_product_4": 50
          }
        }
      ]
}

Таким образом, данные подписки являются динамическими. Как я могу отобразить приведенные выше данные в табличных данных следующим образом: Макет Пользователь может подписаться на любое количество продуктов. На данный момент у нас нет пользователей, которые подписались более чем на 4 продукта.

javascript reactjs react-native react-data-grid

12.12.2020 16:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

286

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, ваши данные беспорядочны и не имеют правильной структуры. сначала исправьте это, а затем это может вам помочь:

let data = [
  {
    user: "user1",
    subscriptions: {
      user1_product_1: 20,
      user1_product_2: 25,
    },
  },
  {
    user: "user2",
    subscriptions: {
      user2_product_1: 30,
      user2_product_2: 25,
      user2_product_3: 50,
      user2_product_4: 50,
    },
  },
];

const TabularData = (props) => (
  <table>
    {props.data.map((user) => (
      <tr>
        {Object.keys(user.subscriptions).map((user_product) => (
          <td>{user.subscriptions[user_product]}</td>
        ))}
      </tr>
    ))}
  </table>
);

12.12.2020 17:16

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

Создание компонента Upvote как функционального компонента

Как рассчитать скорость анимации в секундах на основе текущего смещения страницы и предыдущего смещения страницы?

Компонент React отображается дважды, а useEffect не срабатывает

Невозможно отобразить вывод вызова API, сделанного из текстового поля, в пользовательский интерфейс

Обратный вызов внутри функции обновления useState в реагирующих хуках

Как управлять событием вставки в компоненте CKEdit 5 React?

Форма Formik проверяется только после второго нажатия кнопки? (Используя React Hooks, TypeScript, Formik, NextJS)

Требовать возвращаемый объект, а не строку

Как я могу получить продолжительность звука mp3-файла в React

Как выполнить маршрутизацию из другого компонента в React JS

Показать динамический список массивов с помощью reactJS

Ответы 1

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

Похожие вопросы