Axios GET is not collecting any information

Question

Save it, I’m having trouble collecting data from a weather API. My goal is to collect much of the rain data and for this I am using Vue Axios but I can not collect anything because even after changing the code the same error continues.

Code:

new Vue({
   el: '#app',
   data() {
      return {
         info: null,
         loading: true,
         errored: false
      }
   },
   filters: {
      currencydecimal(value) {
          return value.toFixed(2)
      }
   },
   mounted() {
      axios
          .get('http://apiadvisor.climatempo.com.br/api/v1/forecast/locale/6731/days/15?token=5ffc1cd67c7deb0d259d9388ea9db118')
          .then(response => {
            this.info = response.data.rain
          })
          .catch(error => {
            console.log(error)
            this.errored = true
          })
          .finally(() => this.loading = false)
  }

})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">


<div id="app">
  <h1>Chuvas</h1>

  <section v-if="errored">
    <p>Pedimos desculpas, não estamos conseguindo recuperar as informações no momento. Por favor, tente novamente mais tarde.</p>
  </section>

  <section v-else>
    <div v-if="loading">Carregando...</div>

    <div v-else v-for="currency in info" class="currency">
      {{ currency.probality }} {{ currency.precipitation }}
    </div>

  </section>
</div>

Since I’m new to language I don’t have full knowledge of it, so excuse any haha nonsense.

Thank you.

Answer 1

The problem is in the JSON structure, you are not getting the data correctly.

Axios requests return an object with response metadata and an attribute data which is the datum of the answer itself.

The API you are using returns an object in the format:

{
    id: "...",
    name: "...",
    state: "...",
    country: "...",
    data: [
        {
            date: "...",
            date_br: "...",
            rain: {
                probability: "...",
                precipitation: "...."
            },
            ...
        }
    ]
    ...
}

So what you need to notice is that you want to get the predictions that are within data, which in your case would be response.data.data.

From this just iterate over the result and show.

Example:

new Vue({
   el: '#app',
   data() {
      return {
         loading: true,
         previsoes: []
      }
   },
   mounted() {
      axios
          .get('http://apiadvisor.climatempo.com.br/api/v1/forecast/locale/6731/days/15?token=5ffc1cd67c7deb0d259d9388ea9db118')
          .then(response => { this.previsoes = response.data.data })
          .catch(error => { console.log(error) })
          .finally(() => this.loading = false)
  }

})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <h1>Chuvas</h1>

    <div v-show="loading">Carregando...</div>
    
    <ul>
      <li v-for="previsao in previsoes" key="previsao.date">
        <strong>{{ previsao.date_br }}</strong> 
        ({{ previsao.rain.probability }}% - {{ previsao.rain.precipitation }}mm)
      </li>
  </ul>
</div>