我正在从json文件加载数据,我计划在html列表中使用链接,我不确定问题是我是如何编写json文件或我如何访问数据在文件中。
根据http://jsonlint.com/ json文件是正确的
menu.json文件
[
{
"opciones": {
"oferta": [
{
"tipo": "1001"
},
{
"tipo": "1002"
},
{
"tipo": "1003"
},
{
"tipo": "1004"
}
]
}
},
{
"opciones": {
"demanda": [
{
"tipo": "2001"
},
{
"tipo": "2002"
},
{
"tipo": "2003"
}
]
}
}
]
以下是我尝试填写html列表代码的方法:
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>test html</title>
<script src="json_load_menu.js"></script> <!--script que cargar archivo json-->
<link rel = "stylesheet" type = "text/css" href = "./css/style.css" /> <!--css con colores de celdas -->
</head>
<body ng-controller="menuCtrl">
<div class="container">
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.demanda}}</a></li>
</ul>
</div>
</body>
</html>
这是结果:
[{&#34; TIPO&#34;:&#34; 1001&#34;},{&#34; TIPO&#34;:&#34; 1002&#34;},{&# 34; TIPO&#34;:&#34; 1003&#34;},{&#34; TIPO&#34;:&#34; 1004&#34;}]
*
- [{&#34; TIPO&#34;:&#34; 2001&#34;},{&#34; TIPO&#34;:&#34; 2002&#34;},{&#34; TIPO& #34;:&#34; 2003&#34;}]
*
应该做什么:
* 1001
* 1002
*等* 2001
* 2002
如何避免这种情况?
编辑:我试过了<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta.tipo}}</a></li>
</ul>
答案 0 :(得分:2)
尝试
<ul>
<li ng-repeat="menuOpcion in menu[0].opciones.oferta"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>
<ul >
<li ng-repeat="menuOpcion in menu[0].opciones.demanda"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>