Axios GET is not collecting any personally identifiable information

Question

Axios GET is not collecting any personally identifiable information

Navigation

#1 by (1 votes)

0

Save, I'm having trouble collecting data from a weather API. My goal is to collect a lot 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><scriptsrc="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><linkhref="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>

As I'm new to language I do not have full knowledge of it, so sorry for any nonsense haha.

Thank you.

javascript html vue.js axios

asked by anonymous 20.11.2018 / 17:59

1 answer

Return to the registration screen No notification appears in chrome only in firefox [duplicate]

score 1 · Accepted Answer

The problem is in the JSON framework, you are not picking up the data correctly.

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

Now 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 note is that you want to get forecasts 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><scriptsrc="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>