Iterate over a JSON array in Angular JS using a loop

Question

Iterate over a JSON array in Angular JS using a loop

My goal is to iterate through an array from JSON and format the contents into a side menu display. Here's the code snippet I created:

<ul ng-repeat="(key, value) in menuList.Menu">
  <li>{{key}}</li>
  <ul ng-repeat="(key, value) in value">
    <li> {{key}}</li>  //second key
    <ul ng-repeat="(key, value) in value">
      <li> {{key}}</li> 
      <ul ng-repeat="(key, value) in value">
        <li> {{key}} : {{value}}</li>  
      </ul>
    </ul>
  </ul>
</ul>

The issue I'm facing is that my second key contains both an object and an array. I need to figure out how to display the value of the object and only loop/ng-repeat through the array without displaying its entire content.

 <li> {{key}} : {{value}}</li>

Here is a snippet of my JSON data for better understanding:

{
  "class": 99,
  "mode" : 0,
  "Menu": [{
      "MenuNum":  1,
      "MenuItems":  [{
          "ItemNum":  0,
          "ItemDesc": "Main Menu",
          "ActionCode": "-",
          "ActionInst": ""
        } , {
          "ItemNum":  1,
          "ItemDesc": "BBQ",
          "ActionCode": "M",
          "ActionInst": "0992"
        }, {
          "ItemNum":  2,
          "ItemDesc": "Beverages",
          "ActionCode": "M",
          "ActionInst": "0992"
        }]
        },{
      "MenuNum":  2,
      "MenuItems":  [{
          "ItemNum":  0,
          "ItemDesc": "Sub Menu",
          "ActionCode": "-",
          "ActionInst": ""
        }, {
          "ItemNum":  1,
          "ItemDesc": "BBQTYPE1",
          "ActionCode": "P",
          "ActionInst": "0996"
        }, {
          "ItemNum":  2,
          "ItemDesc": "BeveragesTYPE1",
          "ActionCode": "P",
          "ActionInst": "0998"
      }]
  }]
}

I envision the sidebar looking more like this:

javascript arrays json angularjs user-interface

Answer 1

Answer №1

Assuming that you are interested in implementing ng-repeat logic, the following code snippet could fulfill your requirements:

  <ul ng-repeat="topMenu in menuList.Menu">
        <li>
            {{$index}}
        <ul>
            <li>
                MenuNum: {{topMenu.MenuNum}}
            </li>
            <li> MenuItems
                <ul ng-repeat="submenu1 in topMenu.MenuItems">
                    <li>
                        {{$index}}
                        <ul>
                            <li>ItemNum: {{submenu1.ItemNum}}</li>
                            <li>ItemDesc: {{submenu1.ItemDesc}}</li>
                            <li>ActionCode: {{submenu1.ActionCode}}</li>
                            <li>ActionInst: {{submenu1.ActionInst}}</li>
                          </ul>
                      </li>
                </ul>
            </li>
            </ul>
        </li>
    </ul>

If you wish to easily handle the opening and closing of menus, consider integrating this code into an Angular accordion component for a more streamlined solution. Feel free to reach out if you need assistance with that implementation.

Answer 2

Assuming that you are interested in implementing ng-repeat logic, the following code snippet could fulfill your requirements:

  <ul ng-repeat="topMenu in menuList.Menu">
        <li>
            {{$index}}
        <ul>
            <li>
                MenuNum: {{topMenu.MenuNum}}
            </li>
            <li> MenuItems
                <ul ng-repeat="submenu1 in topMenu.MenuItems">
                    <li>
                        {{$index}}
                        <ul>
                            <li>ItemNum: {{submenu1.ItemNum}}</li>
                            <li>ItemDesc: {{submenu1.ItemDesc}}</li>
                            <li>ActionCode: {{submenu1.ActionCode}}</li>
                            <li>ActionInst: {{submenu1.ActionInst}}</li>
                          </ul>
                      </li>
                </ul>
            </li>
            </ul>
        </li>
    </ul>

