0

Salve, estou tendo problemas para conseguir coletar os dados de uma API de clima. Meu objetivo é coletar boa parte dos dados de chuva e para isso estou usando Vue Axios mas não consigo coletar nada pois mesmo após mudar o código o mesmo erro continua.

Código:

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>

Como sou novo com a linguagem não tenho total conhecimento sobre ela, então desculpem qualquer bobagem haha.

Obrigado.

1
  • Se você der um console log dentro do then ele está mostrando os dados ? Commented 20/11/2018 às 17:39

1 Resposta 1

1

O problema está na estrutura do JSON, você não está pegando os dados corretamente.

As requisições do axios retornam um objeto com metadados da resposta e um atributo data que é o dado da resposta em si.

Já a API que você está usando retorna um objeto no formato:

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

Então o que você precisa notar é que você quer pegar as previsões que estão dentro de data, que no seu caso seria response.data.data.

Partindo disso é só iterar sobre o resultado e mostrar.

Exemplo:

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>

6
  • Só um adendo aí, que response e error o mais indicado seria passar dentro de () assim .then((response) => {...})
    – LeAndrade
    Commented 20/11/2018 às 17:59
  • Porque @LeAndrade? A sintaxe sem o parênteses é específico para casos onde há apenas um argumento, que é este caso. Commented 20/11/2018 às 18:19
  • cara li em uma matéria sobre Vue faz algum tempo, mas, seria mais por legibilidade mesmo, sem efeitos no código. Dependendo do tamanho do código dentro do then a variável poderia ficar 'solta' e ocasionar confusões, não sei, talvez tivessem tentando padronizar. Mesmo tendo apenas só um argumento.
    – LeAndrade
    Commented 20/11/2018 às 18:36
  • Cara, acho que é mais questão de opinião mesmo.. Eu acho mais legível sem os parênteses. Bom, de qualquer maneira, os comentários estão aí para ser lidos.. Quem cair aqui no futuro decide se usa ou não.. :) Commented 20/11/2018 às 18:46
  • Isso aí man, também achei mais tentar impor uma coisa, apesar de preferir com os (), mas vai de cada um mesmo :)
    – LeAndrade
    Commented 20/11/2018 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .