Перетворити вкладений JSON у таблицю HTML - React, Javascript
Простий компонент реагування для перетворення будь-якого вкладеного об’єкта JSON або масиву в таблицю HTML.
Для цієї реалізації ми створимо простий компонент у React, який перетворює будь-який вкладений об’єкт JSON у таблицю HTML. У цьому прикладі я використовував класи завантаження для відображення таблиці. Але налаштування зведено до мінімуму, щоб ви могли вносити зміни відповідно до ваших потреб.
На роботі ми розробляємо багато адміністративних панелей для наших корпоративних рішень. Однією з проблем при створенні адміністративної панелі є рендерінг даних із SQL в HTML Datatables. Оскільки важко вмістити всю інформацію всередину одного рядка таблиці та декількох стовпців, рознесених по горизонталі, розробники використовують розширювані рядки для відображення додаткової інформації та/або створення окремої сторінки деталей, на якій відображається повна інформація про сутність.
Звичайно, з такими фреймворками, як Laravel, Blade чудовий. Навіть тоді ви знайдете це корисним для перетворення ваших таблиць HTML на основі JS.
В Інтернеті не так багато рішень, які можуть легко перетворити JSON на таблицю HTML. Кілька існуючих відкритих кодів погано працюють з бібліотеками, такими як next.js, щодо того, як вони обробляли глобальний css. Тому я хотів поділитися простою реалізацією Codepen для зразка.
- Перетворити спалах блискавки на середньостатистичну блискавку ІТ в калорії Міжнародна таблиця
- Перетворення грубого пшеничного борошна грубого помелу Факти харчування Перетворення на одиниці та кулінарні заходи
- Часник Пармезан смажений брокколі та кольорова капуста - Стіл, що розвивається
- Тематичні дослідження №2 - Таблиця фактів харчування - Робочі приклади - Інструментарій веб-досвіду; (ВЛАЖНА)
- Зібрав стіл Кращий план харчування Харчування Керрі