how to pass an array of objects to jade template?

Question

i want to pass an array of objects from mongodb to the client...

this is the object

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

in some profiles the are many images so the is an array of objects like this

[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:"#",
                            };]

this is the server code

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

datosRecibidos is an array of objects from mongodb

and im trying to put in a variable inside jade

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

but when i try to get the objects

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)
            }

the console log print undefined

why is that??? how can i get the information from db correctly in the client??? tnx all

Answer 1

If I understand correctly, you want to serialize the array of objects into the value of the input. Try this:

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

The first line should turn the array of objects into a string which can then be placed into the value of the input.

Then, when you read the value, you will have to parse the JSON.

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

I'm assuming that your use of $ implies that you are using jQuery.

UPDATE: Explanation

If you want an Object that is in memory in your server to be available to the Javascript running in the browser, you have to "write" that Object onto the page. That process is officially called serialization and the way to do that with Javascript is JSON.stringify. Once on the page in the value of the input, it is just a String. Javascript on the page has to turn that String into an Object (or in this case, an Array of Objects). That's where JSON.parse comes in. Because older browsers don't have JSON.parse, you should use a polyfill like jQuery.parseJSON to ensure that even older browsers will be able to turn the String into a Javascript Object.

By the way, if you don't need the data specifically in the hidden input but you think that that is the best way to do it, let me suggest another way. If your goal is to have var fotos contain the value of datos from the server, you can do that directly in a <script> tag on the page. Here's how to do it in Jade:

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

Check out this question about passing Objects to the page.