I have been stuck for days trying to pull data into my components from a Fetch API JSON result. As a React beginner, this has been a challenge for me and any direction to help me learn and resolve the issue is appreciated. I have the following JSON response copied below followed by my component setup.
My thoughts are that I am not pulling in the correct JSON key values in order or something along those lines.
JSON:
{
"data": [
{
"virusIndex": 2,
"temperature": 26.5,
"humidity": 58.6,
"pm25": 3,
"tvoc": 234,
"co2": 435,
"co": 0,
"airPressure": 991,
"ozone": 8.7,
"no2": 19.4,
"timestamp": 1646109873
}
],
"usersettings": {
"temperature": "°C",
"temp": "c",
"humidity": "%",
"pm25": "µg/m^3",
"dust": "µg/m^3",
"tvoc": "ppb",
"voc": "ppb",
"co2": "ppm",
"co": "ppm",
"airPressure": "mbar",
"pressure": "mbar",
"ozone": "ppb",
"no2": "ppb",
"pm1": "µg/m^3",
"pm4": "µg/m^3",
"pm10": "µg/m^3",
"ch2o": "ppb",
"light": "lux",
"sound": "dBA"
},
"count": 104
}
App.js:
class App extends Component {
constructor(props) {
super(props);
this.state = {
airData: []
}
}
componentDidMount(){
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer xxxxxxxxx");
var urlencoded = new URLSearchParams();
urlencoded.append("macAddress", "xxxxxxxx");
urlencoded.append("mode", "minute");
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
fetch("MY_API_URL", requestOptions)
.then(response => response.json())
.then(res => {
console.log(res)
this.setState({
airData: res.data
})
});
}
render () {
return (
<div className="app">
<Header />
<div className="spacer"></div>
<OverallStatus />
{this.state.airData.map(res => {
<div>
<div className='qualityFactor'>
<h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {res.humidity}%</h1>
<ProgressBar completed={res.humidity}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {e.AirPressure} hPa</h1>
<ProgressBar completed={e.AirPressure}
maxCompleted={1030} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {e.CO2} ppm</h1>
<ProgressBar completed={e.CO2}
maxCompleted={2000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconVOCs} alt="Logo" className="iconSmall" />Chemicals {e.TVOC} ppb</h1>
<ProgressBar completed={e.TVOC}
maxCompleted={1000} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particles {e.PM25} ug/m3</h1>
<ProgressBar completed={e.PM25}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {e.CO} ppm</h1>
<ProgressBar completed={e.CO}
maxCompleted={100} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {e.NO2} ppb</h1>
<ProgressBar completed={e.NO2}
maxCompleted={200} className="statusBar" />
</div>
<div className='qualityFactor'>
<h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {e.Ozone} ppb</h1>
<ProgressBar completed={e.Ozone}
maxCompleted={100} className="statusBar" />
</div>
</div>
})}
</div>
)
}
}
export default App;
CodePudding user response:
Javascript object keys are case sensitive. So e.CO2
is different from e.co2
.
Also you havent declared variable 'e' but you are using it. Its supposed to be 'res'
You also missed return
statement inside map function.