I'm loading data from a json file in which i plan to use on html list with links, i'm not sure if the problem is the how i wrote the json file or how i access the data in the file.
according http://jsonlint.com/ the json file is correct
the menu.json file
[
{
"opciones": {
"oferta": [
{
"tipo": "1001"
},
{
"tipo": "1002"
},
{
"tipo": "1003"
},
{
"tipo": "1004"
}
]
}
},
{
"opciones": {
"demanda": [
{
"tipo": "2001"
},
{
"tipo": "2002"
},
{
"tipo": "2003"
}
]
}
}
]
Here is how i try to fill the html list code:
<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>
this is the result:
[{"tipo":"1001"},{"tipo":"1002"},{"tipo":"1003"},{"tipo":"1004"}]
*
- [{"tipo":"2001"},{"tipo":"2002"},{"tipo":"2003"}]
*
what is supposed to do:
*1001
*1002
*etc*2001
*2002
How to avoid this?
EDIT:i have tried
<ul >
<li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta.tipo}}</a></li>
</ul>
