Question

我在我的角度网络应用程序的底部制作一个简单的喜欢/不喜欢的系统。我试图从JSON文件中获取数据，但没有显示任何内容（正如您在底部here中看到的那样）。代码的相关部分如下：

的index.html

＆＃13;

mydf_new<-mydf[-2]

＆＃13;

app.js

＆＃13;

<div class="content" id="sub-section">
      <div class="text-area">
          <div class="text" style="color:#3A3A3A">
              Dersom du likte eller ikke likte appen kan du rate den under.<br>
          </div>
      </div>
      <div class="small"></div>
      <div>
          <table style="text-align:center; font-size:1em" class="table-responsive table" ng-controller="rateCtrl">
              <tr>
                  <td>Jeg likte den!</td>
                  <td>Jeg likte den ikke!</td>
              </tr>
              <tr>
                  <td><p class="likes" ng-click="addLike()">+{{likes}}</p></td>
                  <td><p class="dislikes" ng-click="addDislike()">-{{dislikes}}</p></td>
              </tr>
          </table>
      </div>
  </div>

＆＃13;

rating.json

＆＃13;

.controller('rateCtrl', function ($scope, $http) {
      $http.get('rating.json').success(function(data) {
          $scope.likes = data.likes;
          $scope.dislikes = data.dislikes;
          $scope.addLike = function () {
              $scope.likes = $scope.likes + 1;
          };
          $scope.addDislike = function () {
              $scope.dislikes = $scope.dislikes + 1;
          };
      });
  });

＆＃13;

如果有人能告诉我什么是错的，我将非常感激。

Answer 1

您错误地从响应中解析数据。你应该这样做：

$scope.likes = data[0].likes;
$scope.dislikes = data[1].dislikes;

因为rating.json实际上包含带有两个对象的数组。

但我不认为以这种方式存储数据是一种好习惯。如果您有机会更改json的结构，那就更好了（使用这种结构，您的代码应该可以正常工作）：

{
   "likes": 12,
   "dislikes": 0
}

并且您不需要为变量和函数添加rating.前缀，因为它们是在$scope定义的。

<tr>
   <td><p class="likes" ng-click="addLike()">+{{likes}}</p></td>
   <td><p class="dislikes" ng-click="addDislike()">-{{dislikes}}</p></td>
</tr>

Answer 2

我将功能分开，因为它们没有意义。我也改变了json格式，因为它们不应该是一个数组，特别是喜欢和不喜欢总是那样，除非你的json数据是基于每个用户。那是我将使用数组的时候。现在，这是一个简单的对象。

另外，我注意到你正在使用controllerAs。这是一件好事，因为现在我们可以删除邪恶的$ scope。你会注意到我不再使用$ scope了。 :)你的代码也无法正常工作的原因是你使用带有$ scope的controllerAs来拉它。那不行。

app.controller('rateCtrl', function($http) {
   this.ratingData = {};

   this.addLike = function () {
      this.ratingData.likes = this.ratingData.likes + 1;
      console.log('add like', this.ratingData.likes);
    };
    this.addDislike = function () {
      this.ratingData.dislikes = this.ratingData.dislikes + 1;
      console.log('add disklike', this.ratingData.dislikes);
    };

    $http.get('rating.json').success(function(data) {
      console.log('this', this);
      this.ratingData = data;
      console.log(this.ratingData);
    }.bind(this));
});

这是一个你想要完成的实时运行代码。你可以玩它 - http://plnkr.co/edit/aWB5ym0p3Sgtqv9Mxs0r?p=preview

Answer 3

您的应用未正确引用rating.json中的属性。如果按照lcycool和charlietfl的建议重新格式化JSON不起作用，则可能是引用错误，您应该考虑指定文件的完整路径或将其放在与app.js相同的文件夹中

我相信我发现了这个问题。 {{rating.likes}}引用$ scope.rating.likes，这是未定义的。将其更改为{{likes}}（ref：$ scope.likes），它应该可以正常工作。

Answer 4

您的JSON格式与您尝试通过JS对象访问它的方式不匹配。这就是你解决这个问题的方法。

在这一行设置一个断点：

$scope.likes = data.likes;

转到控制台并输入data

现在您将看到data对象的结构。探索它并以彼此匹配的方式更改您的代码（或JSON）。

从JSON获取数据时没有显示任何内容

4 个答案: