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

What is the reasoning behind the return type of void for Window.open()?

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

Authentications for live search within Elasticsearch 8.x

Keep an ear out for socket.io within an Angular application

Browsing HTML Documents with the Click of a Button

Transform PHP array into a properly structured array or object that can be easily used in JavaScript

Modify every audio mixer for Windows

Unsubscribe from the Event Listener in Node.js

Is there a way for me to remove an uploaded image from the system

Challenges with Internal Styling on Wordpress Sites

Restricting array elements through union types in TypeScript

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

Unable to retrieve HTML content through a Node.js server

Possible issue with accurate indexing causing caption error with API images in React

Refresh collection of texts

Unable to relocate the cursor to an empty paragraph tag

Navigating in a Curved Path using Webkit Transition

Does the triple equal operator in JavaScript first compare the type of the value?

Default Value for Null in Angular DataTable DTColumnBuilder

The JSON node fails to return a value after inserting data through an ajax request