Итерация по JSON данным с использованием функции карты

Question

Вот приложение, работающее с одномерным набором данных: https://boiling-coast-12353.herokuapp.com/

Я написал код, в котором в моих данных были нажимаемые кнопки для каждой страны. Но теперь мне нужно использовать набор данных, структурированный по-другому, чтобы я мог преобразовать данные. Мой набор данных теперь выглядит так:

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

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

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

Answer 1

Что вы на самом деле сделали, так это изменили ваши данные из массива на JSON Объект. Вот следующий код о том, как перебирать вложенный массив JSON вашей структуры:

class App extends React.Component{
  render(){
  var json = {
                "2010":[{ "Country": "Argentina", "Percentage": 10.44 },
                        { "Country": "Bolivia", "Percentage": 51.62 }],     
                "2011":[{ "Country": "Argentina", "Percentage": 10.44 },
                        { "Country": "Bolivia", "Percentage": 51.62 }]
               };
    return <div> {Object.keys(json).map(year => json[year].map(data => <button> {year} | {data["Country"]}</button>))} </div>
  }
}
  
ReactDOM.render(
  <App/>, 
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>