How can I fetch data from web service with Vue.js in html?

Question

I wanted to fetch data from web service with vue.js. But I can't take data.Is it possible to use vue.js without installing node.js? Can you help me please? Thank you in advance..

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>   <script src="https://unpkg.com/[email protected]/dist/vue-resource.min.js"></script>        
</head>
<body>
     <div id="app">             
        <table border=1>
           <thead>
             <tr>
             <th>title</th>
             </tr>
            </thead>
             <tr id="app">
             <td>{{data.title}}</td>
             </tr>
         </table>           
     </div>
<script type="text/javascript">
var dataURL = 'https://swapi.co/api/films/?format=json';

var App = new Vue({
  el: '#app',
  data: {
    posts: [] // initialize empty array
  },
  mounted() { 
    var self = this 
    $.getJSON(dataURL, function(data) {
      self.posts = data.results;
    });
  }
})
</script>
</body>
</html>

Bergur · Accepted Answer · 2019-07-01 11:49:36Z

You're adding Vue Resource, but using Jquery. Check out: https://github.com/pagekit/vue-resource

I've also made a v-for loop to loop through your posts array in the table.

Note: There is really no case case where you need JQuery when you're using VueJS.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>   <script src="https://unpkg.com/[email protected]/dist/vue-resource.min.js"></script>        
</head>
<body>
     <div id="app">             
        <table border=1>
           <thead>
             <tr>
             <th>title</th>
             </tr>
            </thead>
             <tr v-for="item in posts">
             <td>{{item.title}}</td>
             </tr>
         </table>           
     </div>
<script type="text/javascript">
var dataURL = 'https://swapi.co/api/films/?format=json';

var App = new Vue({
  el: '#app',
  data() {
    return {
      posts: [] // initialize empty array
    }
  },
  mounted() { 
    this.$http.get(dataURL).then(res => {
     this.posts = res.body.results
    });
  }
})
</script>
</body>
</html>

springbo · Accepted Answer · 2019-07-01 12:54:35Z

Looks like $ is undefined. I'm guessing thats jquery ? https://api.jquery.com/jQuery.getJSON/#jQuery-getJSON-url-data-success

Also fixed a few other things. This works for me.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>   <script src="https://unpkg.com/[email protected]/dist/vue-resource.min.js"></script><script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>       
    </head>
    <body>
         <div id="app">             
            <table border=1>
               <thead>
                 <tr>
                 <th>title</th>
                 </tr>
                </thead>
                 <tr id="app" v-for="(post, index) in posts" :key="index">
                 <td>
                 {{post.title}}
                 </td>
                 </tr>
             </table>           
         </div>
    <script type="text/javascript">
    var dataURL = 'https://swapi.co/api/films/?format=json';

    var App = new Vue({
      el: '#app',
      data() { // data should be a function
        return {
          posts: [] // initialize empty array
        }
        
      },
      mounted() { 
        var self = this 
        $.getJSON(dataURL, function(data) {
          self.posts = data.results;
        });
      }
    })
    </script>
    </body>
    </html>

Thank you @springbo. This code worked. But I wanted to show title data as a column of table like <td>{{posts.title}}</td>. But when I changed the code, it doesn't show any data.
Posts is an array. So you have display it as such or grab the first item
Edited my answer to use v-for to display the results of your api call as an array

Collectives™ on Stack Overflow

How can I fetch data from web service with Vue.js in html?

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related