I don't have enough knowledge as to why my DOM isn't displaying my API call results from storyblok

Question

I am making an app in Nuxt using storyblok as my CMS. However, I was receiving errors when trying to link the storyblok array to my arrays called in my template using v-for. I got a bit of help from another user and fixed the errors, but now I don't have enough knowledge as to why the DOM isn't displaying the results of my API call on my v-for's called in the template ("books" and "posts")

Here is the template:

<template>
    <div>
    <!-- instance header -->
    <InstanceHeader title="Books" />

    <div class="pageContainer">

    <div class="booksInfoPost"> 

        <div class="booksInfoPost__subHeader"><h3>Top Books</h3></div>

        <div class="booksInfoPost__topBooks"> 

         <BooksInfoPostTop 
            v-for="book in books"
            :key ="book.id"
            :bookCover="book.bookCover"
            :title="book.title"
            :author="book.author"
            :content="book.content"
            :id="book.id"
            /> 

        </div> 

        <div class="booksInfoPost__subHeader"><h3>Book Titles</h3></div>

         <BooksInfoPost 
            v-for="book in posts"
            :key ="book.id"
            :bookCover="book.bookCover"
            :title="book.title"
            :author="book.author"
            :content="book.content"
            :id="book.id"
            />  

        </div>
    </div>

</div>
</template>

Here is my script:

    <script>
    import InstanceHeader from '~/components/InstanceHeader';
    import BooksInfoPostTop from '~/components/BooksInfoPostTop';
    import BookTitles from '~/components/BookTitles';
    import BooksInfoPost from '~/components/BooksInfoPost';
    import axios from 'axios';

export default  {

    components: {
        InstanceHeader,
        BooksInfoPostTop,
        BookTitles,
        BooksInfoPost
    },

    data() {
        /* return {
            books: [],
            posts: []
        } */

    },

    async asyncData(context) {
    const result = {};
    const mapBooks = b => {
      return {
        id: b.slug,
        bookCover: b.content.bookCover,
        title: b.content.title,
        author: b.content.author
      };
    };

    result.posts = await context.app.$storyapi
      .get("cdn/stories", {
        version: "draft",
        starts_with: 'books/book-titles'
      }).then(response => {
        console.log(response);
        response.data.stories.map(mapBooks);
      })

    result.books = await context.app.$storyapi
      .get("cdn/stories", {
        version: "draft",
        starts_with: 'books/top-books'
      }).then(response => {
        console.log(response);
        response.data.stories.map(mapBooks);
      })

    return result; // it has right property names {books:[], posts:[]}
  }   
}

</script>

I am not the most experienced developer and If anyone can help I'll appreciate it. Thanks

Answer 1

You do not need to use then when awaiting a promise.

const { data } = await context.app.$storyapi
  .get("cdn/stories", {
    version: "draft",
    starts_with: 'books/book-titles'
  }).then(response => {
    console.log(response);
    response.data.stories.map(mapBooks);
  });

result.posts = data.stories.map(mapBooks);

By the way, you forgot to return a value in your promises:

result.posts = await context.app.$storyapi
  .get("cdn/stories", {
    version: "draft",
    starts_with: 'books/book-titles'
  }).then(response => {
    console.log(response);
    return response.data.stories.map(mapBooks); // return the array of books
  })

Also, you should check that response.data.stories is not undefined or you might get an error.