If you wish to easily handle the opening and closing of menus, consider integrating this code into an Angular accordion component for a more streamlined solution. Feel free to reach out if you need assistance with that implementation.

Answer 3

Answer №2

Are you attempting to create a nested list with children? Consider implementing a recursive pattern using ng-include to display all nested children. You can structure it like this:

<script type="text/ng-template" id="menuTree">
  {{ menuItem.name }}
  <ul ng-if="menuItem.children">
    <li ng-repeat="menuItem in menuItem.children" ng-include="'menuTree'"></li>
  </ul>
</script>

<ul>
  <li ng-repeat="menuItem in menuItems" ng-include="'menuTree'"></li>
</ul>

The data structure used here may differ slightly from yours, but the concept remains the same. Check out this demo for clarification: http://jsfiddle.net/mmmxh8kq/

EDIT:

If your data is similar to the provided JSON and does not require a recursive menu, you can simplify it like so:

<ul>
  <li ng-repeat="menus in menuList.Menu">
    {{ menus.MenuNum }}
    <ul>
      <li ng-repeat="menuItems in menus.MenuItems">
        {{ menuItems.ItemDesc }}
      </li>
    </ul>
  </li>
</ul>

Check out this demo for a clearer view: http://jsfiddle.net/n4mo80od/

Answer 4

Are you attempting to create a nested list with children? Consider implementing a recursive pattern using ng-include to display all nested children. You can structure it like this:

<script type="text/ng-template" id="menuTree">
  {{ menuItem.name }}
  <ul ng-if="menuItem.children">
    <li ng-repeat="menuItem in menuItem.children" ng-include="'menuTree'"></li>
  </ul>
</script>

<ul>
  <li ng-repeat="menuItem in menuItems" ng-include="'menuTree'"></li>
</ul>

The data structure used here may differ slightly from yours, but the concept remains the same. Check out this demo for clarification: http://jsfiddle.net/mmmxh8kq/

EDIT:

If your data is similar to the provided JSON and does not require a recursive menu, you can simplify it like so:

<ul>
  <li ng-repeat="menus in menuList.Menu">
    {{ menus.MenuNum }}
    <ul>
      <li ng-repeat="menuItems in menus.MenuItems">
        {{ menuItems.ItemDesc }}
      </li>
    </ul>
  </li>
</ul>

Check out this demo for a clearer view: http://jsfiddle.net/n4mo80od/

Iterate over a JSON array in Angular JS using a loop

Answer №1

Answer №2

Similar questions

Efficiently incrementing values within a specific index range in a Python list without relying on NumPy for vectorization

Exploring nested objects and arrays with Plunker - extracting their values

analyzing strings by comparing their characters to another string

Trouble arises when incorporating a new feature onto a map with OpenLayers and Vue.js

Creating IPv6 Mask from IPv6 Prefix Using Javascript: A Step-by-Step Guide

Is it possible for a user to change the data stored in sessionStorage variables?

Using Angular ng-model with Bootstrap Modal is problematic when attempting to use it multiple times

Transform a string into an object using AngularJS $parse function

What could be the reason that angularjs html template requests aren't appearing in the top websites when viewed in a

What is the best way to send a multidimensional char array as a parameter in a C function?

Streamline your processes by automating jQuery AJAX forms

Using Vue Composition API to invoke a child component's method that employs a render function

Tips for keeping the app on the same route or page even after a refresh

Failed attempt in sending JSON array through AJAX to PHP process

Several conditional statements in JSX

Preventing the form from being enabled by default when using 'ng-model'

A function with a specific name for sorting a multidimensional object based on a specified sub-key's value, without anonymity

Aurelia: Understanding the Integration of a View/ViewModel from an npm Package

Deselect a checkbox by selecting a radio button with just Javascript code

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?