Wednesday, 19 April 2017

How to read with VueJs result from MongoDB

Using NodeJS, I am retrieving data from MongoDB and trying to show the list of result. The retrival works and the data arrives to my html. I can see in Chrome an array with N objects and the v-for directive creates N items in my HTML. But, it can't access the fields inside each object in the array. It's all empty.

This is my HTML:

<div id="app">
    <ul class="collection">
        <li v-for="item in items" class="collection-item avatar" :key="item._id">
          <span class="title"></span>
          <p> <br>
             
          </p>
          <a href="/list/" class="secondary-content"><i class="material-icons">send</i></a>
        </li>    
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        items: []
      },
      mounted: function() {
        var that = this;
        axios.get('/api/journal')
            .then(function(response) {
                if(response.status = 200) {
                    that.items = response.data;                     
                    console.log(that.items);
                } else {
                    console.log('error');
                }
            })
            .catch(function(error) {
                console.log(error);
            });
      },
      methods: {

      }   
    })
</script>

In the server, this is how I retrieve and return the data:

.get(function(req, res) {
        Journal.find(function(err, jour) {
            if (err)
                res.send(err);

            res.json(jour);
        });
    });  

And, finally, looking at the inspector in Chrome, I can see that I get the data and it looks like this:

Array[2]0: Object1: Object__ob__: Observerlength: 2__proto__: Array

I am positive I am accessing the right field names, with the correct names.

What could be wrong? Thanks



via Felipe Caldas

No comments:

Post a Comment