Challenges I'm Facing with my Vue.js API Integration using axios

Question

Challenges I'm Facing with my Vue.js API Integration using axios

I am currently working on a bookstore application using Vue.js. The book data is stored in this API . However, I am encountering issues displaying the information on my HTML page with the provided function and I am struggling to identify the root cause:

<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!");
        });
    }
  }
});

javascript vue.js

Answer 1

Answer №1

axios.get resolves to a Response, which holds the received data in the data property. In your code, you incorrectly assigned this.books to response, which is the entire Response object. You should instead use response.data.books:

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

Furthermore, to display a list of items, utilize v-for="book in books" like so:

<div v-for="book in books">
  <div>Details: <strong>{{ book.details }}</strong></div>
  <div>Title: <strong>{{ book.title }}</strong></div>
  <div>Description: <strong >{{ book.description }}</strong></div>
  <div>Language: <strong>{{ book.language }}</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("Not found!");
        });
    }
  }
})

.book {
  margin: 1rem;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6808393b6c4d8c0d8c7c7">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8998091978bb8c8d6c9c1d6ca">[email protected]</a>/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.details }}</strong></div>
    <div>Title: <strong>{{book.title}}</strong></div>
    <div>Description: <strong >{{book.description}}</strong></div>
    <div>Language: <strong>{{book.language}}</strong></div>
  </div>
  <div class="text-center" v-else> No results! </div>
</div>

Answer 2

axios.get resolves to a Response, which holds the received data in the data property. In your code, you incorrectly assigned this.books to response, which is the entire Response object. You should instead use response.data.books:

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

Furthermore, to display a list of items, utilize v-for="book in books" like so:

<div v-for="book in books">
  <div>Details: <strong>{{ book.details }}</strong></div>
  <div>Title: <strong>{{ book.title }}</strong></div>
  <div>Description: <strong >{{ book.description }}</strong></div>
  <div>Language: <strong>{{ book.language }}</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("Not found!");
        });
    }
  }
})

.book {
  margin: 1rem;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6808393b6c4d8c0d8c7c7">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8998091978bb8c8d6c9c1d6ca">[email protected]</a>/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.details }}</strong></div>
    <div>Title: <strong>{{book.title}}</strong></div>
    <div>Description: <strong >{{book.description}}</strong></div>
    <div>Language: <strong>{{book.language}}</strong></div>
  </div>
  <div class="text-center" v-else> No results! </div>
</div>

Answer 3

Answer №2

It seems like there may be a missing piece in the code you've shared. While you have declared your getAPI method, it appears that you haven't actually called it anywhere.

To make sure it runs properly, you should include something similar to this:

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

UPDATE In the following code snippet below, there are a few errors that need to be addressed:

The reason why your books array was empty is because this.books = response; assigned the entire response object instead of the data. You should use
```
this.books = response.data.books;
```
instead.
You also forgot to include a v-for loop to iterate through the results.

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

Here is a working jsfiddle example: https://jsfiddle.net/6bytes/ufbaem0j/8/

Answer 4

It seems like there may be a missing piece in the code you've shared. While you have declared your getAPI method, it appears that you haven't actually called it anywhere.

To make sure it runs properly, you should include something similar to this:

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

UPDATE In the following code snippet below, there are a few errors that need to be addressed:

The reason why your books array was empty is because this.books = response; assigned the entire response object instead of the data. You should use
```
this.books = response.data.books;
```
instead.
You also forgot to include a v-for loop to iterate through the results.

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

Here is a working jsfiddle example: https://jsfiddle.net/6bytes/ufbaem0j/8/

Challenges I'm Facing with my Vue.js API Integration using axios

Answer №1

Answer №2

Similar questions

There was an error with the response code of 500 on the development server for react-native

Having trouble importing my function component into a router in reactjs. Need some guidance on how to properly set it up

The indexOf function is not compatible with AngularJS controllers

jQuery - accessing a different class within the object

The JQuery.ajax function encountered an unexpected identifier and threw an Uncaught SyntaxError

Utilizing Laravel to Showcase Google Maps with Custom Markers Generated from MySQL Data

Discover the steps to showcase a specific option from a select list at the top row through VueJs

Different methods to disable scrolling when the mobile menu pops up

Leveraging Angular to retrieve images from Google Feed API

Tips for displaying an alert after a successful form submission and ensuring user input validation

Unable to retrieve the text enclosed between the:: before and after the:: marker

Rendering with Next.js script

Issue with hidden input field not displaying array on submission

Nested Ajax request fails and triggers a full page reload

Utilizing a distinct template with ui-router: A step-by-step guide

Extracting dynamic content from a webpage using Selenium with Javascript rendering capabilities

"Php makes it easy to organize seating arrangements with drag-and-drop functionality

Replacing the tbody element in React with centered text using inline styles ---If you want

Could someone provide me with a breakdown of this code utilizing the .bind() function?

Using the .val method on an input element modifies the HTML content without affecting the value displayed