Cannot access key from an API in Nuxt

Question

I'm pretty new on Nuxt JS. I fillow tutorials on nuxt js, and I can't show a {{planet.title}} on my page. But if I use {{$data}} i see all the planets. I want the title of the planet's name I have in the slug (here it's earth but it can be jupiter or mars)

_slug.vue

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">planet.title here => {{ planet.title }}</h1>
      <pre> $data here => {{ $data }}</pre>
    </div>
  </div>
</template>

<script>
import NuxtLogo from "~/components/NuxtLogo";
export default {
  components: {NuxtLogo},
  async asyncData() {
    const planet = await fetch(
      'https://api.nuxtjs.dev/planets'
    ).then((res) => res.json())
    return { planet }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

My Web Page :

You don't really need to import the component in Nuxt as shown here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components Also, try to not mix and match `async/await` and `.then()`. Keep using `async/await`. — kissu, Oct 21 '21 at 14:49
You can check my answer with the 2nd snippet of code. It is essentially showing how to fetch a specific ID from an API. — kissu, Oct 21 '21 at 14:58

score 1 · Accepted Answer · edited Jul 15 '22 at 04:21

1

This is how you can improve your code

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">planet.title here => {{ planet.title }}</h1>
      <pre> $data here => {{ $data }}</pre>
      <section>
        <div v-for="planet in planets" :key="planet.slug">
            <p>Title of my planet: {{ planet.title }}</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData() {
    const call = await fetch('https://api.nuxtjs.dev/planets')
    const planets = await call.json()
    return { planets }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

PS: don't forget the :key.

The API returns an array. If you want to access the title of the first planet, use planet[0].title.

You can also of course loop on the whole array with v-for. More info here: https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

edited Jul 15 '22 at 04:21

tony19

125,647
18
229
307

answered Oct 21 '21 at 14:46

kissu

40,416
14
65
133

I want to show the title of the planet'name I have in the slug – Nolan Rassant Oct 21 '21 at 14:52
@NolanRassant you need to have a specific API endpoint for this. Here you have an endpoint fetching all the planets. You need to have one for a specific one. – kissu Oct 21 '21 at 14:54
I don't understand, I followed this tutorial : https://explorers.netlify.com/learn/get-started-with-nuxt/nuxt-dynamic-routes . She can show the planets title and I can't – Nolan Rassant Oct 21 '21 at 14:59
The actual link is giving you the exact code needed to have it work. Follow the video til the end. Or check my answer [here](https://stackoverflow.com/questions/69663907/cannot-access-key-from-an-api-in-nuxt/69664096?noredirect=1#comment123136609_69663907). – kissu Oct 21 '21 at 15:04

score 0 · Answer 2 · edited Oct 21 '21 at 14:50

0

Looks like Planet is an array so you need to iterate over the array and then print the values that you want for that array try with

<ul>
  <li v-for="item in planets">
    {{ item.title}}
  </li>
</ul>

edited Oct 21 '21 at 14:50

kissu

40,416
14
65
133

answered Oct 21 '21 at 14:49

Jorge Cordero

160
1
4

score 0 · Answer 3 · edited Oct 21 '21 at 15:40

planet as you can see when you display the variable $data is an a array of planets.

You should rename planet variable to planets so it represents better its contents.

To display a planet, you need to get a it from the planets array:

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">earth.title here => {{ earth.title }}</h1>
    </div>
  </div>
</template>

<script>
import NuxtLogo from "~/components/NuxtLogo";
export default {
  components: {NuxtLogo},
  async asyncData() {
    const planets = await fetch('https://api.nuxtjs.dev/planets')
        .then((res) => res.json())

    const earth = planets[0];

    return { planets, earth }
  }
}
</script>

Cannot access key from an API in Nuxt

3 Answers3