[Vuejs]-How to loop JSON data

by

1👍

✅

Try below snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id=app>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <!-- Dropdown -->
      <li v-for="(data,menu) in navData"class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        {{ menu }}
      </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">{{ data[0].menu }}</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      navData: {
        "Setup": [{
            "menu": "Submenu-1"
          },
          {
            "route": "submenu-2"
          }
        ],
        "Report": [{
            "menu": "subreport-1"
          },
          {
            "route": "subreport-2"
          }
        ]
      }

    }
  },

})

Vue.config.productionTip = false;
Vue.config.devtools = false;
</script>
👤Hardik Raval

0👍

var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

for (var i = 0; i < arr.length; i++){
    var obj = arr[i];
    for (var key in obj){
        var attrName = key;
        var attrValue = obj[key];
    }
}
👤HarshaHR

Leave a comment