Javascript: Error when loading the page

Question

I'm making an API call, and every time the page loads it comes with this error and I don't know why. Can anyone tell me why? I've tried to put it:

Here is the markup where I use the total amount:

<div class="summary__graph">
        <div class="graph__header">
          <h3 class="headline">Fordeling</h3>
          <p class="answers">{{company.amount.total}} besvarelser</p>
        </div>

Here's where I define my company I fill with total value

 data () {
    return {
      selected: 1,
      datacollection: null,
      datacollection2: null,
      datacollection3: null,
      company: '',
      isActive: false,
      scoreLine: null,
      timeBar: null,
      answerPercent: null

    }
  },

vue.js mounted and methods

  mounted () {
    this.getStoreScore()
    this.fillData()
    this.fillData2()
    this.fillData3()
    this.fillDataScoreLine()
    this.fillDataTimeBar()
    this.fillDataAnswerPercent()
  },


getStoreScore () {
      return axios.post('API', {
        storeId: '5b7515ed5d53fa0020557447'
      }).then(response => {
        this.company = {
          'storeScore': response.data.result,
          'amount': {
            'total': response.data.amount.total,
            'zero': {
              'amount': response.data.amount.zero,
              'percentage': response.data.amount.zero / response.data.amount.total * 100
            },
            'one': {
              'amount': response.data.amount.one,
              'percentage': response.data.amount.one / response.data.amount.total * 100
            },
            'two': {
              'amount': response.data.amount.two,
              'percentage': response.data.amount.two / response.data.amount.total * 100
            },
            'three': {
              'amount': response.data.amount.three,
              'percentage': response.data.amount.three / response.data.amount.total * 100
            }
          }
        }
        return this.company
      })
    },

Can anyone tell me why it gives me that error? :D

company.amount.total is not defined before axios.post(..) respond.. either initialize it to null before or wrap your html with if — DanielM
– DanielM, Commented Aug 16, 2018 at 14:01
I recommend editing your question to include the text of your error instead of pasting an image. This makes it easier to read for people trying to help you and easier for others to find the same issue on Google. — James Jones
– James Jones, Commented Aug 16, 2018 at 14:06

tony19 · Accepted Answer · 2022-07-15 04:37:58Z

3

Because you're making an API call, the page gets rendered before you receive any data. You get the error because company.amount is undefined when the page gets rendered. There are a few fixes possible: either you delay your page rendering until all the data is received, or you write a quick if condition around the

<p class="answers">{{company.amount.total}} besvarelser</p>

More info: https://v2.vuejs.org/v2/guide/conditional.html

Edit: Your code would become

<p v-if="company.amount" class="answers">{{company.amount.total}} besvarelser</p>

edited Jul 15, 2022 at 4:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 16, 2018 at 14:03

Bertijn Pauwels

5851 gold badge3 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Javascript: Error when loading the page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related