Structuring the axios callback in Vue

Question

Question

What am I missing or doing wrong in my code if I just want to display a joke in my project?

WIP demo on codepen

---

Sample JSON response

HTML

new Vue({
  el: '#app',
  data:{
    jokes: []
  },
  created(){
    this.GetJokes();  
  },
  methods: {
     GetJokes () {
      axios.get('https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke')
      .then(response => {

          let joke = response.data[0];

          let apiInfo = {
            setup: joke.setup,
            line: joke.punchline
          };
          this.jokes.push(apiInfo)
      })
    }
  }
})

JS - babel

 new Vue({ el: '#app', data:{ jokes: [] }, created(){ this.GetJokes(); }, methods: { GetJokes () { axios.get('https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke') .then(response => { let joke = response.data[0]; let apiInfo = { setup: joke.setup, line: joke.punchline }; this.jokes.push(apiInfo) }) } } }) 

Answer 1

Your response is not an array. You just need

let joke = response.data

And that will fix your code.

Here is your pen updated .