How to display nested array data in JSON in ReactJS? - reactjs

Question

I have problem to display nested array data that I retrieved from api call. The JSON data format is like:
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
Edit data format:
Items: [{subject: ACCOUNTING, CAMPUS: CAMPUS A}, {subject: ACCOUNTING, campus: CAMPUS A}...]
PageNo: 1
TotalRecordCount: 8000
in JSON format.
How to access subject, campus, etc. data in ReactJS? I got the error message: Objects are not valid as a React child (found: object with keys {courseItem}).
App.js
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state ={
courses:[]
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({
courses:response.data
});
});
}
_getCourses(){
const data=this.state.courses;
const courseItem=data.map((course,index)=>(
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
render() {
const courses= this._getCourses();
return (
<div className="App">
<div className="courseResults">
{courses}
</div>
</div>
);
}
}
export default App;
Thanks.

Answer 1

In componentDidMount you are currently setting courses to just response.data. And this is the outer array from your response. The courses array is the inner array. So, you need to set courses to response.data[0].Items. Perhaps you want to iterate over response.data array as well if you expect more than one entry there.
componentDidMount() {
axios.get('http://localhost:8080')
.then(response => {
this.setState({
courses: response.data[0].Items
});
});
}
In _getCourses you need to return the courseItems variable:
_getCourses() {
const data = this.state.courses;
const courseItems = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
return courseItems;
}
You have the render function inside of the _getCourses and it has to be on the same level, at the class level:
class App extends Component {
constructor() { ... }
componentDidMount() { ... }
_getCourses() { ... }
render() { ... }
}

Answer 2

import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
courses: [
{
pageNo: 1,
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
]
}
]
}
}
_getCourses() {
const data = this.state.courses.slice(0);
const courseItem = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem">
<ul>
{course.Items.map((details, index) => (
<React.Fragment>
<li>
Course: ID:{details.id}
</li>
<li>
SUBJECT:{details.subject}
</li>
<li>
CAMPUS: {details.campus}
</li>
</React.Fragment>))}
</ul>
</div>
</div>
))
return courseItem;
}
render() {
return (
<div className="App">
<div className="courseResults">
{this._getCourses()}
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js
You needed to return courseItem in the _getCourse function. Otherwise it will not render any html when you call the _getCourse in the render function.
You also need to acess Items, because Items contains the data you want to access.
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}