Question

我正在从json文件加载数据，我计划在html列表中使用链接，我不确定问题是我是如何编写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>

Answer 1

尝试

<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>

json数据不在html列表中突破

1 个答案: