Визуализация данных JSON с ключами из API с использованием карты - PullRequest
Новая
       9

Визуализация данных JSON с ключами из API с использованием карты

0 голосов
/ 12 февраля 2019

Я получаю данные из моего API, JSON: 

{
  Teacher: 53, 
  Student: 0,
  Staff: 1, 
  Finance: 0, 
}

Мои данные хранятся в моем состоянии, когда компонент didMount, так что this.total.users содержит мои данные JSON

Чтолучший способ сделать это?

Я понял, что это JSON с ключами, поэтому я должен использовать что-то вроде 

 {Object.keys(this.state.users).map((key) => (   
   <div> {key} </div>   // display Attendee, Student, Staff, Finance
 )}

, но это не работает, потому что this.state.usersне определено Итак, я обнаружил, что могу отображать весь свой объект JSON, он работает с 

 JSON.stringify(this.state.users)}

Итак, я предположил, что мне нужно смешать их оба, но как и когда?Я немного потерян.

в конце я просто хочу, чтобы мой JSON отображался как: 

Attendee   Student   Staff   Finance
   53         0        1        0

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете сделать что-то вроде ниже

  1. Выполните условную проверку перед выполнением Object.keys, чтобы не возникало никаких проблем, когда this.state.users не определено
  2. Использовать ключчтобы получить значение наподобие this.state.user [key]

  3. Установите уникальный ключ в div, так что вы получите всех пользователей, которые будут обработаны, в противном случае будет отображаться только последний 

    {this.state.users && JSON.stringify(this.state.users, Object.keys(this.state.users).map((key, index) => (   
      <div key={'Key-'+index}>
          <div> {key} </div>   // display Attendee, Student, Staff, Finance
           <div>{this.state.users[key]</div> //this will give you value
       </div>
  )))}
...