How to use FetchAPI nested Arrays of same object

Question

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.

Did you try with initiating content as a state in the constructor? — Suman Kundu, Aug 10 '18 at 04:45
You can just do another .map on menu.content.map(menuContentItem => ... etc — Gavin Thomas, Aug 10 '18 at 04:53
@SumanKundu - I am newbie to reactjs, please help me how to do it. — kapil gupta, Aug 10 '18 at 04:55
@GavinThomas - We can do it, but what if the recurrency is at multiple levels like 4-5 — kapil gupta, Aug 10 '18 at 04:56

CodeZombie · Answer 1 · 2018-08-10T06:19:45.647

0

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

edited Aug 10 '18 at 06:19

answered Aug 10 '18 at 05:08

CodeZombie

2,027
3
16
30

The index and cont are undefined variables. Please let me know where we need to define them and how – kapil gupta Aug 10 '18 at 05:38
Same issue only flat structure is coming up, within System Preference it is not showing the child menu items – kapil gupta Aug 10 '18 at 05:43
I am using the react-metismenu component (https://www.npmjs.com/package/react-metismenu), not sure where to change the second part – kapil gupta Aug 10 '18 at 06:16
Ok then it must work without the second part.what exactly displaying now – CodeZombie Aug 10 '18 at 06:21
The child menu items are not shown within System Prefernces – kapil gupta Aug 10 '18 at 06:35

How to use FetchAPI nested Arrays of same object

1 Answers1

Linked