如何将对象数组传递给jade模板?

时间:2012-10-18 17:44:47

标签: javascript jquery node.js express pug

我想将一组对象从mongodb传递给客户端......

这是对象

var objeto_img=
                            {
                                name:'name of the file',
                                image:'image.jpg url',
                                title:'title of the image',
                                caption:'descripcion of the image',
                                link:"#",
                            };

在某些配置文件中有很多图像,所以这是一个像这样的对象数组

[var objeto_img=
                            {
                                name:'name of the file',
                                image:'image.jpg url',
                                title:'title of the image',
                                caption:'descripcion of the image',
                                link:"#",
                            },var objeto_img=
                            {
                                name:'name of the file',
                                image:'image.jpg url',
                                title:'title of the image',
                                caption:'descripcion of the image',
                                link:"#",
                            },var objeto_img=
                            {
                                name:'name of the file',
                                image:'image.jpg url',
                                title:'title of the image',
                                caption:'descripcion of the image',
                                link:"#",
                            };]

这是服务器代码

res.render('index/perfil_publicacion_contenido',
    {
        datos:datosRecibidos
    })

datosRecibidos是来自mongodb的对象数组

并且我试图在jade中放入一个变量

input(type='hidden',id='imagenes',value=datos.img)

但是当我试图获取对象时

var fotos=$('#imagenes1').val();
            for(foto in fotos)
            {
                console.log(fotos[foto].image)
                console.log(fotos[foto].name)
                console.log(fotos[foto].caption)
                console.log(fotos[foto].title)
            }

控制台日志打印未定义

为什么?如何在客户端正确地从db获取信息? tnx all

1 个答案:

答案 0 :(得分:8)

如果我理解正确,您希望将对象数组序列化为输入的value。试试这个:

- var jsonString = JSON.stringify(datos)
input(type='hidden',id='imagenes',value=jsonString)

第一行应该将对象数组转换为一个字符串,然后可以将其放入输入值。

然后,当您读取该值时,您将不得不解析JSON。

var fotos = $.parseJSON($('#imagenes1').val());

我假设您使用$意味着您正在使用jQuery。

更新:说明

如果您希望服务器内存中的Object可供浏览器中运行的Javascript使用,则必须将该对象“写入”页面。该过程被官方称为序列化,使用Javascript的方法是JSON.stringify。一旦进入输入的value页面,它就是一个字符串。页面上的Javascript必须将该String转换为Object(或者在本例中为Object of Array)。这就是JSON.parse的用武之地。由于旧浏览器没有JSON.parse,你应该使用像jQuery.parseJSON这样的polyfill来确保即使是旧的浏览器也能将String转换为Javascript对象。

顺便说一下,如果您不需要hidden input中的具体数据,但您认为这是最好的方法,那么让我提出另一种方法。如果您的目标是让var fotos包含服务器中datos的值,则可以直接在页面上的<script>标记中执行此操作。以下是如何在Jade中做到这一点:

script
  var fotos = #{JSON.stringify(datos)};

查看有关将对象传递到页面的this question