CODEWITHSUNDEEP
javascriptexpresspug
nc14
nc14

Reputation: 559

Rendering Mongo document values in Pug template w/ Express

I'm retrieving documents from Mongo Atlas using the new data API like this :

axios(config)
  .then(function (response) {
    console.log(response.data);
    res.render('profile', {
      snippets: response.data,
  })
  .catch(function (error) {
    console.log(error);
  });
  };

My console.log(response.data) shows the documents correctly like this :

  documents: [
    {
      _id: '6245b82edde6452fece5d27d',
      snippet: '<p>This is a test post in <strong>bold,&nbsp;</strong>in <em>italic,&nbsp;</em>in <span style="text-decoration: underline;">underline,</span> and with a <a href="http://www.google.com">link</a></p>'
    },
    {
      _id: '6245b8fbe9d255ab42528197',
      snippet: '<p>This is a test post in <strong>bold,&nbsp;</strong>in <em>italic,&nbsp;</em>in <span style="text-decoration: underline;">underline,</span> and with a <a href="http://www.google.com">link. A second time!</a></p>'
    }
  ]
}

Then I followed this answer to try render a simple list of these of the snippet values in a table :

table 
        each snippet in snippets
            tr#snippet_list_item
                td #{snippet._id}
                td #{snippet.snippet}

But I get

snippets include [object Object],[object Object]

rendered on the front end instead of the values.

What am I missing? My thinking was... pass the objects, iterate through, access the values for each. But I'm obviously not doing something right.

Upvotes: 0

Views: 82

Answers (1)

nc14
nc14

Reputation: 559

Okay so for people coming to this whilst still learning...

If you ever get this problem, where you are trying to access values inside an array of objects and are getting 'Object Object', make sure to look at the structure of the data you are getting.

See below

documents: [
    {
      _id: '6245b82edde6452fece5d27d',
      snippet: '<p>This is a test post in <strong>bold,&nbsp;</strong>in <em>italic,&nbsp;</em>in <span style="text-decoration: underline;">underline,</span> and with a <a href="http://www.google.com">link</a></p>'
    },
    {
      _id: '6245b8fbe9d255ab42528197',
      snippet: '<p>This is a test post in <strong>bold,&nbsp;</strong>in <em>italic,&nbsp;</em>in <span style="text-decoration: underline;">underline,</span> and with a <a href="http://www.google.com">link. A second time!</a></p>'
    }
  ]
}

My data is structured like this :

'documents'[ 
    {document 1}
    {document 2}
]

Each {document} is an object. But they are all inside an array of objects, which in my case is 'documents'. You can see this by the [] square brackets that the {documents} are contained inside.

So when accessing the values, you first need to access the array by response.data.{$name_of_array}, THEN, you can use dot notation to access the values

so to access the values, you'd do something like :

response.data.{$name_of_array}.{$name_of_value_name}

if accessing all of these, you'll need to iterate through them, if accessing just 1, you can use it's position in the index like this :

response.data.{$name_of_array}[$index_number].{$name_of_value_name}

Hope this helps someone!

Upvotes: 1

Related Questions