對Sinatra的角度JS調用不返回數據

-1

我試圖通過從Sinatra的JSON獲取Angular js的部分'下載'來從MySQL數據庫獲取信息。我已經寫了下面的代碼，但它不工作，我不知道我的app.rb中的路由是錯誤的還是Angular中的控制器。對Sinatra的角度JS調用不返回數據

如果任何人都可以幫助我解決這個問題，那將是太棒了，因爲我無法在網上找到任何相關的教程。非常感謝。

在app.rb

get "/#/view1/downloadData" do 
#get list of downloads for user 
@download = Download.all(:order => [:downloadID], :limit => 20) 

if @download 
    @download.to_json 
    #log to console if JSON pulled in correctly 
    puts "get list of downloads successful" 
else 
    halt 404 
    #log to console if JSON failed 
    puts "get list of downloads JSON failed 404 displayed" 
end 
end

在諧音/ downloads.html

<p>Manage downloads</p> 
<ul ng-controller="MyCtrl1"> 
    <li>ID: {{download.title}}, Name: {{download.downloadID}}</li> 
</ul>

在JS/controllers.js

//'use strict'; 

/* Controllers */ 

angular.module('myApp.controllers', []). 
controller('MyCtrl1', [function($scope, $http) { 

    //a scope function to load the data. 
$scope = function() { 
    $http.get('/#/view1/downloadData').success(function(data) { 
    $scope.items = data; 
    console.log(data); 
    console.log("data got succesfully"); 
    }); 
}; 
}]) 
.controller('MyCtrl2', [function() { 

}]) 
.controller('MyCtrl3', [function() { 

}]);

來源

2013-10-28 Phil Hudson

'這不是working'是不是一個真正的錯誤描述。另外，測試app.rb是否正常工作應該相當簡單，您已經記錄了調用的結果。 – dirkk

puts返回nil，這可能是您的API不返回任何數據的原因。嘗試在app.rb中反轉你的看跌和回報 – MrRuru

對不起，不工作並不是非常具有描述性。基本上它不返回數據，我不確定故障在哪裏。 –

我會建議使用JavaScript調試器等作爲Chrome Developer Tool來解決問題。問題中的代碼有幾個不同的問題，沒有它就很難進行調試。通過使用JS調試器，可以判斷請求是否正確發佈，是否發佈到正確的URL，以及如何查看客戶端和Sinatra服務器之間傳遞的數據。

讓我們來看看所有的問題。

首先，控制器定義的語法是錯誤的，調試器會顯示TypeError: Cannot set property...錯誤。見Note on Minification of Angular Doc。您需要將此行更改爲如下所示：

app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {

第二個問題是意圖定義範圍函數的行正在銷燬範圍。作用域函數需要一個標識符：

$scope.loadData = function() { ... }

並限定範圍功能並不意味着它被調用。您可以添加一個調用，比如如下：

$scope.loadData();

第三個問題是，$http.get呼叫請求包含#字符，它表示URL的片段的URL，這是大體上相當於請求GET /與參數。在#下定義JSON API沒有什麼好的理由。我會將其更改爲/view1/downloadData。 Sinatra應用程序應該具有相應的GET處理程序。

第四個問題是，部分代碼是指$scope.download，但$http.get的success處理程序設置$scope.items。

最後，基於Sinatra代碼，它返回一個JSON數組。渲染代碼需要使用ng-repeat來呈現所有項目。

JS代碼

var app = angular.module('myApp', []); 
app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) { 
    // a scope function to load the data 
    $scope.loadData = function() { 
     $http.get('/view1/downloadData').success(function(data) { 
      $scope.items = data; 
     }); 
    } 
    $scope.loadData(); 
}]);

HTML代碼

<body ng-controller="MyCtrl1"> 
<ul> 
    <li ng-repeat="item in items">ID: {{item.title}}, Name: {{item.downloadID}}</li> 
</ul>

簡體西納特拉代碼

require 'sinatra' 
require 'json' 

get '/view1/downloadData' do 
    # I'm guessing the database is returning something like this: 
    [{'title' => 'title 1', 'downloadID' => 'ID 1'}, 
    {'title' => 'title 2', 'downloadID' => 'ID 2'} 
    ].to_json 
end

來源

2013-10-28 11:20:32

非常感謝您的詳細解答，我現在將處理這個問題並回復給您。 –

我剛剛實施了更改，但現在偏分集未鏈接並顯示在index page？我認爲這是app.js或控制器中的路由提供程序的問題？ –

您可以看到$ scope.items是否通過設置斷點或放置console.log（）語句來獲取數據。如果'$ scope.items'被正確填充，那麼這就是渲染問題。否則，看看數據是否從服務器返回。 –

對Sinatra的角度JS調用不返回數據

回答

相關問題