Javascript 对Sinatra的Angular JS调用不返回数据_Javascript_Mysql_Ruby_Angularjs_Sinatra

Javascript 对Sinatra的Angular JS调用不返回数据

javascript mysql ruby angularjs

Javascript 对Sinatra的Angular JS调用不返回数据,javascript,mysql,ruby,angularjs,sinatra,Javascript,Mysql,Ruby,Angularjs,Sinatra,我正试图从Sinatra获得Angular js的部分“下载”，以便通过JSON从MySQL数据库获取信息。我已经写了下面的代码，但它不起作用，我想知道是app.rb中的路由错误，还是Angular中的控制器错误如果有人能帮我解决这个问题，那就太棒了，因为我在网上找不到任何相关的教程。非常感谢在app.rb中 get "/#/view1/downloadData" do #get list of downloads for user @download = Download.all(:or

我正试图从Sinatra获得Angular js的部分“下载”，以便通过JSON从MySQL数据库获取信息。我已经写了下面的代码，但它不起作用，我想知道是app.rb中的路由错误，还是Angular中的控制器错误

如果有人能帮我解决这个问题，那就太棒了，因为我在网上找不到任何相关的教程。非常感谢

在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

在partials/downloads.html中

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

我建议使用JavaScript调试器（如Chrome Developer Tool）来解决这些问题。这个问题中的代码有几个不同的问题，没有它就很难调试。通过使用JS调试器，您可以判断请求是否正确发出，是否发送到正确的URL，还可以查看客户端和sinatra服务器之间传递的数据

让我们调查一下所有的问题

首先，控制器定义的语法错误，调试器将显示

TypeError:cannotsetproperty…

error。看见您需要将该行更改为以下内容：

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

的

成功

处理程序正在设置

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

它不工作

不是真正的错误描述。另外，测试app.rb是否工作应该相当简单，因为您已经记录了调用的结果。put返回nil，这可能就是API不返回任何数据的原因。尝试在应用程序中反转您的卖出和卖出。对不起，不工作不是很好的描述。基本上，它没有返回数据，我也不确定故障在哪里。你是说反转if语句吗？我是说反转“@download.to_json”和“put”get list of downloads successful”行谢谢你的详细回答，我现在会处理这个问题，然后再与你联系。我刚刚实现了更改，但是现在部分没有链接并显示在索引页上？我假设这是app.js中的路由提供程序或控制器的问题？您可以通过设置断点或放置

console.log（）

语句来查看$scope.items是否正在获取数据。如果正确填写了

$scope.items

，则这就是渲染问题。否则，请查看数据是否从服务器返回。我想我只是对从服务器返回的数据有异议。。您提供的JSON工作正常，但当它从my db中将其拉入时，会带来一个空数组：/

<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