Question

我有一个存储在服务器中的JSON文件。使用AngularJS我可以调用HTML文件中的所有属性，但属性images和application_photos除外。我在脚本标记中添加了一些调用json数据的代码，但是我做错了。添加的代码已注释。

HTML：

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
    <form action="index.html">
        <input type="submit" value="Home">
    </form>
  <form action="caracteristicas.html">
        <input type="submit" value="Caracteristicas">
    </form>
    <form action="lproduccion.html">
        <input type="submit" value="Atras">
    </form>
    <form action="certificaciones.html">
        <input type="submit" value="Certificaciones">
    </form>
    <form action="works.html">
        <input type="submit" value="Obras">
    </form>
    <form action="dtespacio.html">
        <input type="submit" value="Disena tu Espacio">
    </form>

    <div ng-app="workApp" ng-controller="workCtrl">
        <ul ng-repeat="x in nodes">

            <li>{{x.title}}</li>
            <li>{{x.body}}</li>
            <li>{{x.applications}}</li>
            <li>{{x.features}}</li>
            <li>{{x.product_certifications}}</li>

            <li>{{x.properties_list}}</li>
            <!--<ul ng-repeat="y in application_photos">
                <li>{{y.src}}</li>
            </ul>-->
        </ul>
    </div>
    <script>
        var app = angular.module('workApp',[]);
        app.controller('workCtrl',function($scope,$http){
            $http.get("http://d7.fairis.nimblersoft.com/node/20/content.json")
            .success(function(response){
                console.log(response.node);
                $scope.nodes=response.node;
               //console.log(response.node[0].application_photos);
                //$scope.application_photos=response.node.application_photos;

            });
        });
    </script>
</body>

JSON：存储在http://d7.fairis.nimblersoft.com/node/20/content.json

中

感谢您的帮助！

Answer 1

当您迭代所有nodes（x）时，您还需要访问application_photos上的x：

<ul ng-repeat="y in x.application_photos">
    <li>{{y.src}}</li>
</ul>

Answer 2

使用plunk减去http请求[CORS问题]

http://plnkr.co/edit/99PnJQusybldhpWd8rrU

<body>
  <form action="index.html">
    <input type="submit" value="Home">
  </form>
  <form action="caracteristicas.html">
    <input type="submit" value="Caracteristicas">
  </form>
  <form action="lproduccion.html">
    <input type="submit" value="Atras">
  </form>
  <form action="certificaciones.html">
    <input type="submit" value="Certificaciones">
  </form>
  <form action="works.html">
    <input type="submit" value="Obras">
  </form>
  <form action="dtespacio.html">
    <input type="submit" value="Disena tu Espacio">
  </form>

  <div ng-app="workApp" ng-controller="workCtrl">
    <ul ng-repeat="x in nodes">

      <li>{{x.title}}</li>
      <li>{{x.body}}</li>
      <li>{{x.applications}}</li>
      <li>{{x.features}}</li>
      <li>{{x.product_certifications}}</li>

      <li>{{x.properties_list}}</li>
      <ul>
        <li ng-repeat="y in x.application_photos">{{y.src}}</li>
      </ul>
    </ul>
  </div>
  <script>
    var app = angular.module('workApp', []);
    app.controller('workCtrl', function($scope, $http) {
      $scope.nodes = [{
          "nid": "20",
          "title": "Faidecor",
          "body": "<p>La tecnolog\u00eda Glass Jet, nos permite imprimir cualquier imagen, color o dise\u00f1o directamente sobre el vidrio, haciendo nuestro proceso mas eficiente y satisfaciendo las espectativas del cliente\u00a0<\/p>\n",
          "imagen": null,
          "url": "http:\/\/d7.fairis.nimblersoft.com\/node\/20",
          "applications": "Fachadas verticale e inclinadas, Cubiertas, Pasamanos, Pisos, Mamparas, Puertas, Divisiones de ambientes, Panelerias, Muebles, Mesones de cocinas y ba\u00f1os, etc",
          "application_photos": [{
            "src": "http:\/\/d7.fairis.nimblersoft.com\/sites\/default\/files\/aplicaciones-fotos\/images%20%281%29.jpg",
            "alt": ""
          }, {
            "src": "http:\/\/d7.fairis.nimblersoft.com\/sites\/default\/files\/aplicaciones-fotos\/images%20%284%29.jpg",
            "alt": ""
          }, {
            "src": "http:\/\/d7.fairis.nimblersoft.com\/sites\/default\/files\/aplicaciones-fotos\/images%20%288%29_0.jpg",
            "alt": ""
          }],
          "features": "Perfecto para decoraci\u00f3n, Imprime cualquier tipo de imagen que tenga buena resoluci\u00f3n, Larga duraci\u00f3n en exteriores, Tinta indeleble, Versatilidad en su aplicaci\u00f3n",
          "product_certifications": "Safety Glazing Certification Council SGCC, Sello de Calidad INEN NTE 2067",
          "technical_specifications": null,
          "images": [{
            "src": "http:\/\/d7.fairis.nimblersoft.com\/sites\/default\/files\/lineas-produccion-imagenes\/images%20%284%29.jpg",
            "alt": ""
          }, {
            "src": "http:\/\/d7.fairis.nimblersoft.com\/sites\/default\/files\/lineas-produccion-imagenes\/images%20%285%29.jpg",
            "alt": ""
          }, {
            "src": "http:\/\/d7.fairis.nimblersoft.com\/sites\/default\/files\/lineas-produccion-imagenes\/images%20%286%29.jpg",
            "alt": ""
          }],
          "properties": null,
          "properties_list": "Seguridad Humana, Protecci\u00f3n de Bienes, Estructural, Funcional, Nec"
        }]
        //console.log(response.node[0].application_photos);
        //$scope.application_photos=response.node.application_photos;

      //});
    });
  </script>
</body>

请注意省略＆＃34;节点＆＃34; json的财产。

Answer 3

你缺少x.application_photos。您只有“application_photos”而不是“x.application_photos”。更改为以下内容：

<ul ng-repeat="y in x.application_photos">
      <li>{{y.src}}</li>
    </ul>

在HTML中调用JSON嵌套对象

3 个答案: