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

Question

I've created a page where I want to get all my data from the database with an API call, but I'm kinda new to VueJS and Javascript aswell and I don't know where I'm getting it wrong. I did test it with Postman and I get the correct JSON back.

This is what I get:

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

This is what I want:

(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 139]
length: 140
__ob__: Observer {value: Array(140), dep: Dep, vmCount: 0}
__proto__: Array

Thats my Vue template file:

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

<script>
export default {
    data(){
        return{
            pigeons: [],
            pigeon: {
                id: '',
                sex: '',
                color_id: '',
                pattern_id: '',
                user_id: '',
                loft_id: '',
                country: '',
                experience: '',
                form: '',
                fatique: ''
            },
            pigeon_id: ''
        }
    },
    created(){
        this.fetchPigeons();
        console.log(this.pigeons); // Here I got the observer data instead my array
    },

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

I've tried to do it with axios aswell, but it gave me exactly the same thing. When I console it from the method it gives my data, but outside it just gives nothing.

You're trying to log the data in created() before the asynchronous fetch completes, so it's still empty (except for the Observable that Vue uses to detect changes in the data, such as when the fetch completes, so it can re-render the component.) — Daniel Beck, Oct 18 '18 at 20:13

guillim · Answer 1 · 2019-11-11T21:52:05.803

112

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.

edited Nov 11 '19 at 21:52

answered Mar 26 '19 at 17:02

guillim

1,517
1
12
16

2

why doesnt this help me and one who asked the problem, solve the problem? i tried all of the asnwer from below except https://stackoverflow.com/a/56013942/5057913. how couldnt figuer out where to keep the code. i get empty array when i use teh above code when i do have array sfull of value on that observer – Saugat Thapa Apr 19 '20 at 12:13
This fixed my problem, thank you. – tahnoon Jan 08 '22 at 14:50

score 15 · Answer 2 · answered Oct 18 '18 at 12:12

15

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

answered Oct 18 '18 at 12:12

Kevin LE GOFF

773
8
25

Yes thanks. I use Vue dev tools. But when I use it I only see =$vm0, nothing else even if I click on it. – shawnest Oct 18 '18 at 15:58
Are you looking at the good component? Could you add a screenshot of what you see in the dev tools. It will help to figure out what is going on. – Kevin LE GOFF Oct 19 '18 at 08:23

mudin · Answer 3 · 2019-05-07T00:25:51.470

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:

Husam Ibrahim · Answer 4 · 2018-10-18T12:39:54.877

6

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

edited Oct 18 '18 at 12:39

answered Oct 18 '18 at 12:08

Husam Ibrahim

6,999
3
16
28

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'then' of undefined" found in ---> at resources/js/components/Pigeons.vue I get this one. Neither the console, nor the rendering shows me that I have objects. – shawnest Oct 18 '18 at 12:10
1

@HusamIbrahim `fetchPigeons` doesn't return promise, you need also to add `return` before `fetch` – barbsan Oct 18 '18 at 12:21
@barbsan Thanks for pointing that out. I missed that part. +1 – Husam Ibrahim Oct 18 '18 at 12:34
Actually return fixed the issue, but I still can't render it to the page. i dont know what the problem is. Im following youtube video series, and it just works without the return aswell. I don't know what I set up incorrectly. It also shows them info about the Vuejs datas in vue dev tools, while I only see = $vm0 and nothing else even if I click on it. – shawnest Oct 18 '18 at 16:00
The problem must be easy to solve because if I set up a message variable and set it up as {{message}}, it does show up in the page. But If I just modify data with created or mounted I just get back an empty array, thats why I doesnt render anything. – shawnest Oct 18 '18 at 16:30
@shawnes Is your pigeons array still empty after the fetch call? – Husam Ibrahim Oct 18 '18 at 16:37
created(){ this.fetchPigeons().then(() => console.log(this.pigeons)); } After this I got the array back. But when I put like {{ pigeons }} into the template it shows {}. – shawnest Oct 18 '18 at 16:54
@shawnest You are doing `v-for="pigeon in pigeons"` so you should use pigeon inside your template with whatever field you want to display. So if there's an id field you would do {{ pigeon.id }}. – Husam Ibrahim Oct 18 '18 at 17:01
This is in my vue template:

{{ pigeon.id }}

– shawnest Oct 18 '18 at 17:25
@shawnest Please verify that your array objects have an id field. – Husam Ibrahim Oct 18 '18 at 17:29
I don't know I might set it up wrongly somewhere in my laravel directory. – shawnest Oct 18 '18 at 19:26
@shawnest You might want to post a new question with all the relevant code for better exposure and for people to see why your data isn't rendering properly. Otherwise they're mostly going to glance over this question and you won't get much help since the question is about a separate issue. – Husam Ibrahim Oct 18 '18 at 19:35

hassan zarghami · Answer 5 · 2020-12-05T09:44:24.960

4

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

edited Dec 05 '20 at 09:44

answered Mar 27 '20 at 19:46

hassan zarghami

175
6

score 2 · Answer 6 · answered Mar 22 '19 at 16:14

2

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

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

answered Mar 22 '19 at 16:14

Yahya

318
3
11

Andre Ravazzi · Answer 7 · 2019-05-15T00:11:59.083

2

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>

edited May 15 '19 at 00:11

answered May 15 '19 at 00:02

Andre Ravazzi

611
7
10

Can we use standard promises instead of `await`? – Shamoon Jul 16 '19 at 15:59
For sure, but you will have to handle the promise resolution in another function maybe. – Andre Ravazzi Sep 09 '20 at 15:25

score 2 · Answer 8 · answered Jul 10 '19 at 06:52

2

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

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

Thanks, Ranjit

answered Jul 10 '19 at 06:52

ranjit0829

21
3

score 2 · Answer 9 · answered Dec 30 '20 at 16:37

2

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

answered Dec 30 '20 at 16:37

Lucien950

195
2
10

code doesnt work – Qiqke Dec 26 '22 at 12:01

score 1 · Answer 10 · answered Sep 24 '19 at 14:46

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

score 0 · Answer 11 · edited Jul 15 '22 at 04:54

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.

score 0 · Answer 12 · answered Apr 30 '22 at 14:33

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.

score 0 · Answer 13 · answered Oct 08 '22 at 19:02

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


}

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/32899259) — Lajos Arpad, Oct 14 '22 at 17:14

score -4 · Answer 14 · edited Aug 24 '19 at 17:54

-4

Well I had exactly same problem but I solved it:

Just move app.js external link to head tag.

edited Aug 24 '19 at 17:54

Obsidian

3,719
8
17
30

answered Aug 24 '19 at 15:55

Morteza Mohiuodin

90
4

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

14 Answers14

{{ pigeon.id }}

Linked

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

14 Answers14

{{ pigeon.id }}

Linked

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