How do I render json in my react component? - json

Question

I have the following json file I am importing into my component:
import { beer, wine, spririts, alcopop } from '../../config/calculator.json';
How can I use the json in my render?
Depending upon what was chosen I would like to use the data for each element, if user clicks beer, then show data for beer. For example, how would I loop through 'sizes' in 'beer'? This is my code so far:
{[drinkType].sizes.map((option, i) =>
<div value={option.id} key={i}>
{option}
</div>
)}
I would like to display the size name, pint, bottle, can etc
I get the error: Cannot read property 'map' of undefined
//calculator.json
{
"beer": {
"name": "Beer or cider",
"sizes": {
"568": {
"name": "Pint",
"size": 0.568,
"id": "pint",
"max": 10,
"icon": "beer_pint"
},
"440": {
"name": "Can",
"size": 0.44,
"id": "can",
"max": 10,
"icon": "beer_can"
},
"330": {
"name": "Bottle",
"size": "0.33",
"id": "bottle",
"max": "10",
"icon": "beer_bottle_330"
},
"275": {
"name": "Small bottle",
"size": 0.275,
"id": "smallBottle",
"max": 10,
"icon": "beer_bottle_275"
}
},
"strength": [4, 4.5, 5, 6, 7, 8, 9]
},
"wine": {
"name": "Wine or champagne",
"sizes": {
"125": {
"name": "Small glass",
"size": 0.125,
"id": "small",
"max": 10,
"icon": "wine_small_glass"
},
"175": {
"name": "Standard glass",
"size": 0.175,
"id": "std",
"max": 10,
"icon": "wine_standard_glass"
},
"250": {
"name": "Large glass",
"size": 0.25,
"id": "large",
"max": 10,
"icon": "wine_large_glass"
},
"1000": {
"name": "Bottle",
"size": 1,
"id": "bottle",
"max": 10,
"icon": "wine_bottle"
}
},
"strength": [9, 10, 10.5, 11, 11.5, 12, 13, 14, 15, 16, 17]
},
"spirits": {
"name": "Spirits or shots",
"sizes": {
"25": {
"name": "Single",
"size": 0.025,
"id": "single",
"max": 10,
"icon": "spirit_single"
},
"35": {
"name": "Large single",
"size": 0.035,
"id": "lgSingle",
"max": 10,
"icon": "spirit_large_single"
},
"50": {
"name": "Double",
"size": 0.05,
"id": "double",
"max": 10,
"icon": "spirit_double"
},
"70": {
"name": "Large double",
"size": 0.07,
"id": "lgDouble",
"max": 10,
"icon": "spirit_large_double"
},
"700": {
"name": "Bottle",
"size": 0.7,
"id": "bottle700",
"max": 3,
"icon": "spirit_bottles"
},
"1000": {
"name": "Bottle",
"size": 1,
"id": "bottle",
"max": 3,
"icon": "spirit_bottles"
}
},
"strength": [37, 40]
},
"alcopop": {
"name": "Alcopop",
"sizes": {
"275": {
"name": "Small bottle",
"size": 0.275,
"id": "small",
"max": 10,
"icon": "alcopops_small_bottle"
},
"330": {
"name": "Standard bottle",
"size": 0.33,
"id": "std",
"max": 10,
"icon": "alcopops_standard_bottle"
},
"750": {
"name": "Large bottle",
"size": 0.75,
"id": "large",
"max": 10,
"icon": "alcopops_large_bottle"
}
},
"strength": [5, 5.5]
}
}

Answer 1

.map does not work on objects like that,
map() is only for Arrays
Instead you can store the keys in array and use them, like,
import jsonData from '../../config/calculator';
...
//in constructor or any function
let sizes;
sizes={};
for(let i of Object.keys(jsonData)){
if(!sizes[i][0])sizes[i] = [];
for(let j of Object.keys(i.sizes)){
sizes[i].push(jsonData[i].sizes[j])
}
}
this.setState({
sizesArray:sizes
})
Now you can use this.state.sizesArray.map to iterate over sizes, like,
{this.state.sizes[drinkType].map((option, i) =>
<div value={option.id} key={i}>
{option}
</div>
)}

Answer 2

First, import your json inside the component:
import jsonData from '../../config/calculator'; //specify the appropriate location of the json file
Then you can access the "data" in your component in various ways. One way could be:
constructor() {
this.state = {
data: []
}
}
componentDidMount(){
this.setState({data: jsonData});
}
And accordingly, you can use this data(this.state.data).