how to access nested json object property using nuxtjs and v-for

Question

I want to access a nested object using v-for in nuxtjs,I have a get request using Axios to an API and response data is stored in a variable named CategoriesData look at the code below.

asyncData(context) {
return axios
  .get("https://lavazemesakhteman.com/wp-json/wc/v3/products/categories", {
    params: {
      per_page: 10,
      page: 1,
    },
  })
  .then((res) => {
    return {
      CategoriesData: res.data,
    };
  })
  .catch((e) => context.error(e));}

at this point, everything is good and all API response is stored in CategoriesData, my problem starts when I want to iterate over the nested object and display or use its property, pay attention to the code below:

 <ul>
  <li v-for="categories in CategoriesData" :key="categories.id">
    {{ categories.name }}
    {{ categories.image }}
  </li>
</ul>

the result is:

I want to display and use categories.image[0].src for example src only not the whole object, the API response is pictured below:

this is a part of JSON code:

     "display": "default",
    "image": {
        "id": 10443,
        "date_created": "2022-04-30T05:45:44",
        "date_created_gmt": "2022-04-30T01:15:44",
        "date_modified": "2022-04-30T05:46:36",
        "date_modified_gmt": "2022-04-30T01:16:36",
        "src": "https://lavazemesakhteman.com/wp-content/uploads/2022/04/Benkan-Connections2.jpg",
        "name": "Benkan Connections",
        "alt": "فروشگاه لوازم ساختمان عرضه کننده محصولاتی باکیفیت و همچنین با بهترین قیمت در تمام کشور هست."
    },

when is used categories.image.src:

   <ul>
  <li v-for="categories in CategoriesData" :key="categories.id">
    {{ categories.name }}
    {{ categories.image.src }}
  </li>
</ul>

I get the below error:

Cannot read properties of null (reading 'src')

user19015424 · Accepted Answer · 2022-05-03 12:02:41Z

3

You can access nested data using the same . notation you already use to get the first field, so you would need to write something like {{ categories.image.src }}.

<template>
  <ul>
    <li v-for="category in CategoriesData" :key="category.id">
      {{ category.name }}
      <img :src="category.image.src">
    </li>
  </ul>
</template>

Note: You named the variable in your v-for as a plural, while the data it holds is singular. As each item in the list of categories is an individual category.

answered May 3, 2022 at 12:02

user19015424

2111 silver badge3 bronze badges

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

3 Comments

pedram Over a year ago

this is not working in my case, when I use <img :src="category.image.src"> i get this error:Cannot read properties of undefined (reading 'image')

pedram Over a year ago

did you find out any solution?

user19015424 Over a year ago

Is it possible for an item in the list to not have an image, and have null for the field instead? If so then skip the <img> tag by detecting this: <img v-if="category.image" :src="category.image.url">

kissu · Accepted Answer · 2022-05-03 12:51:47Z

1

Going to the API itself, located here: http://lavazemesakhteman.com/wp-json/wc/v3/products/categories

Showed that sometimes your image can be null, hence checking for this exception is a nice thing to do

<img v-if="category.image" :src="category.image.src">

Depending on your project and how it's setup, you could even use Optional Chaining like this

<img :src="category.image?.src">

Otherwise, this uglier form is also available

<img :src="category.image && category.image.src">

answered May 3, 2022 at 12:51

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Collectives™ on Stack Overflow

how to access nested json object property using nuxtjs and v-for

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related