Clash Royale CLAN TAG#URR8PPP

How to use FetchAPI nested Arrays of same object

I am trying to show menu where it can have parent child relationship, with flat structure it is working fine but with nested objects not able to do it.
The below is the JSON and reactJS code.
JSON -


"data": [

"to": "#a-link",
"icon": "spinner",
"label": "User Maintenance"
,

"content": [

"to": "#b1-link",
"icon": "apple",
"label": "System Controls"
,

"to": "#b2-link",
"icon": "user",
"label": "User Maintenance"

],
"icon": "gear",
"label": "System Preferences"
,

"to": "#c-link",
"icon": "gear",
"label": "Configuration"

]



ReactJS code -

export default class MenuComponent extends Component
constructor()
super();
this.state =


componentDidMount()
fetch('http://localhost:8084/Accounting/rest/v1/company/menu?request=abc')
.then(response => response.json())
.then(parsedJSON => parsedJSON.data.map(menu => (

to: `$menu.to`,
icon: `$menu.icon`,
label: `$menu.label`
// content: `$menu.content`

)))
.then(content => this.setState(
content
))


render()
console.log('333');
console.log(this.state.content);
return (
<MetisMenu content=this.state.content activeLinkFromLocation />
)




In JSON you can see the 'System Preference' has nested content.

1 Answer
1

Try this code

class MenuComponent extends Component
constructor()
super();
this.state =
content :



componentDidMount()
fetch('http://localhost:8084/Accounting/rest/v1/company/menu?request=abc')
.then(response => response.json())
.then(parsedJSON => parsedJSON.data.map(menu => (

to: `$menu.to`,
icon: `$menu.icon`,
label: `$menu.label`
// content: `$menu.content`

)))
.then(content => this.setState(
content
))


render()
const content = this.state
if(content === undefined)
return <div>Content not found</div>;

if(content.length === 0)
return <div>Loading</div>;

return (
<MetisMenu content=content activeLinkFromLocation />
)


export default MenuComponent


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.