從JSON獲取數據時沒有顯示

Question

我在我的角度web應用程序的底部製作了一個簡單的喜歡/不喜歡的系統。我試圖從JSON文件中獲取數據，但沒有顯示出來（如您在底部here中看到的那樣）。代碼的相關部分是如下：

的index.html

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

app.js

.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; 
 
      }; 
 
     }); 
 
    });

rating.json

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

我會很感激，如果有人能告訴我什麼是錯。

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

您的應用未正確引用rating.json中的屬性。如果按照lcycool和charlietfl的建議重新格式化JSON，則很可能是參考錯誤，您應該考慮指定文件的完整路徑或將其放置在與app.js相同的文件夾中。我相信我發現了這個問題。 {{rating.likes}}引用$ scope.rating.likes，這是未定義的。將其更改爲{{likes}}（ref：$ scope.likes），它應該可以工作。

Answer 3

您的JSON格式與您試圖通過JS對象訪問它的方式不匹配。這就是你如何解決這樣的問題。

在這條線把一個破發點：

$scope.likes = data.likes; 

進入控制檯，輸入data

現在你會看到你的data對象的結構。探索它並改變你的代碼（或JSON）與它們相匹配的方式。

Answer 4

我分開了功能，因爲它們沒有意義。我也改變了json格式，因爲它們不應該是一個數組，特別是喜歡和不喜歡將永遠是這樣的，除非你的json數據是每個用戶的基礎。那時我會使用數組。現在，這是一個簡單的對象。

另外，我注意到你正在使用controllerAs。這是一件好事，因爲現在我們可以刪除邪惡的$範圍。你會注意到我沒有再使用$ 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