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

Is it feasible to utilize an array of properties with the "item-text" attribute in Vuetify?

Having trouble with jest mocking a function - it's not functioning as expected

How to Use a Discord Bot to Send a Message (Step-by-Step Guide)

Navigate back to the parent directory in Node.js using the method fs.readFileSync

Using React to create an onScroll event listener within a mapped array

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

What is the method for updating the form action to alter the hash without causing a page reload?

Is there a way to modify the value of a JavaScript object?

VuexFire Transformations

Guide for using express.js

Chrome reports a Javascript error: indicating that it is not recognizing the function

Trapped in the Web of Facebook OAuth

Nested pages in the NextJS router do not properly highlight the active menu item

Map image showing only the tile layer in the top corner

Can you create asynchronous code or functions without using Web APIs at all?

What is the proper way to write a function that verifies the presence of a key in an object and then retrieves the associated value?

Dividing a JSON array by a specific key using lodash underscore

What steps can I take to enhance the efficiency of this JavaScript DOM data manipulation algorithm?

The type 'undefined' cannot be assigned to the type 'string | Buffer | { key: string | Buffer; passphrase: string; } | GetPublicKeyOrSecret'

The key to successful filtering in Next.js with Hasura is timing - it's always a step