Vue.js Data API Not Displaying (Using RapidAPI)

Other Questions RapidAPI
1

I’m currently exploring how to integrate an API with Vue.js. I’m utilizing data from an open-source API hosted on RapidAPI. I tested the API using Postman with this URL: https://covid-19-data.p.rapidapi.com/report/country/name?name=Italy&date=2020-04-01, which returned the expected output. However, when I attempt to fetch the same data in my Vue.js application, no data appears. Are there any potential issues in my iteration logic? Below is a sample of my Vue.js code for reference:

<template>
  <div v-for="item in items" :key="item.id">
    {{ item.country }}
    {{ item.confirmed }}
  </div>
</template>

<script>
export default {
  data() {
     return {}
  },
  computed: {
    items() {
        return this.$store.state.items
    }
  },
  mounted() {
    this.$store.dispatch("fetchItems");
  }
};
</script>

import axios from 'axios';

const requestOptions = {
    method: 'GET',
    url: 'https://covid-19-data.p.rapidapi.com/country',
    params: {name: 'italy'},
    headers: {
      'x-rapidapi-key': '1031599022msh37c84da8c4e9b0ap1047d6jsn4d6475b64dc7',
      'x-rapidapi-host': 'covid-19-data.p.rapidapi.com'
    }
};

const covidModule = {
    state: () => ({
      items: []
    }),
    mutations: {
      updateItems(state, newData) {
         state.items = newData;
      }
    },
    actions: {
      fetchItems({ commit }) {
        axios.request(requestOptions)
        .then(result => {
            commit('updateItems', result.data);
            console.log(result.data);
        })
        .catch(error => {
            console.error(error);
        });
      }
    },
};

export default covidModule;

The output from my console.log(result.data) is shown in the screenshot below:

response_image
response_image316×246 5.03 KB

2

The problem seems to be with how you're accessing the data in the template. The API response structure might be different from what you're expecting. Modify your code to log and inspect the format of result.data in the console, and adjust the template accordingly. For instance, if result.data is an array of objects, your template should match that structure. Make sure each item has a country and confirmed property.

<template>
  <div v-for="item in items" :key="item.id">
    {{ item.country }}
    {{ item.confirmed }}
  </div>
</template>

Ensure item.id exists or use another unique property for the :key. Confirm the API response structure with another console.log(result.data). Adjust the v-for loop accordingly if result.data is nested.

3

Hi Harry47, it looks like the issue might be rooted in how the result.data is structured versus how you're trying to access it in your template. Let me guide you with some actionable steps:

1. **Inspect the API response structure:** You've already logged result.data. Take a close look at the structure. For example, if result.data is an array of objects, ensure that each object has a country and confirmed field.

2. **Update the template based on the structure:** Adjust your template to reflect the actual data structure. If the array is nested inside another object, like result.data.reports, you'll need to adjust your store and computed properties.

<template>
  <div v-for="item in items" :key="item.id || item.country">
    {{ item.country }} - {{ item.confirmed }}
  </div>
</template>

3. **Ensure keys exist:** If item.id doesn't exist, use another unique identifier like item.country for the :key directive.

By carefully mapping your template with the actual response data, you’ll be able to display your data correctly. Let me know if this resolves the issue or if further tweaks are needed!