Vue.js getting null for the json when initially loading

Question

I am learning vue.js and trying to call a json file and parse the data. Everything is working but when I refresh the page, I see a blank page before my data is loaded and in console log I get TypeError: e.myData is null. After few second the data is displayed on the page.

main.js:

new Vue({
    el: `#app`,
    render: h => h(App,{
      props:{
        todoID: this.dataset.id
      }
    })
  })

and my App.vue:

<template>
  <div>
      <div>{{myData.getName()}}</div>
  </div>
</template>

<script>
import Info from '@/getInfo'
export default {
  name: 'App',
  props: {
    todoID: String,
  },
  data() {
    return {
      data: null,
      myData: null
    }
  },
  created() {
    fetch(`http://localhost/json-end-point/`)
      .then(async response => {
        const data = await response.json();

        if (!response.ok) {
          const error = (data && data.message) || response.statusText;
          return Promise.reject(error);
        }

        // set the date here, am I doing this right?
        this.myData = new Info(data);
        this.data = data;
      })
      .catch(error => {
        this.errorMessage = error;
        console.error("There was an error!", error);
      });
  }
}
</script>

getInfo.js

export default class Info {
    constructor(Data) {
      if (Data) {
        const data = JSON.parse(Data);
        console.log(data.name); // returns name
        // console.log(data);   // returns the json data
        this.name = data.name;
      }
    }
    
    getName() {
      return this.name;
    }
}

I think I am doing something wrong here this.myData = new Info(data); but I am not sure what I can do.

Update

I was able to remove the console log by adding v-if="myData !== null". Still not sure assigning data like this this.myData = new Info(data); is a good approach. How can I improve this code?

you can add a v-if in the template to show it if the variable isn't null. right now the page renders before the call is finished — Kareem Kamal
– Kareem Kamal, Commented Oct 17, 2021 at 22:35
thanks doing v-if="myData !== null" removed the console log. Is doing this.myData = new Info(data); a good approach? or I should try another way? I dont want to learn the wrong way. — Rain Man
– Rain Man, Commented Oct 17, 2021 at 22:39
using new means you can't return a promise and wait, a better approach would be to wrap the fetching in an async function — Kareem Kamal
– Kareem Kamal, Commented Oct 18, 2021 at 10:35

Kareem Kamal · Accepted Answer · 2021-10-18 16:17:59Z

1

Here's an example of how to let the template show different states so it doesn't try to render the data before it arrives, but shows a loading indicator instead.

<template>
  <div v-if="myData">
      <div>{{ myData.getName() }}</div>
  </div>
  <div v-else-if="isLoading">
    Loading data...
  </div>
  <div v-else-if="errorMessage">
    {{ error.message }}
  </div>
</template>

<script>
import Info from '@/getInfo'
export default {
  name: 'App',
  props: {
    todoID: String,
  },
  data() {
    return {
      data: null,
      myData: null,
      error: null
    }
  },
  async created() {
    await this.getData()
  },

  methods: {
    async getData() {
      try {
        const response = await fetch(`http://localhost/json-end-point/`)

        if (!response.ok) {
          throw new Error(data?.message || response.statusText)
        }

        this.data = await response.json();
        this.myData = new Info(this.data);
      } catch (error) {
          this.error = error;
          console.error("There was an error!", error);
      }
    }
  }
}
</script>

edited Oct 18, 2021 at 16:17

answered Oct 18, 2021 at 13:26

Kareem Kamal

1,0581 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Rain Man Over a year ago

this returns an error Module build failed, reserved word 'await' for this line this.myData = await getData()

Kareem Kamal Over a year ago

forgot the this. before getData, try with it

Rain Man Over a year ago

thanks, still the same error

Kareem Kamal Over a year ago

added async to the created hook, sorry I'm too used to the linter doing these for me.

Kareem Kamal Over a year ago

found it! the function returns undefined and we assign undefined to myData in created(), removing the assignment fixes it

|

KingsthwaiteJ · Accepted Answer · 2021-10-17 22:51:05Z

0

You could stick the myData.getName() call inside a computed field that either returns the name if myData != null or an empty string (or whatever value you want when there is no data available).

Something like this

computed: {
    getName() {
        return this.myData ? this.myData.getName() : '';
    }
}

answered Oct 17, 2021 at 22:51

KingsthwaiteJ

4945 silver badges11 bronze badges

Collectives™ on Stack Overflow

Vue.js getting null for the json when initially loading

Update

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related