使用 Jade 渲染 JSON 响应

Question

我已经回到基础，尝试创建一个调用 REST API、接收一些 JSON 并使用 Jade 在 HTML 中呈现 JSON 数据的简单示例。

我已经尝试了很多方法，但都无法奏效。

我需要将什么代码添加到我的主脚本文件（如下 - lxrclient.js）来实现这一点。我知道我需要添加 express 模块并渲染视图，但是无论我尝试过谁可能的方法，我都无法让它工作。我还添加了我正在使用的翡翠文件。非常感谢任何人对此提供的任何帮助。

//this is my main script file lxrclient3.js

var http = require('http');
var express = require('express');
var app = express();

app.set('view engine', 'jade');

var options = {
    host: '41.193.214.130',
    port: 2510,
    path: '/eiftidemo/clt_list',
    method: 'GET'
};


http.request(options, function(res) {
    var body = '';
    //node of these statemnst excecute

    res.on('data', function(chunk) {
        body += chunk;
    });

    res.on('end', function() {
        var clientsData = JSON.parse(body);
        debugger;

    });
}).end();

app.get("/clientlist", function(req, res){
   res.render('listlxr', {clientd: clientsData});
});

var server = app.listen(3000, function() {
    console.log('Our App is running at http://localhost:3000');
});

这是我的翡翠观

html
  head
    title List of Clients
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")  
  body
    div.row
      div.col-md-3
      div.col-md-6
        div.panel.panel-primary
          div.panel-heading.text-center
            h1 Client List for Hyposure
          div.panel-body
            table.table
              each clients in clientsData
                tr
                  td.media
                    span.bg-info= clients.clientName
                  td.media
                    span.bg-info= clients.clientSurname  

感谢任何可以提供帮助的人

Answer 1

首先，当你说 Jade 我希望你是指 Pug，如果不是，你应该更新到 Pug 的最新版本。

现在，要将数据发送到您的模板以供引擎渲染，您可以发送 JSON 对象，如下所示；

res.get("/", function(req, res)
{
   res.render("page.html", {greet : "Hello"});
}

这是呈现页面并同时发送一些数据的标准方式。

现在在您的 Pug (Jade (Same thing)) 模板中，您可以像这样访问发送的变量；

html
 head
  title List of Clients
    body
     h1 #{greet} <!-- This will print "Hello" -->

这应该让您了解如何将数据呈现到站点上，您也可以发送嵌套对象，并且您只需按照与本示例相同的方式进行操作，但您指向正确的键。例如，如果您要发送以下对象：

{
  greet: {
    message : "Hello",
    who : "Adrian"
  }
}

然后您可以使用以下命令打印值：

#{greet.message} #{greet.who}