javascript - Express 将外部 Json 渲染为 jade

Question

我有一个文件 (api.js)，当我使用 node.js 在终端中调用它时，它会给出一个有效的 JSON 响应。我使用请求 promise 来执行 http 请求，该应用程序是一个 Express 样板。

现在我想将该响应添加到 Jade 文件并让 Jade 迭代 JSON 结果。

如何让express使用这个文件，然后传递给jade？

其次但不是必需的，我如何在 Jade 中获得一个按钮来使用相同的 api 执行 POST 请求，或者前端如何调用后端并在前端显示结果？

这是我的 api 文件 api.js:

var rp = require('request-promise');

var initGet = {
  uri: 'http://www.jsonapi.com/get',
  method: 'GET',
  headers: {"Content-Type": "application/json"}
};

var initPost = {
  uri: 'http://www.jsonapi.com/post',
  method: 'POST',
  headers: {"Content-Type": "application/json"},
  data: {},
  resolveWithFullResponse: true
};

var apiCall = function apiCall(options) {
// if request is GET
  if (options.method === 'GET') {
    rp(options)
      .then(function (res) {
        /// I assume this is where the response is sent to jade
      })
      .catch(console.error);
  }
// if request is POST
  else {
    rp(options)
      .then(function (res) {
        /// I assume this is where the response is sent to jade
      })
      .catch(console.error);
  }
};

var apiGet = function apiGet() {
  apiCall(initGet);
};

var apiPost = function apiPost(input) {
  initPost.data = input;
  apiCall(initPost);
};

// example of data in POST
apiPost({
  user: 2,
  event: 'World Cup 2018',
  name: 'Brazil'
});

module.exports = {
  apiGet: apiGet,
  apiPost: apiPost
};

在我的 jade 文件中:

extends layout
block content
  .title
    h1
      | App
  .ui
    each val in res
    .ui_box
      .ui_box__inner
        .event
          span val.event
        .name
          span val.name
      .drop
        p show drop down
        .arrow
    .ui_box.dropdown
      .submit-button
        p submit
        //submit POST

Answer 1

这是我经过反复试验后的解决方案!!!

我继续使用 request用于我对外部 jSON api 的 http 调用。

api.js:

var request = require('request'); // require in request
var initGet = {uri: 'http://linkToApi.com/get'};
var initPost = {uri: 'http://http://linkToApi.com/post'};

var apiCaller = function (url, cb) {
  //use request to make the external http call to the JSON api
  request({
    url: url,
    json: true
  }, function (error, response, body) {

    if (!error && response.statusCode === 200) {
      cb(body);// Send body/response to callback
    }
  })
};
// Call the api with a call back
var apiGet = function(cb) {
  return apiCaller(initGet.uri, cb);
};

var apiPost = function(post, cb) {
  return apiCaller(initGet.uri + post, cb);
};
// Export the functions for external access
module.exports = {
  apiGet: apiGet,
  apiPost: apiPost
};

现在是快速路线:

var api = require('./api');
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  //call the api apiGet and create callback function
  api.apiGet(function (data) {
    // render to the index.jade and pass the data from api call
    res.render('index', { result :data});
  });
});

最后在 index.jade 文件中:

block content
  .ui
//*** make sure the indentation is correct 'for' otherwise it doesn't parse!!
    for data in result //iterate through the results
      .ui_box
        .ui_box__inner
          .event
            span #{data.event} // here pick out the jSON you require
          .name
            span #{data.name}