Problems with my API in Vue.js with axios

Question

I'm creating a bookstore app with Vue.js. The books are in this API https://api.myjson.com/bins/1h3vb3, but I can't show them in my HTML with the following function and I don't understand why:

<div id="list-books" v-if="books && books.length">
  <div>Cover page: <strong>{{ books }}</strong></div>
  <div>Details: <strong>{{ books.detalle }}</strong></div>
  <div>Title: <strong>{{books.titulo}}</strong></div>
  <div>Description: <strong >{{books.descripcion}}</strong></div>
  <div>Language: <strong>{{books.idioma}}</strong></div>
</div>
<div class="text-center" v-else> No results! </div>

new Vue({
  el: "#vue-app",
  data() {
    return {
      title: "Ubiqum Bookstore",
      books: []
    };
  },
  methods: {
    getAPI() {
      axios
        .get("https://api.myjson.com/bins/1h3vb3")
        .then(response => {
          this.books = response;
        })
        .catch(e => {
          console.log("No found!");
        });
    }
  }
});

Can you show us how you've actually attempted to display the books? Also, this.books should probably = response.data (.data containing the actual json from the API) — Inch High
– Inch High, Commented Feb 11, 2020 at 16:58
Please give a minimal reproducible example - what is the problem here? Errors? Unexpected outputs? What does the template look like? — jonrsharpe
– jonrsharpe, Commented Feb 11, 2020 at 16:59
Try it with response.data if u dont how the response looks like then just console.log(response) it, its the easiest way to debugg — Ilijanovic
– Ilijanovic, Commented Feb 11, 2020 at 19:39
I had the console.log(response) and I didn´t see anything about it in the console, (any error or data) so I don´t understand what is happen, maybe this is not been reading? — Nikita99
– Nikita99, Commented Feb 11, 2020 at 20:58
In the html I have, <div id="list-books" v-if="books && books.length"> <div>Cover page: <strong>{{ books }}</strong></div> <div>Details: <strong>{{ books.detalle }}</strong></div> <div>Title: <strong>{{books.titulo}}</strong></div> <div>Description: <strong >{{books.descripcion}}</strong></div> <div>Language: <strong>{{books.idioma}}</strong></div> <div class="text-center" v-else> No results! </div> — Nikita99
– Nikita99, Commented Feb 11, 2020 at 20:58

tony19 · Accepted Answer · 2022-07-16 00:15:21Z

1

axios.get resolves to a Response, which stores the received data in the data property. In your code, you've incorrectly set this.books to response, which is the entire Response object. You should instead reference response.data.books:

axios.get(...).then(response => this.books = response.data.books)

Also, to render a list of items, use v-for="book in books" like this:

<div v-for="book in books">
  <div>Details: <strong>{{ book.detalle }}</strong></div>
  <div>Title: <strong>{{ book.titulo }}</strong></div>
  <div>Description: <strong >{{ book.descripcion }}</strong></div>
  <div>Language: <strong>{{ book.idioma }}</strong></div>
</div>

new Vue({
  el: '#vue-app',
  data() {
    return {
      title: "Ubiqum Bookstore",
      books: []
    };
  },
  methods: {
    getAPI() {
      axios
        .get("https://api.myjson.com/bins/1h3vb3")
        .then(response => {
          this.books = response.data.books;
        })
        .catch(e => {
          console.log("No found!");
        });
    }
  }
})

.book {
  margin: 1rem;
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
 
<div id="vue-app">
  <button @click="getAPI">Get data from API</button>
  <div id="list-books" class="book" v-if="books" v-for="book in books">
<!--     <div>Cover page: <strong>{{ books }}</strong></div> -->
    <div>Details: <strong>{{ book.detalle }}</strong></div>
    <div>Title: <strong>{{book.titulo}}</strong></div>
    <div>Description: <strong >{{book.descripcion}}</strong></div>
    <div>Language: <strong>{{book.idioma}}</strong></div>
  </div>
  <div class="text-center" v-else> No results! </div>
</div>

edited Jul 16, 2022 at 0:15

answered Feb 11, 2020 at 21:27

tony19

140k23 gold badges281 silver badges354 bronze badges

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

2 Comments

Nikita99 Over a year ago

Thank you so much! Now the code is working but do you know why I can´t see the images for the cover page? They are .png on Json

tony19 Over a year ago

Your template shows no references to images. You might want to ask that as a separate question.

6bytes · Accepted Answer · 2020-02-11 21:46:13Z

1

Maybe you haven't pasted your full code, but you've declared your getAPI method, but I don't see where you actually run it.

What I'm missing is something like this:

...
data() {
  return {
    title: "Ubiqum Bookstore",
    books: []
  };
},
mounted() {
  this.getAPI();
},
methods: {
  getAPI() {
    ...
  }
}

EDIT See below code snippet. You've made a few more mistakes as well:

Your books array appeared empty because this.books = response; assigned the whole response object to it. The actual data is a bit deeper, hence this.books = response.data.books;.
You missed a v-for to loop through your results

<div class="book" v-for="book in books">`
...
</div>

Working jsfiddle: https://jsfiddle.net/6bytes/ufbaem0j/8/

edited Feb 11, 2020 at 21:46

answered Feb 11, 2020 at 21:18

6bytes

6,2329 gold badges40 silver badges44 bronze badges

4 Comments

Nikita99 Over a year ago

I have writen this new code but the console from Vue.js says that books array is empty

6bytes Over a year ago

I've added a working code snippet. See updated answer

Nikita99 Over a year ago

Thank you so much! Now the code is working but do you know why I can´t see the images for the cover page? They are .png on Json

6bytes Over a year ago

Your book.portada and book.detalle are links to images. You need to show them as images in your HTML like this: <div>Cover page: <img :src="book.portada" width="30" /></div>

Collectives™ on Stack Overflow

Problems with my API in Vue.js with axios

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related