@ivan_ivanov_ivanych

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

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

Дан некий 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;
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
lazalu68
@lazalu68
Salmon
for (let exam in exams) {
    content.push(<p key={exam}>{exam.title}</p>)
    console.log(content)
  }


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы