Доступ к вложенным JSON данным в React - PullRequest
Новая
       13

Доступ к вложенным JSON данным в React

0 голосов
/ 02 февраля 2020

Ссылка на приложение: https://boiling-coast-12353.herokuapp.com/

Имейте в виду, что это для задания, которое еще не требует компонентов (но будет) То, что у меня до сих пор работает, но теперь я хотел бы преобразовать мои данные с помощью вложенного JSON. В настоящее время у меня есть JSON данные, которые выглядят так: 

[
    { "label": "Argentina", "percentage": 10.44 },
    { "label": "Bolivia", "percentage": 51.62 },
     etc..
]

, к которым я обращаюсь, чтобы генерировать кнопки и генерировать div для каждого объекта в массиве соответственно: 

{
  this.state.data.map((data, index) => (
  <button key={index}className="button-primary" onClick={() => 
  {this.onChooseCountry(index);}}>
     <span className="btn-content" tabindex="-1">
     </span>{data.label}</button>
  ))
} 

{
  this.state.chosenCountries.map((chosenCountry, index) => (
  <div className="bar--show bar" style={{height: chosenCountry.percentage + "%"}}>

  <h3>{chosenCountry.label}</h3>
  <h4>{chosenCountry.percentage} %</h4>
  <button className="remove-btn" onClick={() => this.removeCountry(index)}>remove</button>

 </div>
   ))
 }

Новый Набор данных, с которым я хотел бы работать, я организовал следующим образом: 

[
    { 
    "year": "2010",
     "info": [
        { "Country": "Argentina", "Percentage": 10.44 },
        { "Country": "Bolivia", "Percentage": 51.62 },
          ...
    ]
    },
    {
    "year":"2011",
    "info": [
        { "Country": "Argentina", "Percentage": 10.34 },
        { "Country": "Bolivia", "Percentage": 51.62 },
    ...

И я хотел бы передать год / метку для массива в выпадающее меню выбора: 

<select onChange={this.updateYear} id="select" className="YearChooser-select">
   <option value="">Select Year</option>
   <option value="2016">2016</option>
   <option value="2015">2015</option>
   <option value="2014">2014</option>
   ...

</select>

Метод, который я пока использую, чтобы получить значение года из выпадающего списка: 

updateYear = (ev) => {

    this.setState({
      year: ev.target.value },
      () => console.log('update year', this.state.year));

  }

Я выяснил, как получить доступ к новому вложенному набору данных, используя sub, но я не знаю, как связать выбранный год из выпадающего меню с информацией для каждого года: 

{
  this.state.data.map((datum) =>
  <div>
    {datum.year}
  <ul>
    {datum.info.map((sub) =>
    <div>
      {sub.Country} : 
       {sub.Percentage} %
    </div>
    )}
  </ul>
  </div>
  )
}

1 Ответ

0 голосов
/ 02 февраля 2020 
const options = this.state.data.map((datum) => (
    <option value={datum.year}>{datum.year}</option>
);

<select onChange={this.updateYear} id="select" className="YearChooser-select">
   {options}
</select>

это то, что вы ищете?

...