convert php loop to react es6

Question

How can I convert a PHP loop into react es6. the following is my PHP code

    foreach ( $navigation_bar as $menuType => $menus ) {
        ?>
        <div class="side-nav-header"><?=$menus['title']?></div>     
        <?php

        foreach ( $menus ['sub_modules'] as $attr => $submenu ) {
            ?>
            <div class="side-nav-subheader"><?=$submenu['title']?></div>
            <?php
            if (is_array ( $submenu ['menuitem'] )) {
                foreach ( $submenu ['menuitem'] as $menuitem ) {
                    ?>
                    <a href="<?=$menuitem['link']?>"><?=$menuitem['title']?></a>
                    <?php
                }
            }
        }
    }

I have tried to do the following but I don't think I fully understand what is going on

let menuList = resp.body.recordset.record;
                console.log(menuList);
                Object.keys(menuList).map(function(keyName, keyIndex) {
                      // use keyName to get current key's name
                      //   // and a[keyName] to get its value
                      Object.keys(menuList[keyName][keyIndex]).map(function(keyName, keyIndex) {
                          console.log(keyName);
                          console.log(keyIndex);
                          Object.keys(menuList[keyName][keyIndex]['sub_modules']).map(function(keyName, keyIndex) {
                            console.log(keyName);
                            console.log(keyIndex);
                          });
                      });
                })
                console.log(menuList.map((e, i) =>(<div key={i}>{e}</div>)));
                this.state = { menuList : menuList }

i assume you tried this and it doesn't work? are you getting errors? — azium, Jan 02 '18 at 18:10

score 1 · Accepted Answer · answered Jan 02 '18 at 21:59

Perhaps something like this:

let menuData = resp.body.recordset.record
let menuList = []

menuData.navigation_bar.forEach(menus => {
  menuList.push(<div className="side-nav-header">{ menus.title }</div>)

  menus.sub_modules.forEach(submenu => {
    menuList.push(<div className="side-nav-subheader">{ submenu.title }</div>)

    if (submenu.menuitem.length) {
      submenu.menuitem.forEach(menuitem => {
        menuList.push(<a href="{ menuitem.link }">{ menuitem.title }</a>)
      })
    }
  })
})

This assumes the following structure for menuData:

{
  navigation_bar: [
    {
      title: "Title 1",
      sub_modules: [
        {
          title: "Sub Module 1",
          menuitem: [
            {
              title: "Menu Item 1",
              link: "http://link1.com"
            }
          ]
        }
      ]
    },
    {
      title: "Title 2",
      sub_modules: [
        {
          title: "Sub Module 2",
          menuitem: [
            {
              title: "Menu Item 2",
              link: "http://link2.com"
            }
          ]
        }
      ]
    }
  ]
}

I have got the object now `menuList` how can I put this into return method of a class in es6? — shorif2000, Jan 03 '18 at 09:52
Assuming **menuList** is stored in the state then in your **render** method you should be able to do this: `return
{ this.state.menuList }
` — Steve Holgado, Jan 03 '18 at 10:33
im having issues storing it in the state, how can i render it if it is not. here is link of my issue with setting state https://stackoverflow.com/questions/48062682/react-warning-cannot-set-state — shorif2000, Jan 03 '18 at 10:43

convert php loop to react es6

1 Answers1