Iterating through JSON data using the map function - arrays

Question

Here is the app working with the one dimensional data set:
https://boiling-coast-12353.herokuapp.com/
I wrote code that made clickable buttons for each country in my data. But now I need to use a data set structured differently so I can transform the data.
My data set is now like this:
{
"2010": [
{ "Country": "Argentina", "Percentage": 10.44 },
{ "Country": "Bolivia", "Percentage": 51.62 },
...
],
"2011": [
{ "Country": "Argentina", "Percentage": 10.34 },
{ "Country": "Bolivia", "Percentage": 51.62 },
...
],
....
}
Im trying to generate a button for each country, but the code I used before no longer works:
{
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

What you have actually done is changes your data from an array to JSON Object. Here is the following code on how to iterate through a nested JSON array of your structure:
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>