Obtener datos API fetch con dos headers

Buenos días.

Soy un estudiante y beginner por lo que primeramente pedir disculpas si mis preguntas son algo estúpidas.

Actualmente estoy intentando realizar como proyecto propio una app sobre estadísticas del COVID-19 el cual recojo los datos de una API. En mi anterior proyecto (una wiki de Marvel) para obtener los datos de dicha API obtuve una url única anexando url de la api + api key usando Postman, obteniendo los datos de esta manera y aplicándolos así:

export default {

  data() {

    return {

      url: "https://gateway.marvel.com:443/v1/public/characters?ts=1&apikey=XXXXXXXXXXXX",

      heroes: [],

      Character: this.$route.params.character

    };

  },

  methods: {

    getData() {

      fetch(this.url)

      .then(data => data.json())

      .then(json => (this.heroes = json.data.results));

    }

  },

  created() {

    this.getData();

  }

};

</script>

Cual es el problema ahora? Que los datos que intento obtener en la API actual tienen esta estructura:

fetch("https://covid-193.p.rapidapi.com/statistics", {
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "covid-193.p.rapidapi.com",
		"x-rapidapi-key": "XXXXXXXXXX"
	}
})
.then(response => {
	console.log(response);
})
.catch(err => {
	console.log(err);
});

El problema es que no se como aplicar dicha url con los dos headers ni tampoco como aplicar dicho fetch o si existe alguna manera de hacerlo como lo hice en mi anterior proyecto, obteniendo una url la cual ya incluya la key.

Podríais ayudarme? Muchas gracias.

Para Español, o melhor seria perguntar em http://es.stackoverflow.com :slight_smile:

para o teu problema:

  mounted() {
    const _ = this
    fetch(_.url, {
      method: 'GET',
      headers: {
        'x-rapidapi-host': 'covid-193.p.rapidapi.com',
        'x-rapidapi-key': 'XXXXXXXXXX'
     })
    .then(res => res.json()) // your return the conversion into json
    .then(json => _.heroes = json.results)) // there's is no 'data' as you already have the json
  }

ou, podes importar axios e trabalhar com axios:

  import axios from 'axios'

...

  mounted() {
    const _ = this
    axios.get(_.url, {
      headers: {
        'x-rapidapi-host': 'covid-193.p.rapidapi.com',
        'x-rapidapi-key': 'XXXXXXXXXX'
     })
    .then(res => _.heroes = res.data.results)) // axios uses 'data'  attribute
  }

Aqui tens um exemplo:

https://codepen.io/balexandre/pen/KKpJvRw?editors=1010

codigo:

Muchas gracias! Me sirvió de gran ayuda y ya puedo ver los datos. Ahora me surgen otros problemas:

  • Porque si intento acceder a todos los paises y que estos se dibujen en la tabla, no sucede nada? He de mostrar el valor en posición [0] por ejemplo para que muestre algo.
  • Por que se repite siempre el mismo valor?
  • Porque solo me aparecen 5 valores como máximo y no todos los países?

Este es el código que empleé (oculto la api key):

<v-simple-table fixed-header height="300px">

  <template v-slot:default>

    <thead class="headTable">

      <tr>

        <th class="text-left">Country</th>

        <th class="text-left">Cases</th>

        <th class="text-left">New</th>

        <th class="text-left">Deaths</th>

        <th class="text-left">New</th>

      </tr>

    </thead>

    <tbody  v-for="item in data" :key="item.name">

      <tr>

        <td>{{ data.response[0].country }}</td>

        <td>{{ data.response[0].cases.total }}</td>

        <td>{{ data.response[0].cases.new }}</td>

        <td class="deaths">{{ data.response[0].deaths.total }}</td>

        <td>{{ data.response[0].deaths.new }}</td>

      </tr>

    </tbody>

  </template>

</v-simple-table>

https://codepen.io/kinatzu/pen/mdJvqzw

no meu ultimo exemplo, data tem o valor de:

{
  "get": "statistics",
  "parameters": [],
  "errors": [],
  "results": 206,
  "response": [ ... ]
}

mas, data não é um Array, data.response é que é um Array com os dados que precisas

<tbody v-for="(item, idx) in data.response" :key="idx">
  <tr>
    <td>{{ item.country }}</td>
    <td>{{ item.cases.total }}</td>
    <td>{{ item.cases.new }}</td>
    <td class="deaths">{{ item.deaths.total }}</td>
    <td>{{ item.deaths.new }}</td>
  </tr>
</tbody>

vê bem o exemplo de como usar Arrays em Vue

mais tarde, talvez queiras filtrar:

      .then((json) => {
        const sortedData = json.response.sort((a, b) => {
          if (a.cases.total === b.cases.total) return 0
          return a.cases.total < b.cases.total ? 1 : -1
        })
        _.data = json
        _.data.response = sortedData
      })

Muchas gracias Bruno! Conseguí hacerlo gracias a ti.

Tengo una última pregunta. Vuetify tiene alguno estilos de tabla y otros componentes en los cuales crean el objeto en el Script pero, como podemos crear algo similar cuando el objeto ya lo tenemos incluido en la API?

Me refiero a algo como esto:

https://codepen.io/pen/?&editable=true&editors=101

En esa tabla Vuetify todos los valores se crean manualmente creando el objeto. Como puedo aprovechar algo así si mis objetos ya me los da una API?

Que estoy haciendo mal? Al intentar ordenar y filtrar no me muestra ningún valor en la tabla.

https://codepen.io/kinatzu/pen/qBdvdOo?editable=true&editors=101

O seu erro é não saber usar o CodePen…

tem de expecificar as livrarias a usar, o CodePen, é apenas um editor online, não sabe o que está a tentar fazer com ele… para VueJs, tem de fazer um pouco mais, basta ver o meu CodePen

  • em HTML, não pode comecar por <template>, mas sim por o que está no <body>
  • em JS, não pode comecar com <script> JS vai estar dentro de um <script>
  • está a tratar JS e HTML como um template .vue, a não ser que crie um projecto completo no CodePen, não pode tratar assim
  • no CodePen, em Settings, tem de escolher todas as livrarias Javascript e CSS que quer usar

veja tudo isso aqui num CodePen sem quase nada: https://codepen.io/balexandre/pen/NWqmVqJ

verifique:

  • settings > CSS
  • settings > JS
  • HTML
  • JS

não trate um CodePen como um component Vue, mas sim uma página HTML usando VueJs e Veutify de um CDN.

:slight_smile:

Muchas gracias balexandre. Conseguí solucionarlo :grin:

Un saludo