如何使用Node / Express和Angular将JSON对象从服务器发送到我的视图

I'm trying to build a webapp and I'm stuck at this part: I want to use Contentful to serve my data. Since it's a RESTful service I thought it would be relatively easy to use. They also have a node module, to make my life even easier. Unfortunately, I can't get the data in my view. After hours of googling and on here I've come up with this, but unfortunately it isn't working.

我正在尝试构建一个webapp而且我被困在这个部分:我想使用Contentful来提供我的数据。由于它是RESTful服务,我认为它相对容易使用。他们还有一个节点模块,让我的生活更轻松。不幸的是,我无法在我的视图中获取数据。经过几个小时的谷歌搜索,我在这里得到了这个,但不幸的是它没有用。

Server:

var client = contentful.createClient({
    accessToken: 'token',
    space: 'id',
    secure: true,
    host: 'cdn.contentful.com'
    });

var log = console.log.bind(console);

var movies = client.entries({
    'content_type': '207BVEIb7GcYeCumc2Cmk4'
    }).then(log, log);

app.get('/api/data/movies', function(req, res) {
    res.json(movies);
});

JSON:

[ { sys: 
 { id: '6nEC5yrZwA0YoikiMeQYky',
   revision: 1,
   type: 'Entry',
   locale: 'en-US',
   contentType: [Object],
   createdAt: Mon Sep 15 2014 22:16:10 GMT+0200 (CEST),
   updatedAt: Mon Sep 15 2014 22:16:10 GMT+0200 (CEST),
   space: [Object] },
fields: { movieTitle: 'Guardians of the Galaxy' } } ]

My Controller:

angular.module('MyApp')
.controller('MainCtrl',['$scope', '$http', function($scope, $http) {
    $http.get("/api/data/movies").success(function(data){
    $scope.movieTitle = data.movieTitle;
    alert(JSON.stringify(data));    
    });
 }]);

I want to get the movieTitle into my view, but the retrieved data is this:

我想将movieTitle放到我的视图中,但检索到的数据是这样的:

{"isFulfilled":true,"isRejected":false}

1 个解决方案

#1

The issue is in your server side code. This example code:

问题出在您的服务器端代码中。这个示例代码:

var movies = client.entries({
  'content_type': '207BVEIb7GcYeCumc2Cmk4'
}).then(log, log);

Is assigning a Promise to the movies variable. Unfortunately, it's a promise for the result of the log function, so you should change it to this:

是为电影变量分配一个Promise。不幸的是,它是对日志功能结果的承诺,所以你应该把它改成这样:

var movies = client.entries({
  'content_type': '207BVEIb7GcYeCumc2Cmk4'
});

The next problem is that you are never calling then on the promise to get it's resolved value. The simplest way to deal with this (assuming you never want the movie list to be refreshed) is to just call then inside your request handler:

接下来的问题是,你永远不会在承诺上调用它来获得它的解析值。处理此问题的最简单方法(假设您从不希望刷新影片列表)只是在请求处理程序中调用它:

app.get('/api/data/movies', function(req, res, next) {
  movies.then(res.json, next);
});

This sets up res.json to run if the movies promise resolves successfully, and next to handle any errors.

如果电影承诺成功解析,则设置res.json运行,然后处理任何错误。

If you want the list of movies to be re-retrieved on each request, then you could move the client.entries call into your request handler as well:

如果您希望在每个请求上重新检索电影列表,那么您也可以将client.entries调用移动到您的请求处理程序中:

app.get('/api/data/movies', function(req, res, next) {
  client.entries({
    'content_type': '207BVEIb7GcYeCumc2Cmk4'
  }).then(res.json, next);
});

One final note: it's also possible (and encouraged) to perform these requests directly from the browser, so you wouldn't even need the express app to proxy requests.

最后一点说明:也可以(并鼓励)直接从浏览器执行这些请求,因此您甚至不需要快速应用程序来代理请求。

#1