What is the best way to retrieve information from a web service using Vue.js within an HTML environment?

Question

What is the best way to retrieve information from a web service using Vue.js within an HTML environment?

I'm trying to retrieve data from a web service using vue.js, but I'm having trouble fetching the data. Can I use vue.js without installing node.js? Any help would be appreciated. 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76000313364458465845">[email protected]</a>/dist/vue.js "></script>   <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04727161297661776b7176676144352a342a37">[email protected]</a>/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: [] // starting with an empty array
  },
  mounted() { 
    var self = this 
    $.getJSON(dataURL, function(data) {
      self.posts = data.results;
    });
  }
})
</script>
</body>
</html>

javascript vue.js

Answer 1

Answer №1

You've included Vue Resource, but are also using JQuery. For more information, visit: https://github.com/pagekit/vue-resource

I have implemented a v-for loop to iterate through the posts array in your table.

It's important to note that there is no scenario where you would require JQuery while working with 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1365667653213d233d20">[email protected]</a>/dist/vue.js"></script>   <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d4d7c78fd0c7d1cdd7d0c1c7e2938c928c91">[email protected]</a>/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>

Answer 2

You've included Vue Resource, but are also using JQuery. For more information, visit: https://github.com/pagekit/vue-resource

I have implemented a v-for loop to iterate through the posts array in your table.

It's important to note that there is no scenario where you would require JQuery while working with 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1365667653213d233d20">[email protected]</a>/dist/vue.js"></script>   <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d4d7c78fd0c7d1cdd7d0c1c7e2938c928c91">[email protected]</a>/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>

Answer 3

Answer №2

Seems like the $ symbol is not defined. My best guess is that it pertains to jquery ? https://api.jquery.com/jQuery.getJSON/#jQuery-getJSON-url-data-success

I also addressed a few other issues. This solution is functional 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9c9f8faad8c4dac4d9">[email protected]</a>/dist/vue.js"></script>   <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="295f5c4c045b4c5a465c5b4a4c69180719071a">[email protected]</a>/dist/vue-resource.min.js"><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>

Answer 4

Seems like the $ symbol is not defined. My best guess is that it pertains to jquery ? https://api.jquery.com/jQuery.getJSON/#jQuery-getJSON-url-data-success

I also addressed a few other issues. This solution is functional 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9c9f8faad8c4dac4d9">[email protected]</a>/dist/vue.js"></script>   <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="295f5c4c045b4c5a465c5b4a4c69180719071a">[email protected]</a>/dist/vue-resource.min.js"><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>

What is the best way to retrieve information from a web service using Vue.js within an HTML environment?

Answer №1

Answer №2

Similar questions

Steps for updating the nested array object using the unique identifier: "id"

Ways to determine if a device possesses a specific capability

Modify the style of a webpage through JavaScript

Smoothly scroll to the bottom of a dynamically updated div using native JavaScript

Implementing a live search feature in Jquery, similar to the filtering capabilities found in Angular JS

working with json files in node.js

converting an angular object into a string representation

The perplexing behavior of RxJS Observables with Mongo Cursors

Encountered the error message "Router.js file throwing a TypeError: next is not a function" while implementing navigation guards in my Vue 3 project

Updating the placeholder text of a textarea using a conditional statement in PHP

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

After refreshing, Angular route using html5Mode leads to a 'Page Not Found' error page

Directive for displaying multiple rows in an Angular table using material design

Is there a more efficient alternative to `[].push.apply(this, arr)` for combining elements in an array instance within a constructor?

Angular 2 FileReader: A comprehensive guide

Basic inquiry about Ajax

Steps to make a pop-up window for text copying by users

Is there a way to display the output of jQuery in an input box rather than a span?

The response from the node is not accurate

Troubleshooting a glitch with passing a variable to a PHP script using AJAX