Блог

Главная - Вопросы по программированию - Визуализация вложенных данных JSON в Reactjs

Визуализация вложенных данных JSON в Reactjs

#json #reactjs

Вопрос:

Я хотел бы отобразить зелье «Описание» моего файла JSON в список Reactjs.

Вот мой App.js

 import  log from './logs/log'


function App() {
    const data = log["TProgramLogSerialize"].["ProgramLog"].["TProgramLogItem"].map((song, key) => (
        <li key={key}>{song.Description}</li>
    ))

    return (
        <ul>
          {data}
        </ul>
      );
}

export default App

Файл JSON является:

 {
  "TProgramLogSerialize": {
    "FileName": "KKGB-FM-DA-6-12-2021-OPX2",
    "AirDate": "06/12/2021",
    "ProgramLog": {
      "TProgramLogItem": [
        {
          "Category": "MACRO",
          "From": "CLOCKS",
          "Description": "LOADSCHED REMOTE VT",
        },
        {
          "Category": "MACRO",
          "From": "CLOCKS",
          "Description": "SCHED ON",
        },
        {
          "Category": {},
          "From": "MUSIC",
          "Description": "NEW POSITIONERS",
        }
      ]
    }
  }
}

Результат показывает:

Ошибка: Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами

Есть какие-нибудь идеи?

Комментарии:

1. Я думаю, вы имеете в виду доступ к свойствам без периодов: log["TProgramLogSerialize"]["ProgramLog"]["TProgramLogItem"] . Или вы можете сделать log.TProgramLogSerialize.ProgramLog.TProgramLogItem

Ответ №1:

Я не уверен, в чем проблема (я просто вставил его в codesandbox, и это сработало). Однако, как сказал Ник, точки в квадратных скобках не нужны. Вы можете получить доступ к вложенной дате следующим образом: const data = log.TProgramLogSerialize.ProgramLog.TProgramLogItem.map или const data = log["TProgramLogSerialize"]["ProgramLog"]["TProgramLogItem"].map это означает, что вы можете сделать это:

 //App.js
import log from "./logs";

function App() {
  const data = log.TProgramLogSerialize.ProgramLog.TProgramLogItem.map(
    (song, key) => <li key={key}>{song.Description}</li>
  );

  return <ul>{data}</ul>;
}

export default App;

 
 //log.js
const log = {
  "TProgramLogSerialize": {
    "FileName": "KKGB-FM-DA-6-12-2021-OPX2",
    "AirDate": "06/12/2021",
    "ProgramLog": {
      "TProgramLogItem": [
        {
          "Category": "MACRO",
          "From": "CLOCKS",
          "Description": "LOADSCHED REMOTE VT",
        },
        {
          "Category": "MACRO",
          "From": "CLOCKS",
          "Description": "SCHED ON",
        },
        {
          "Category": {},
          "From": "MUSIC",
          "Description": "NEW POSITIONERS",
        }
      ]
    }
  }
}

export default log

https://codesandbox.io/s/hopeful-waterfall-xs15i?file=/src/App.js

Метки: