Display API data from rapidapi in vue

Question

I'm playing around with vueJS and rapidapi and I'm trying to display data from an API using vue and retrieving the API using JS Fetch method. However, when I run the code all I got was the value that initiated it (which is: []).

<template>
  <div>
    <div>{{ chuckData }}</div>
  </div>
</template>

<script>
var chuck = [];
fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {
  method: "GET",
  headers: {
    "x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
    "x-rapidapi-key": "***"
  }
})
  .then(response => response.json()) // Getting the actual response data
  .then(data => {
    chuck = data;
  })
  .catch(err => {
    console.log(err);
  });

export default {
  data() {
    return {
      chuckData: chuck
    };
  }
};
</script>

I also tried to use the following:

var chuck fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {...}

But all I got was [object Promise] without the data that I'm expecting to display.

What am I doing wrong?

score 1 · Accepted Answer · answered Apr 13 '20 at 11:32

You should define a method in the Vue instance that gets your API data.

Like this:

methods: {
    getRapidApiData() {
        //do the fetch.... etc
    }
}

You can get rid of var chuck = []; because it's not needed and replace references of chuck with this.chuckData.

You can then initiate chuckData like chuckData: []

score 0 · Answer 2 · answered Apr 14 '20 at 07:20

The final solution looks something like this:

<div class="col-md-3" v-for="result in chuck">
         {{result}}
</div>

<script>
export default {
  data() {
    return {
      chuck: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
    fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {
      method: "GET",
      headers: {
        "x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
        "x-rapidapi-key": "<API KEY>"
      }
    })
      .then(response => response.json())
      .then(data => {
        this.chuck = data;
      });
    }
  }
};
</script>

Thanks!

Display API data from rapidapi in vue

2 Answers2