Почему не получается правильно отработать JSON файл?

Question

[ivan_ivanov_ivanych]

Добрый день, уважаемые форумчане!

Дан некий JSON файл:

{
  "exams":{
    "1":{
      "title":"ЕГЭ",
      "subjects":{
        "1":{
          "title":"Математика",
          "nums":{
            "1":{
              "themes":[
                {
                  "title":"Вычисления",
                  "id":1,
                  "questions_count":10
                },
                {
                  "title":"Округления",
                  "id":2,
                  "questions_count":15
                },
								{
                  "title":"Проценты",
                  "id":2,
                  "questions_count":12
                }
              ]
            },
            "all_questions_count":37
          }
        }
      }
    }
  }
}
```

Проблема в том, что никак не получается его отработать и использовать в React-приложении(пробовал преобразовать в массив, пользовался for..in, все время выдает некорректные данные. JSON получаю по API, нет возможности его изменить.
Мой код:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class App extends React.Component{
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      isLoaded: false
    }


   //Тут получаю его по URL 
    window.onload = () => {
      window.fetch(urlForGetAllInfo)
      .then(responce => responce.json())
      .then((data) => {
        this.setState({
// И отправляю в состояние 
          data,
          isLoaded: true
        })
      })
      .catch((error) => {
        console.error(error.name + ' ОШИБКА ' + error.massage)
      })
    }
}
//Пытаюсь вернуть каждый контент, но title - undefined
getExamsContents = (exams) => {
  let content = [];
  for (let exam in exams) {
    content.push(<p key={exam}>{exam.title}</p>)
    console.log(content)
  }
  console.log(content)

  return content;
}
 

  render() {
    const {data, isLoaded} = this.state
    if (!isLoaded) {
      return (
        <div>Loading...</div>
      )
    }
    if (data.length !== 0) {
      return (
        <div>
            {this.getExamsContents(data.exams)}
          
        </div>
      )
    } 

  }

}

export default App;

Comments

[Kovalsky]

"пробовал преобразовать в массив, пользовался for..in, все время выдает некорректные данные" - какие?

[ivan_ivanov_ivanych]

Kovalsky, возвращает undefined.
Корректно рендерится только прямая ссылка, например:

return (
        <div>
            {this.state.data.exams[1].title}
        </div>
      )

[Kovalsky]

ivan_machete, "возвращает undefined" - это не ответ) Вы могли запрашивать у data значение по ключу my_lovely_crocodile, получили бы undefined) Покажите в чем ошибка, говорите же "возвращает некорректные данные", значит как-то обращались к объекту

Проверил на ваших данных, for (let i in data.exams) console.log(data.exams[i]) работает

Всё, дошло

Answer 1

[Kovalsky]

for (let exam in exams) {
    content.push(<p key={exam}>{exam.title}</p>)
    console.log(content)
  }

Exam тут это ключ, и нужный вам объект нужно искать обращаясь к exams по этому ключу: exams[exam]