Vue JS returns [__ob__: Observer] data instead of my array of objects

Can also try this:

var parsedobj = JSON.parse(JSON.stringify(obj))
console.log(parsedobj)

It was brought by Evan You himself here and more info on that here

But waiting for the answer is a first step.

This happens because Vue js convert every item in the data to something that can be observed. So it makes sense if you console log something in the data. The output will be something wrapped into an observer.

To have a better vision on your data I suggest you to install the Vue dev tools. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Here is my solution:

add new method something like log to your $root component. App.vue's created is recommended:

this.$root.log = function log() {
  for (let i = 0; i < arguments.length; i += 1) {
    if (typeof (arguments[i]) === 'object') {
      try {
        arguments[i] = JSON.parse(JSON.stringify(arguments[i]));
      } catch (e) {
        console.error(e);
      }
    }
  }
  console.log(...arguments);
};

just call this.$root.log(this.pigeons) in your component.

My result:

BEFORE:

AFTER:

You should probably wait for the fetch to finish then console.log the result ..

created(){
    this.fetchPigeons().then(() => console.log(this.pigeons));
},

The way you were doing it you were logging the result synchronously so it gets executed before the fetch is done.

Edit: Also as @barbsan pointed out in his comment below your fetchPigeons needs to return a promise for then to work. fetch returns a promise so you just need to return fetch in fetchPigeons

fetchPigeons(){
    return fetch('api/racingloft')
    .then(res => res.json())
    .then(res => {
        console.log(res.data); // Here I get what I need
        this.pigeons = res.data;
    })
}

The best way possible

obj2 = JSON.stringify(obj)
obj3 = JSON.parse(obj2)

Or

obj2 = Object.assign([], obj)

It was brought by Evan You himself here and more info

You can use v-if directive to render the component once the data is there.

<h3 v-if="pigeons.length > 0">{{ pigeon.id }}</h3>

As mentioned by Husam Ibrahim, you should wait the async fetch() function to resolve. Another approach could be use async/await in your function:

methods: {
    async fetchPigeons(){
        await fetch('api/racingloft')
               .then(res => res.json())
               .then(res => {
                   console.log(res.data);
                   this.pigeons = res.data;
               })
    }
}

And then it should work:

<template>
  <div>
    <h2>Pigeons in the racing loft</h2>
    <div class="card-content m-b-20" v-for="pigeon in pigeons" v-bind:key="pigeon.id">
        <h3>{{ pigeon.id }}</h3>
    </div>
  </div>
</template>

Thank you for all your suggestion. Things worked on my end by just using "const".

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

Thanks, Ranjit

Basically, what you've done is that the function fetches the pigeon array, but as its running in parallel, you called the console.log. Easy fix:

this.fetchPigeons().then(()=>{
  console.log(this.pigeons);
}

I got the same problem still stuck ...

Wrote these according to Evan(Vue Author) JSON.parse(JSON.stringify(res.data)) method, But why can't normal data?

  methods: {
    async getdata() {
      console.log(1);
      await axios.get(API).then((res) => {
          console.log(2);
          if (!this.dataList.length) {
            this.dataList = JSON.parse(JSON.stringify(res.data));
            console.log(3);
            console.log(res.data, 'res.data ');
            console.log(this.dataList, 'this.dataList')
            console.log('----------check-----------',JSON.parse(JSON.stringify(res.data)));
          }
        })
        .catch(err => {
          console.error('failed: ' + err);
        })
      console.log(4);
    },

If you're returning an object instead an array and it has defined key props:

data () {
  return {
    object: {
      definedKey: [],
      anotherDefinedKey: []
    }
  }
}

Try check if the keys returned by your fetch are the same defined in your object, if you don't fulfill your object defined keys Vue will assume that you're still waiting for them.

If your goal is debugging WHAT included in Observer Vue instance, this is my solution:

Print out that variable in template block belongs to your Component

After that, you can reformat the structure of the output to observe the detail.

For example:

<template>
  <div>
    {{ pigeons }}
  <div>
</template>

Another way, if you wanna see it in console, you should put the console.log into mounted phase. Because at created phase, the this.pigeons still be empty. Ref: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Hope this helpful.

this is a good question. I do face the same issue, this should be due to the before and after of the async returns which created two object id.

may solved by splitting into two functions instead of complete in one single function

created(){
    this.fetchPigeons();
    console.log(this.pigeons); // Here I got the observer data instead my array
},

methods: {
    async fetchPigeons(){
        await fetch('api/racingloft')
        .then(res => res.json())
        .then(res => {
            this.loadPigeonsData(res.data)
        })
    },
    loadPigeonsData(_data){
      console.log(_data); // Here I get what I need
      this.pigeons = _data;
    }


}

Destructuring the data works:

console.log({...obj})

this.pigeons = {...res.data};

This might sold the issue.