为什么只有部分 JSON 数据而不是全部发布到 DOM？答案

【问题标题】：Why is only some of the JSON data posting to the DOM rather than all of it?为什么只有部分 JSON 数据而不是全部发布到 DOM？
【发布时间】：2018-06-22 16:54:40
【问题描述】：

我正在尝试使用 ng-repeat 和 AngularJS 将 JSON 数据发布到 DOM。它有效，但并非适用于一切。只有随机的数据被发布。我假设问题出在ng-repeat 中。我做错了什么？

它是这样的：

您可以看到某些部分是如何出现空白的。以下是我将数据记录到控制台时的样子：

这是我的html：

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://dogdatabase-d31f.restdb.io/rest/_jsapi.js"></script>
</head>

<div ng-app="app" style="margin:45px;" ng-controller="ctrl as $ctrl">
<ul>
    <li class="list" style="list-style:none;" ng-repeat="dog in $ctrl.dogs"><strong>{{dog.breed}}</strong>
        <br>
        Description: <span ng-repeat="description in dog.description">{{description}}</span>
        <br>
        Size: <span ng-repeat="size in dog.size" style="color:blue;">{{size}}</span>
        <br>
        Lifespan: <span ng-repeat="lifespan in dog.lifespan" style="color:green;">{{lifespan}}</span>
        <br><br>
    </li>
</ul>
</div>

<script type='text/javascript' src='dogapp.js'></script>
</body>
</html>

这是 JS 文件：

angular.module('app', [])
  .service('dogsService', function($http) {
    var service = {};
    service.getDogs = function() {
      return $http.get('https://dogdatabase-d31f.restdb.io/rest/dogs', {headers: {
        'x-apikey': 'xxxxxxxxxxxxxxxxxxxxxxx'
        }
      }).then(response => response.data);
    };
    return service;
  })
  .controller('ctrl', function(dogsService) {
    var _this = this;
    this.dogs = [];
    dogsService.getDogs().then((data) => {
      _this.dogs = data;

    }).catch((error) => {
      console.error(error);
    });
  });

【问题讨论】：

Only random pieces of data are getting posted 我们需要更多详细信息。您的意思是未显示数组的某些元素或未显示对象的某些属性？你能给我们更多关于对象属性的信息吗？ <span ng-repeat="description in dog.description"> 也是 description,size 和 lifespan 数组？
是 dog.description 数组吗？为什么你在跨度上使用ng-repeat？你也检查过来自服务的数据吗？可能缺少属性。
我刚刚在上面添加了另一张图片，说明当我将数据记录到控制台时会发生什么。但是，是的，有些元素没有出现。描述、大小和寿命是 JSON 中的属性。

标签： javascript angularjs json dom angularjs-ng-repeat

【解决方案1】：

我认为现在应该可以使用了

<li class="list" style="list-style:none;" ng-repeat="dog in $ctrl.dogs"><strong>{{dog.breed}}</strong>
    <br>
    Description: <span>{{dog.description}}</span>
    <br>
    Size: <span style="color:blue;">{{dog.size}}</span>
    <br>
    Lifespan: <span style="color:green;">{{dog.lifespan}}</span>
    <br><br>
</li>

【讨论】：

删除了 ng-repeats