Cannot read properties of undefined (reading 'weather') in nuxtjs api call

Question

I cannot get the result from the open Weather API,I get this error: Cannot read properties of undefined (reading 'weather'), but the error's gone when I move the v-list part to another page.

code is below, any helps would be appreciated :

   
<template>
    <div>
        <v-row>
            <v-col sm="10" offset-sm="1" lg="8" offset-lg="2">
                <h2 class="text-uppercase title text-center my-5">weather forecast</h2>
                <v-row justify="center">
                    <v-btn color="primary" outlined class="mt-7" @click="showWeatherInfo">Show Info</v-btn>
                </v-row>
                <v-row>
                    <v-list>
                        <v-list-item-group>
                            <v-list-item>Weather: {{item.weather[0].main}}</v-list-item>
                            <v-list-item> temperature: {{item.main.temp}} ° C. </v-list-item>
                            <v-list-item> humidity: {{item.main.humidity}} % </v-list-item>
                            <v-list-item> wind: {{item.wind.speed}}m </v-list-item>
                        </v-list-item-group>
                    </v-list>
                </v-row>
                <v-row justify="center">
                    <v-btn color="primary" outlined class="mt-7">Go Back</v-btn>
                </v-row>
            </v-col>
        </v-row>
    </div>
</template>

<script>
export default{
    data(){
        return{
        }
    },
    methods : {
        async showWeatherInfo(){
            const item = await this.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=tehran&appid=${process.env.apiKey}`)
            console.log(item)
            return { item }
        }
    }
}
</script>

@danihazler OP is using a method on a `click`, so totally fine. And if you're using Nuxt, you're better using either `asyncData()` or `fetch()` hooks. — kissu, Nov 03 '21 at 14:19
Did you loaded the Vue CDN just for the example or are you actually loading it inside of your nuxt app? You can give a look to this answer to see an example on how to write a simple fetching component in Vue/Nuxt: https://stackoverflow.com/a/67490633/8816585 Also, please give a read to this one, it may be useful: https://nuxtjs.org/docs/features/data-fetching — kissu, Nov 03 '21 at 14:24

score 1 · Answer 1 · answered Nov 03 '21 at 14:21

You can probably fix your issue with this

<v-list-item-group v-if="item">

The reason is that if you try to iterate on an object when it's empty, you will get an error.
Meanwhile, your template is synchronous so you'll need to just tell it that some stuff can be empty there and that it doesn't need to freak out.

Pooya Golchian · Accepted Answer · 2021-11-08T20:51:10.213

You ought to use best practice to call API with AXIOS and you should observe reactivity in Vue.js that there are two points that will solve your problem:

1- You need to define a data object or Array like item:[] and assign your response in this.item in your function that you called it showWeatherInfo()

2- You need to call your function in the mounted life cycle

<template>
    <div>
        <v-row>
            <v-col sm="10" offset-sm="1" lg="8" offset-lg="2">
                <h2 class="text-uppercase title text-center my-5">weather forecast</h2>
                <v-row justify="center">
                    <v-btn color="primary" outlined class="mt-7" @click="showWeatherInfo">Show Info</v-btn>
                </v-row>
                <v-row>
                    <v-list>
                        <v-list-item-group v-if="item">
                            <v-list-item>Weather: {{item.weather[0].main}}</v-list-item>
                            <v-list-item> temperature: {{item.main.temp}} ° C. </v-list-item>
                            <v-list-item> humidity: {{item.main.humidity}} % </v-list-item>
                            <v-list-item> wind: {{item.wind.speed}}m </v-list-item>
                        </v-list-item-group>
                    </v-list>
                </v-row>
                <v-row justify="center">
                    <v-btn color="primary" outlined class="mt-7">Go Back</v-btn>
                </v-row>
            </v-col>
        </v-row>
    </div>
</template>

<script>
export default{
    data(){
        return{
            
            item:[]

        }
    },
   
    methods : {
        async showWeatherInfo(){
            const response = await this.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=tehran&appid=${process.env.apiKey}`)
            this.item = response
            
        }
    }
}
</script>

Cannot read properties of undefined (reading 'weather') in nuxtjs api call

2 Answers2