Vue.js - Fetch JSON data from random API returning undefined

Question

New to developing with Vue.js so please go easy on me!

I'm trying to develop a simple app example using some random apis to get data. I was able to retrieve the json data from randomuser.me/api, however I am getting an undefined message in the console when trying to fetch data from random-data-api.com. Why is it returning undefined for one and not the other?

const app = Vue.createApp({
    
    data() {
        return {
            cafeName: 'Magnolia Bakery',
            firstName: 'John',
            lastName: 'Doe',
            email: '[email protected]',
            gender: 'male',
            picture:'https://randomuser.me/api/portraits/men/11.jpg',
            
        }
    },
    methods: {
        async getUser() {
  
            const coffeeRes = await fetch('https://random-data-api.com/api/dessert/random_dessert')
            const { coffeeResults } = await coffeeRes.json()

            const res = await fetch('https://randomuser.me/api')
            const { results } = await res.json()

            //console.log(results)
            console.log(coffeeResults)

            this.firstName =  results[0].name.first
            this.lastName = results[0].name.last
            this.email = results[0].email
            this.gender = results[0].gender
            this.picture = results[0].picture.large
            
        },
    },
})

app.mount('#app')

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body{
    font-family: Arial, Helvetica, sans-serif;
}

#app{
    width: 400px;
    height: 100vh;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
img{
    border-radius: 50%;
    border: 5px #333 solid;
}
.male{
    border-color:steelblue;
    background-color: steelblue;
    
}

.female{
    border-color: pink;
    background-color: pink;
    
}

button{
    cursor: pointer;
    display: inline-block;
    background: #333;
    color: white;
    font-size: 18px;
    border: 0;
    padding: 1rem 1.5rem;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random User Generator</title>
</head>
<body>
    <div id="app">
        <h1>{{cafeName}}</h1>
        <img :class="gender" :src="picture" :alt="`${firstName} ${lastName}`">
       <h1> {{firstName}} {{lastName}}</h1>
       <h3>Email: {{email}}</h3>
       <button v-on:click="getUser()" :class="gender">Get Random User</button>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="app.js"></script>
</body>
</html>

These are public GET APIs. So you can open them in browser to check the response. for ex: click here: random-data-api.com/api/dessert/random_dessert — im_tsm
– im_tsm, Commented Jul 8, 2021 at 16:08

im_tsm · Accepted Answer · 2021-07-08 15:53:11Z

1

The API doesn't return any data by property coffeeResults. So you cannot destructure the data by using following:

const { coffeeResults } = await coffeeRes.json()

The API(/api/dessert/random_dessert) is returning following JSON:

{
  "id": 861,
  "uid": "6ce2bf5b-26bc-443e-b3fd-7b889df08f75",
  "variety": "Cookie",
  "topping": "Marshmallows",
  "flavor": "Chocolate"
}

So instead of destructuring simply store the data in a variable:

async function fetchData() {
  try {
    const coffeeRes = await fetch('https://random-data-api.com/api/dessert/random_dessert')
    // ===> Change is here:
    const data = await coffeeRes.json()
    console.log(data)
  } catch(e) {
    console.error(e)
  }   
}

fetchData()

Also always put code containing await inside a try..catch so that you can catch error from the async call. In this case error response from API.

edited Jul 8, 2021 at 15:53

answered Jul 8, 2021 at 15:45

im_tsm

2,05119 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js - Fetch JSON data from random API returning undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related