AnswerBun.com

Can't fetch data from API using Vue and Axios

I’m creating an e-learning website where there are cards of courses that you can pick. Here are my codes

<template>
<div>
  <v-container>
      <v-row>
          <v-col md="3" offset-lg="1">
              <Categories />
          </v-col>
          <v-col md="9" lg="7">
              <CourseList v-bind:list="list"/>
          </v-col>
      </v-row>
  </v-container>
</div>
</template>

<script>
import CourseList from '@/components/courses/CourseList.vue'
import Categories from '@/components/courses/Categories.vue'
import axios from 'axios'


export default {
  components: {
    CourseList,
    Categories
  },
  data() {
         return {
            list: []
         }
  },
  mounted: function() {
            axios
                .get('https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course')
                .then(res => this.list = res.body)
                .catch(err => console.log(err))
        }
}
</script>

CourseList.vue

<template>
  <div>
      <h2>Courses</h2>

      <v-row>
          <v-col sm="6" md="4">
              <VerticalCard v-bind:list="list"/>
              
          </v-col>
      </v-row>
      
  </div>
</template>

<script>
import VerticalCard from '@/components/cards/VerticalCard.vue'

export default {
    name: "CourseList",
    components: {
        VerticalCard
    },
    props: ["list"]
}
</script>

My problem is I haven’t been able to fetch the data from API link ->
https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course

I wonder what am I doing wrong. I have also tried to use {{list}} to get the data, but it didn’t work. My goal right now is to get all the data even though it will look messy. Sorry for my bad English and thank you!

Stack Overflow Asked by Via on December 31, 2020

2 Answers

2 Answers

axios wraps data in data object so instead of .then(res => this.list = res.body)it should be.then(res => this.list = res.data.body)

Correct answer by Aliasgher Nooruddin on December 31, 2020

every data response that requested by axios will wrap in data object, so you need to get body data from data.body. you can check by console.log(res)

const uri = 'https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course'
axios
  .get(uri)
  .then(res => {
    console.log(res)
    let {data: {statusCode, body}} = res
    if(statusCode == 200)
      this.list = [...body]
  })
  .catch(err => console.log(err))

Answered by garudamon on December 31, 2020

Add your own answers!

Related Questions

How to write a range syntax in Peg JS

2  Asked on March 3, 2021 by hemraj-rijal

     

How to randomize two characters in multiple Lines?

4  Asked on March 3, 2021 by malgosh

 

How can I connect to a VPN in docker not using VPN images?

2  Asked on March 2, 2021 by tiago-machado

     

Prevent infinite recursion in c++

4  Asked on March 2, 2021 by joo-menicucci

 

Convert data.frame to time series

1  Asked on March 2, 2021 by davide

       

Border behind grid line

2  Asked on March 1, 2021 by ronara

     

React redux prop object property undefined

1  Asked on March 1, 2021 by bbarriatos

         

.gitignore doesn’t work in windows terminal

2  Asked on February 28, 2021 by a100d

 

Get specific values

1  Asked on February 28, 2021

 

Copy locust file into volume via YML in kubernetes

1  Asked on February 28, 2021 by moses-liao-gz

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.