nuxt js useFetch() not showing data in my browser

Question

its not showing data in my site. what is the problem i cant find it. please help im noob sorry. the url has json data and has key "featured". here is my code below.

<template>
   <q-card v-for="article in formattedJSON.featured" :key="article.id">
    <q-img :src="article.image" @load="imageLoaded" />
     <q-card-section>
      <NuxtLink
       :to="article.channel.url"
        class="text-channel text-caption q-mb-sm text-uppercase text-weight-bold"
        style="text-decoration: none"
        >{{ article.channel.name }}
     </NuxtLink>
      <p class="q-mb-sm text-header4">{{ article.title }}</p>
     <p class="q-mb-xl text-data">{{ article.blurb }}</p>
   </q-card-section>
  </q-card>
</template>

<script setup>
 const { data: formattedJSON } = await useFetch(
 "https://featured/get/");
</script>`

show the data in the page like the img, channel name, title and blurb.

Answer 1

You might want to try using JSON.parse(formattedJSON.featured), as it's possible that the featured data isn't in the expected object format.