Vue.js API fetching

Question

I'm a student, and I'm just starting to use Vue. I'm making this app that displays train information, but it's not showing any data when I fetch the items from the API. It's also not giving any errors in the console.

main.js:

new Vue({
  el: "#app",
  data: {
    treinen: []
  },
  mounted() {
    fetch("https://api.myjson.com/bins/owxas")
      .then(response => response.json())
      .then((items) => {
        this.treinen = items;
      })
  },
  template: `
    <div class="flex">
     <div v-for="trein, i in treinen">
       <h1>{{ trein.title }}</h1>
     </div>
    </div>
  `,
});

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>treinen</title>
<style>

</style>
</head>

<body>
  <h1>treinen</h1>

  <div id="app"></div>

  <script src="https://unpkg.com/vue"></script>
  <script src="main.js"></script>
</body>

</html>

API:

https://api.myjson.com/bins/owxas

Screenshot of my network tab:

Can you please provide a screenshot of the "Network" tab of your developer console ? Also, I think you should put parenthesis around trein an i in your v-for : v-for="(trein, i) in treinen". You can also try to log every step of your fetch. — Thomas Ferro
– Thomas Ferro, Commented Oct 29, 2018 at 8:07
the parenthesis are not doing anything either. i also provided a screenshot of my network tab, hopefully you can see whats wrong there. — stefan de boer
– stefan de boer, Commented Oct 29, 2018 at 8:19

tony19 · Accepted Answer · 2018-10-29 09:11:33Z

Your API returns an object that looks like this:

{
  description: "Feed met alle treinstoringen en werkzaamheden op het Nederlandse spoornet."
  home_page_url: "https://www.rijdendetreinen.nl/"
  items: [{
    id: "disruption-24194-nl",
    title: "Amsterdam-Gouda: werkzaamheden elders",
    …
  }, …]
  title: "Rijden de Treinen"
  version: "https://jsonfeed.org/version/1"
}

I think you actually want to iterate over the items property of the object, in which case your v-for should be:

<div v-for="(trein, i) in treinen.items">

Alternatively, if you wanted treinen to contain only the original items array, you could destructure the items property in the last arrow-function:

fetch(...)
    .then(response => response.json())
    .then(({ items }) => { // <-- destructuring items
      this.treinen = items;
    });

Now, your original v-for (in <div v-for="(trein, i) in treinen">) would work as-is because treinen contains the intended items.

demo

Collectives™ on Stack Overflow

Vue.js API fetching

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