Получение массива из ответа API - PullRequest
Новая
       87

Получение массива из ответа API

0 голосов
/ 08 мая 2020

Я пытаюсь сделать простой генератор отцовских шуток на Vuejs с помощью этого API https://rapidapi.com/KegenGuyll/api/dad-jokes/details Проблема в том, что я получаю множество повторений одной и той же шутки вместо одной. Смотрите снимок экрана: https://prnt.sc/sd5kgk Плюс я пытаюсь сделать кнопку, чтобы она запускала функцию выборки, но я как бы потерялся с этой библиотекой ax ios. 

<script>
import axios from "axios";
export default {
  name: "Jokes",
  data() {
    return {
      jokes: []
    };
  },
  methods: {},
  created() {
    axios
      .get(
        "https://us-central1-dadsofunny.cloudfunctions.net/DadJokes/random/jokes",
        {
          headers: {
            Accept: "application/json"
          },
          params: {
            limit: 1
          }
        }
      )
      .then(response => {
        this.jokes = response.data;
        console.log(response.data);
      })
      .catch(err => {
        alert(err);
      });
  }
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="jokes-card">
    <div v-for="joke in jokes" :key="joke.id">
      <p>{{jokes.setup}}</p>
      <p>{{jokes.punchline}}</p>
    </div>
  </div>
</template>

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Если вы посмотрите документацию ,

/ random / jokes вернет одну шутку

/ random / jokes /: count возвращает: count jokes

Следовательно, вы можете изменить свой код на что-то вроде ниже: 

methods: {
    getNJokes(n) {
        axios.get(`https://us-central1-dadsofunny.cloudfunctions.net/DadJokes/random/jokes/${n || 1}`, { headers: { Accept: "application/json" } })
             .then(response => {
                 this.jokes = response.data;
             })
             .catch(err => {
                 alert(err);
             });
    }
},
created() {
    this.getNJokes(3);
}

Тогда в вашем шаблоне это должно быть joke.setup и joke.punchline вместо jokes.setup и jokes.punchline. 

<p>{{joke.setup}}</p>
<p>{{joke.punchline}}</p>

Тогда, если вы хотите, чтобы кнопка получила дополнительную шутку: 

<button type="button" @click="getNJokes(1)">Get Different Joke</button>


Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: "#app",
  data: () => {
    return {
      jokes: []
    }
  },
  methods: {
    getNJokes(n) {
      axios.get(`https://us-central1-dadsofunny.cloudfunctions.net/DadJokes/random/jokes/${n || 1}`, {
          headers: {
            Accept: "application/json"
          }
        })
        .then(response => {
            this.jokes = response.data;
        })
        .catch(err => {
          alert(err);
        });
    }
  },
  created() {
    this.getNJokes(1);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="joke in jokes">
    <p><strong>{{joke.setup}}</strong> {{joke.punchline}}</p>
  </div>
  
  <button @click="getNJokes(1)">Get Another Joke</button>
</div>
0 голосов
/ 08 мая 2020

Итак, здесь происходит несколько вещей.

  1. Запрос random/jokes дает только одну шутку в качестве объекта. запрос random/jokes/:count используется для нескольких шуток в массиве.
  2. Вы заменяете состояние this.jokes на объект данных, возвращенный из API, поэтому v- for повторяет разметку для каждого ключа на объекте . Это приводит к тому, что он генерирует один и тот же HTML 4 раза, потому что есть 4 ключа.

Чтобы исправить это, вам нужно либо получить несколько шуток одновременно, вызвав правильную конечную точку , или вы должны изменить свой вызов ax ios так, чтобы объект, полученный от API, помещался в массив, например: 

axios
      .get(
        "https://us-central1-dadsofunny.cloudfunctions.net/DadJokes/random/jokes",
        {
          headers: {
            Accept: "application/json"
          },
          params: {
            limit: 1
          }
        }
      )
.then(response => {
        this.jokes.push(response.data);
      })
...