How to use FetchAPI nested Arrays of same object
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.
You can just do another .map on menu.content.map(menuContentItem => ... etc
– Gavin Thomas
Aug 10 at 4:53
@SumanKundu - I am newbie to reactjs, please help me how to do it.
– kapil gupta
Aug 10 at 4:55
@GavinThomas - We can do it, but what if the recurrency is at multiple levels like 4-5
– kapil gupta
Aug 10 at 4:56
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
The index and cont are undefined variables. Please let me know where we need to define them and how
– kapil gupta
Aug 10 at 5:38
Same issue only flat structure is coming up, within System Preference it is not showing the child menu items
– kapil gupta
Aug 10 at 5:43
i have updated my answer ,did you check it
– CodeZombie
Aug 10 at 5:48
I am using the react-metismenu component (npmjs.com/package/react-metismenu), not sure where to change the second part
– kapil gupta
Aug 10 at 6:16
Ok then it must work without the second part.what exactly displaying now
– CodeZombie
Aug 10 at 6:21
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.
Did you try with initiating content as a state in the constructor?
– Suman Kundu
Aug 10 at 4:45