【问题标题】:how to render json object in jade and loop through results如何在jade中渲染json对象并循环结果
【发布时间】:2013-04-30 13:35:13
【问题描述】:

当我将一个 JSON 字符串发送到一个玉文件进行渲染时,我只能打印出整个字符串,但不能打印出它的元素。如何打印出特定元素或循环遍历 JSON 字符串?

app.js:

var http    = require('http'), 
    express = require('express'),
    net     = require('net');

var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.logger('dev'));
app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
    var json_string = {"action":"date +%s","result":"1367263074"};
    res.render('index', { layout : 'layout', json: JSON.stringify(json_string) });
})
app.listen(3000);

layout.jade:

!!!5
html
 head
  body
   p !{json}
   p !{json.result}
   p ---
    each val, key in json
     p #{key}: #{val}

预期输出:

{"action":"date +%s","result":"1367263074"}
1367263074
---
action: date +%s
result: 1367263074

实际输出:

{"action":"date +%s","result":"1367263074"}

---
0: {
1: "
2: a
3: c
4: t
5: i
6: o
7: n
8: "
9: :
10: "
11: d
12: a
13: t
14: e
15:
16: +
17: %
18: s
19: "
20: ,
21: "
22: r
23: e
24: s
25: u
26: l
27: t
28: "
29: :
30: "
31: 1
32: 3
33: 6
34: 7
35: 2
36: 6
37: 3
38: 0
39: 7
40: 4
41: "
42: }

【问题讨论】:

    标签: javascript json node.js express pug


    【解决方案1】:

    你为什么要传递一个字符串?试试这个:

    var ob = { action:"date +%s", result:"1367263074"};
    res.render('index', { layout : 'layout', json: ob });
    

    或者这样做:

    -var ob = JSON.parse(json)
    -for(var prop in ob)
     p #{prop}: #{ob[prop]}
    

    【讨论】:

      【解决方案2】:

      在这条线上:each val, key in json 您首先将 JS 对象字符串化(服务器端),不要将其字符串化以将其作为对象。

      所以这一行:

      res.render('index', { layout : 'layout', json: JSON.stringify(json_string) });
      

      变成

      res.render('index', { layout : 'layout', json: json_string });
      

      【讨论】:

        【解决方案3】:

        如果您正在寻找对一系列操作和结果进行循环,请使用 Mathieu Amiot 的建议和以下代码:

        each key in json   
            p !{key.action} !{key.result}
        

        【讨论】:

          猜你喜欢
          • 2014-01-02
          • 2016-12-17
          • 1970-01-01
          • 1970-01-01
          • 2017-06-10
          • 1970-01-01
          • 2015-03-17
          • 2021-05-05
          • 2017-10-29
          相关资源
          最近更新 更多