如何循环JSON数据
如何循环JSON数据
提问于 2020-01-03 08:15:02
我有一个json数据，我想用vue .js制作一个Navbar，我无法通过Navbar循环这些数据。
这就是我试图对我的JSON数据所做的，目前它是静态的，但是我想遍历我所拥有的数据
由于我的JSON数据是动态的，我是从backend获得的，所以我必须根据用户的登录来创建一个导航栏，以便向他/她展示他们允许的任何内容。
我的JSON数据
{
"Dashboard": [
{
"type": "Dashboard",
"link": "Dashboard.html"
}
],
"Graphical Reports": [
{
"type": "Outlet Sales Summary Pai chart",
"link": "Outlet Sales Summary Pai chart.html"
},
{
"type": "Payment mode wise Graph layout",
"link": "Payment mode wise Graph layout.html"
},
{
"type": "Outlet wise Sales Area Chart",
"link": "AreaChart.html"
},
{
"type": "Outlet wise Sales Line Chart",
"link": "LineChart.html"
},
{
"type": "Top 20 Sold Items",
"link": "Top20Items.html"
},
{
"type": "Outlet Wise Quantity And Amount",
"link": "OutletWiseQuantityandAmount.html"
}
],
"Tabular Reports": [
{
"type": "Date wise Outlet wise Sales Summary",
"link": "Date wise Outlet wise Sales Summary.html"
},
{
"type": "Date wise OL Wise Counter wise Sales",
"link": "Date wise OL Wise Counter wise Sales.html"
},
{
"type": "Hourly wise Sales Bet Dates",
"link": "Hourly wise Sales Bet Dates.html"
},
{
"type": "Outlet wise Date wise NoOfBills",
"link": "Date Wise Ol Wise Bill Count.html"
},
{
"type": "Hourly sales Outlet wise Date wise",
"link": "Hourly sales Outlet wise Date wise.html"
},
{
"type": "Percentage Contribution Outlet wise",
"link": "PercentageolWise.html"
},
{
"type": "Outlet wise Item wise Sales With Date",
"link": "MRPL Store Sales With Date.html"
}
],
"Drill down Reports": [
{
"type": "Sales Drilldown Counterwise Bet Dates",
"link": "Sales Drilldown Counterwise Bet Dates.html"
},
{
"type": "Sales Drilldown Billwise Bet Dates",
"link": "Sales Drilldown Billwise Bet Dates.html"
},
{
"type": "Sales Drilldown Itemwise for Date",
"link": "Sales Drilldown Itemwise for Date.html"
},
{
"type": "Linked Sales Report Bet Dates",
"link": "LinkingReport.html"
}
],
"Masters": [
{
"type": "Item Master",
"link": "ItemMaster.html"
}
],
"Setup": [
{
"type": "Change Password",
"link": "ChangePassword.html"
},
{
"type": "User Admin",
"link": "UserAdmin.html"
}
],
"Transactions": [
{
"type": "Indent Request",
"link": "IndentWithCategoryWiseFilter.html"
}
]
}
new Vue({
el: '#app',
data() {
return {
navData: {
"Setup": [{
"menu": "Submenu-1"
},
{
"route": "submenu-2"
}
],
"Report": [{
"menue": "subreport-1"
},
{
"route": "subreport-2"
}
]
}
}
},
})
Vue.config.productionTip = false;
Vue.config.devtools = false;<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 in navData"class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
{{Object.keys(data)}}
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">menu</a>
</div>
</li>
</ul>
</nav>
</div>
我试过了，但是，我没有经历过
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-03 08:55:38
试在下面的代码片段：
<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>
Stack Overflow用户
发布于 2020-01-03 08:43:13
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];
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59575173
复制相关文章
相似问题
腾讯云开发者
