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>