NodeJS + JSON + jQuery:将JSON-object表单Node-backend发送到jQuery-frontend

时间:2012-06-11 19:57:34

标签: jquery json node.js post ejs

我正在尝试将带有ejs模板引擎的JSON-object形式的MongoDB发送到页面。这是我的DB(一个JSON对象)的响应:

"suppliers": [
    {
        "lastname": "lastname1",
        "firstname": "firstname1",
        "middlename": "middlename1",
        "mobtel": "mobtel1",
        "worktel": "worktel1",
        "email": "email1"
    },
    {
        "lastname": "lastname2",
        "firstname": "firstname2",
        "middlename": "middlename2",
        "mobtel": "mobtel2",
        "worktel": "worktel2",
        "email": "email2"
    }
]

当我从数据库中获取对象时,我必须将其字符串化为str以作为EJS模板引擎的var发送:

var myJSONText = JSON.stringify(doc.suppliers);
profile["suppliers"] =myJSONText;
...
res.render('profile.ejs',{profile:profile});

在前端,我得到一个带有json数据的普通字符串。 我通过jQuery解析它到一个对象:

var jsonObject = jQuery.parseJSON('<%= profile.suppliers %>');
for (var i=0; i<jsonObject.length; i++){
    //trying to show field 'name' for every supplier
    alert(jsonObject[i]['lastname']);
}

......它不起作用,但应该提醒我两次。我试图检查一个纯文本的JSON字符串,来到前端,并找到了这样的符号:

[{&quot;lastname&quot;: &quot; ... 

似乎jQuery.parseJSON无法从此类字符串创建有效对象。我做错了什么?谢谢!

更新:嗯,我已将代码转换为:

NodeJS代码:

profile["suppliers"] =doc.suppliers;
res.render('profile.ejs', { profile:profile });

jQuery代码:

for (var i=0; i<'<%= profile.suppliers %>'.length; i++){
//trying to show field 'name' for every supplier
alert('<%= profile.suppliers %>'[i]['lastname']);
}

它给了我永无止境的未定义警报循环。

更新2:我已更新了我的源代码,因此:

的NodeJS:

var myJSONText = JSON.stringify(doc.suppliers);
profile["suppliers"] =myJSONText;
res.render('profile.ejs',{profile:profile});

客户端:

var jsonObject = <%- profile.suppliers %>;
$.each(jsonObject, function(item) {
    alert(item.lastname);
});

生成的源代码:

var jsonObject = [{"lastname":"lastname1","firstname":"firstname1","middlename":"middlename1","mobtel":"mobtel1","worktel":"worktel1","email":"email1"},{"lastname":"lastname2","firstname":"firstname2","middlename":"middlename2","mobtel":"mobtel2","worktel":"worktel2","email":"email2"}];

似乎没问题,但仍然给我未定义的警报。但是,它仅提醒两次,这意味着它正确解析JSON并且无法访问lastname属性?

2 个答案:

答案 0 :(得分:9)

正确诊断后,{J}中插入了&quot;个。这会使其无效,从而阻止其被解码。

这是因为在ejs中,<%= ... %>执行html输出转义,因此&quot;。您需要使用<%- profile.suppliers %>来避免这种情况。

无需在客户端上使用JSON.parse:JSON已经是有效的javascript代码,因此可以直接插入到代码中,而不是存储为字符串文字。

var jsonObject = <%- profile.suppliers %>;
$.each(jsonObject, function() {
    alert(this.lastname);
});

答案 1 :(得分:1)

正如Wes所说,我认为你正在进行不必要的字符串化/解析。

试试这个:

var suppliers = // your JSON source

$(suppliers).each(function() {
   alert(this.lastname);
});