Object key v-for

Get Help
, ,
#1

Hi, I’m confused bit by this json output. I can’t get v-for - in console it loads 200 status OK, but page is blank. I’m using NuxtJs. I have nuxtjs/axios plugn installed. I can’t figure out how to manage that “attributes” object so it would work properly.
Here is my json output.

// http://localhost:1337/api/products

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "Name": "First product",
        "createdAt": "2022-06-17T15:18:12.410Z",
        "updatedAt": "2022-06-17T15:18:14.920Z",
        "publishedAt": "2022-06-17T15:18:14.914Z"
      }
    },
    {
      "id": 2,
      "attributes": {
        "Name": "Second product",
        "createdAt": "2022-06-17T15:18:26.869Z",
        "updatedAt": "2022-06-17T15:18:28.075Z",
        "publishedAt": "2022-06-17T15:18:28.072Z"
      }
    }
  ]
}

My vue code.

<template>
  <div>
    <h1>products</h1>
    <ul v-for="product in products" :key="product.id.attributes">
      <li>{{ product.attributes.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const products = await $axios.$get(`/products`)
    return { products }
  }
}
</script>
#2

Hi @gurkis
Here you need to add response.data.data and then try to print products[0].attributes.Name or products[1].attributes.Name. You get the name of attribute using below source code.

<template>
  <h3>{{ products[0].attributes.Name }}</h3>
  <h3>{{ products[1].attributes.Name }}</h3>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      products: {},
    };
  },
  beforeMount() {
    this.getName();
  },
  methods: {
    async getName() {
      const response = axios
        .get(
          "your api"
        )
        .then((response) => {
          const products = response.data.data;
          this.products = products;
        });
    },
  },
};
</script>

Or if you want to check out a live demo with source code. Click here: axios-request - CodeSandbox

I hope this work!!