Question

40

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'address')

rated 0 times [ 43] [ 3] / answers: 1 / hits: 14586 / 2 Years ago, sun, june 5, 2022, 12:00:00

I am getting an error on my component. Can someone help to solve this?
I'm work in vue 3 version.
Getting an error:
"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'address')"
Does anyone have any insights?
profile.vue

<template>

<div>

         <div class="col col-lg-12 col-xl-12" v-for="(_postData, index) in postData" v- 

         bind:key="index">



             <h1>{{ _postData.id.address }}</h1>



         </div>

</div>

</template>

script

data() {

    return {

      postData: {},

      postPagination: {

        filter_data: [],

        page_no: 1,

        limit: 5

      }

    }

  },

getPost() {

      try {

        CreatorService.getAllMedia(this.postPagination)

          .then((response) => {

            if (response.status === true) {

              this.postData = response.data

            }

          })

          .catch((error) => {

            this.isPostLoading = false

            this.errorLog(error)

          })

      } catch (e) {

        this.errorTryLog(e)

      }

    }

response

[

  {

    "id": 1,

    "name": "Leanne Graham",

    "username": "Bret",

    "email": "[email protected]",

    "address": {

      "street": "Kulas Light",

      "suite": "Apt. 556",

      "city": "Gwenborough",

      "zipcode": "92998-3874",

      "geo": {

        "lat": "-37.3159",

        "lng": "81.1496"

      }

    },

    "phone": "1-770-736-8031 x56442",

    "website": "hildegard.org",

    "company": {

      "name": "Romaguera-Crona",

      "catchPhrase": "Multi-layered client-server neural-net",

      "bs": "harness real-time e-markets"

    }

  }  

]

Error Image

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darennevina

Add To Favorites

Follow

Total Points: 422

Total Questions: 128

Total Answers: 105

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

darennevina questions

1 change the active list when scrolling navbar

Fri, Nov 12, 21, 00:00, 3 Years ago

1 DiscordjsError: Request to use token, but token was unavailable to the client

Wed, Nov 25, 20, 00:00, 4 Years ago

1 How to check a checkbox in Google Apps Script and uncheck all the other cells?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 How do I extract data from this NodeList?

Fri, Sep 18, 20, 00:00, 4 Years ago

1 How can I query (with SQL) from browser?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 2 Years ago neo · Accepted Answer

Instead of _postData.id.address try _postData.address.

Demo :

new Vue({

  el: '#app',

  data: {

    postData: [

      {

        id: 1,

        name: Leanne Graham,

        username: Bret,

        email: [email protected],

        address: {

          street: Kulas Light,

          suite: Apt. 556,

          city: Gwenborough,

          zipcode: 92998-3874,

          geo: {

            lat: -37.3159,

            lng: 81.1496

          }

        },

        phone: 1-770-736-8031 x56442,

        website: hildegard.org,

        company: {

          name: Romaguera-Crona,

          catchPhrase: Multi-layered client-server neural-net,

          bs: harness real-time e-markets

        }

      }  

    ]

  }

})

<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js></script>

<div id=app>

  <div v-for=(_postData, index) in postData :key=index>

    <pre>{{ _postData.address }}</pre>

  </div>

</div>