What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

Question

What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

I am facing an issue with retrieving data from a Vue.js app object.

data() {
  return {
    group1: {
      id:   'qd4TTgajyDexFAZ5RKFP',
      owners: {
        john:  {age: 32, gender: 'man'},
        mary: {age: 34, gender: 'woman'},
      }
    }
  }
}

The problem arises when I try to access Mary's age within the Vue template as follows...

I can successfully access owners using this code snippet...

<p>{{group1.owners}}</p>

However, when attempting to go deeper like this...

<p>{{group1.owners.mary.age}}</p>

...an error occurs indicating that it cannot retrieve mary as undefined.

"TypeError: Cannot read properties of undefined (reading 'id')"

If anyone has a solution to this issue, please let me know. Thank you!

javascript vue.js object templates

Answer 1

Answer №1

Give it a shot instead

<script>
  export default {
    data() {
      return {
        group1: {
          id: 'qd4TTgajyDexFAZ5RKFP',
          owners: {
            john: {
              age: 32,
              gender: 'man'
            },
            mary: {
              age: 34,
              gender: 'woman'
            },
          }
        }
      }
    }
  }
</script>

<template>
  <pre>result: {{ group1.owners.mary.age }}</pre>
</template>

Check out this live demonstration.

Answer 2

Give it a shot instead

<script>
  export default {
    data() {
      return {
        group1: {
          id: 'qd4TTgajyDexFAZ5RKFP',
          owners: {
            john: {
              age: 32,
              gender: 'man'
            },
            mary: {
              age: 34,
              gender: 'woman'
            },
          }
        }
      }
    }
  }
</script>

<template>
  <pre>result: {{ group1.owners.mary.age }}</pre>
</template>

Check out this live demonstration.

What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

Answer №1

Similar questions

Developing an animated feature that displays a dynamic count up to the current size of the browser window

is it possible to dynamically add components within a Vue.js component?

Tips for accessing the initial element of an array, storing it in a state, and sending it to a component

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

Node.js setInterval is a method used to repeatedly execute a function

A step-by-step guide on setting up an event listener for dynamically generated HTML using JavaScript objects

Develop a PDF generator in ReactJS that allows users to specify the desired file name

The integration between Javascript, PHP, and SQL Server does not display the retrieved data

Can you explain the significance of this async JavaScript server application error?

Tips for transferring the output of a JavaScript async function to a Python variable

What is the best way to transfer a string to a different Vue component?

Using Ajax and Session Variables for a Worksafe Filter to selectively hide images

Choose a specific <div> element from an external page using Ajax/PHP

Inspecting the Nuxt.js application, retrieve the build version using console.log

Determining the file extension type of an uploaded file using JavaScript

The CSS navigation bar is not properly aligned in the center

Error: Attempts to access the 'avatar' property of a null value result in a TypeError

How to execute a JavaScript function within a Jinja for loop

Send a form without the need to reload the page

Is there a way to ensure uniform display of HTML form error messages across various browsers?