表不填充從AJAX調用

獲取數據時，我有這非常惱人的問題，我覺得我有一個想法，爲什麼它引起的，但不能爲我的生命得到固定。也許是因爲我不知道編程的基本規則....表不填充從AJAX調用

因此，讓我演示一下這個問題：

HTML：

<!DOCTYPE html> 
<html lang="en" ng-app="angularApp"> 
    <head> 
    <meta charset="utf-8"> 
    <link href="/css/bootstrap.css" rel="stylesheet"> 
    </head> 
    <body> 
    <section> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-md-8"> 
       <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Wall</h3> 
       </div> 
       <div class="panel-body"> 
        <div ng-controller="wallPosts"> 
        <div class="panel panel-default post" ng-repeat="post in posts"> 
         <div class="panel-body"> 
         <div class="row"> 
          <div class="col-sm-3"> 
          <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options"> 
          </canvas> 
          </div> 
         </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div><!-- col-md-8 end --> 
      </div> 
     </div> 
    </section> 

    <!-- Bootstrap core JavaScript--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="/jsLib/bootstrap.js"></script> 
    <script src="/jsLib/angular.min.js"></script> 
    <script src="/angular/angularApp.js"></script> 
    <script src="/jsLib/chart.js/dist/Chart.min.js"></script> 
    <script src="/jsLib/angular-chart.js/dist/angular-chart.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    </script> 
    </body> 
</html>

角控制器：

var angularApp = angular.module('angularApp', ['chart.js']); 

angularApp.controller('wallPosts', ['$scope', '$http', function($scope, $http){ 
    $scope.posts = []; 
    $scope.labels = ["Agree", "Disagree"]; 
    $scope.data = []; 

    $http.get('/api/posts') 
     .success(function(res){ 
      $scope.posts = res.posts; 
      //$scope.data = [100, 500]; 
      $scope.data = [res.posts.agreeCounter, res.posts.disagreeCounter]; 
     }) 
     .error(function(data, status){ 
      console.log(data); 
     }); 
}]);

API響應如下所示：

"posts": [ 
     { 
      "postID": "postID1233", 
      "title": "testTitle", 
      "description": "testDescription", 
      "agreeCounter": 100, 
      "disagreeCounter": 50 
     }]

的問題是，「畫布」似乎正在產生右遠沒有我經過數據。當我將$ scope.data作爲[100，50]（靜態）傳遞時，它可以工作。

順便說一句，在res.posts工程，我已經測試與post.title，post.description等（它也有post.agreeCounter），所以這不是問題。

那我怎麼去整理了這一點？任何輸入都會有幫助。再次

感謝，傻眼

來源

2016-07-15 Shayan Khan

你能PLZ添加JSON從正在添加的服務器？ typeof res.posts.agreeCounter'打印了什麼類型？ –

數據返回爲空。 res.posts的作品，因爲我已經使用res.title，res.description但是當我使用它的畫布，它不起作用。無論如何，我已經更新了原來的職位與響應。感謝您的光臨 –

如果數據爲'null'，您如何期待您的圖表工作？ :) –

看來你需要一個圖表每一個崗位，對不對？

更改您的模板來獲取數據的每一個崗位

<div class="panel panel-default post" ng-repeat="post in posts"> 
    <div class="panel-body"> 
    <div class="row"> 
     <div class="col-sm-3"> 
     <canvas class="chart chart-pie" 
      chart-data="post.data" 
      chart-labels="labels" 
      chart-options="options" 
     ></canvas> 
     </div> 
    </div> 
    </div> 
</div>

和填充post.data每個進來的崗位

$http.get('/api/posts') 
    .success(function(res) { 
    $scope.posts = res.posts; 

    // populate post.data 
    $scope.posts.forEach(function(post) { 
     post.data = [post.agreeCounter, post.disagreeCounter]; 
    }); 
    })

BTW的ID 必須是文檔中唯一。您不應使用ng-repeat內的靜態ID（id="pie"）。它將生成具有相同ID的多個節點。

來源

2016-07-15 06:22:50

這工作！我仍然必須瞭解它是如何工作的，所以會深入研究。此外，該id應該是相同的，因爲我將使用CSS，但這不是問題。感謝一百萬人！你救了我的命 –

@ShayanKhan如果你有多個元素來應用CSS，你應該使用class而不是id。其實你已經說了'圖表餅'。 –

好吧惡人。對於整個事情（事實上已經過了10年）而言，這是新手，從零開始，從Node + MongoDB開始工作，現在進入前端。再次感謝隊友！ –

表不填充從AJAX調用

回答

相關問題