Unable to render API JSON data to table in vue js

Question

I have this html file that fetches data from an API and renders this into a table, it works successfully from there.

I'm trying to convert the html file over to vue but I'm having some issues, although vue can fetch the data from the API it's not showing the table at all on the webpage (eventhough I've exported the JSONTable.vue and imported it to App.vue so App.vue can access the JSONTable.vue page)

From my html files I used these two external sources which draws the table successfully:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

But I replaced it with this inside the tag because vue was throwing template errors, it fixes the template issues:

import JQuery from 'jquery'
let $ = JQuery

How do I use the external stylesheet and script from above in vue and allow it for me to get rid of 'import JQuery' (because if I remove import JQuery it will say $ is not defined)?

My vue site:

<template>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <!-- styling the table with an external css file -->
    <body>
        <div class="container">
            <div class="table-responsive">
                <h1>JSON data to HTML table</h1>
                <br />
                <table class="table table-bordered table-striped" id="tracerouteTable">
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>salary</th>
                        <th>age</th>
                        <th>image</th>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</head>
</template>

<script>

export default {
    name: 'JSONTable'
}


import JQuery from 'jquery'
let $ = JQuery 



$(document).ready(function(){
    $.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data){
        var employeeData = '';

        console.log(data);

        $.each(data, function(key, value){
            employeeData += '<tr>';
            employeeData += '<td>'+value.id+'</td>';
            employeeData += '<td>'+value.employee_name+'</td>';
            employeeData += '<td>'+value.employee_salary+'</td>';
            employeeData += '<td>'+value.employee_age+'</td>';
            employeeData += '<td>'+value.profile_image+'</td>';
            employeeData += '<tr>';
        });
        $('#tracerouteTable').append(employeeData);
    });
});

</script>

aquilesb · Accepted Answer · 2019-07-24 15:49:24Z

2

Actually, if you are using Vue, you should try to avoid use Jquery, in 99% of the time, it is not necessary.

I created this example to show you how you can do it without Jquery. Just observe two points:

OBS 1: this will not work in this example, because the CORS doesn't allow to load this data here because that, I'm using mocked data

OBS 2: I'm using fetch to make the http request, to make it works in all browser you have to use a polyfill like github fetch

const initialData = () => {
  return Promise.resolve([
    {"id":"40877","employee_name":"Lexie","employee_salary":"3331","employee_age":"60","profile_image":""},{"id":"40878","employee_name":"Randi","employee_salary":"9608","employee_age":"29","profile_image":""},{"id":"40879","employee_name":"Wilber","employee_salary":"9626","employee_age":"58","profile_image":""},{"id":"40881","employee_name":"Jena","employee_salary":"3669","employee_age":"47","profile_image":""},{"id":"40882","employee_name":"Annetta","employee_salary":"8428","employee_age":"45","profile_image":""},{"id":"40883","employee_name":"Blaze","employee_salary":"9090","employee_age":"60","profile_image":""},{"id":"40884","employee_name":"Vida","employee_salary":"8633","employee_age":"54","profile_image":""},{"id":"40885","employee_name":"Tyrese","employee_salary":"1133","employee_age":"55","profile_image":""},{"id":"40888","employee_name":"Assunta","employee_salary":"8291","employee_age":"37","profile_image":""},{"id":"40889","employee_name":"Talon","employee_salary":"7896","employee_age":"35","profile_image":""},{"id":"40891","employee_name":"Selina","employee_salary":"6091","employee_age":"68","profile_image":""},{"id":"40892","employee_name":"Madyson","employee_salary":"2057","employee_age":"39","profile_image":""}])
}

new Vue({
  el: '#app',
  data: function (){
    return {
      list: []
    }
  },
  mounted: async function (){
    /*
     OBS 1:this will not work in this example, because the CORS don't allow to load this data here
     because that I'm using mocked data
     
     OBS 2: I'm using fetch to make the http request, to make it works in all browser you have tu use a pollify
     like https://github.com/github/fetch/
    */
    
    
     //const response = await fetch("//dummy.restapiexample.com/api/v1/employees")
     //this.list = await response.json()
    this.list = await initialData()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
<div id="app">
  <div class="table-responsive">
    <h1>JSON data to HTML table</h1>
    <br />
    <table class="table table-bordered table-striped" id="tracerouteTable">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>salary</th>
          <th>age</th>
          <th>image</th>
        </tr>
       </thead>
      <tbody>
        <tr v-for="item in list" :key="item.list">
          <td>{{item.id}}</td>
          <td>{{item.employee_name}}</td>
          <td>{{item.employee_salary}}</td>
          <td>{{item.employee_age}}</td>
          <td>{{item.profile_image}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

answered Jul 24, 2019 at 15:49

aquilesb

2,2721 gold badge20 silver badges21 bronze badges

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

11 Comments

Tyler Roper Over a year ago

"Actually, if you are using Vue, you should try to avoid use Jquery, in 99% of the time, it is not necessary." - I don't think the two serve the same purpose and I disagree with your statement. Especially considering you then had to make up for the lack of jQuery by implementing a fetch polyfill. Not saying jQuery is always necessary, but I strongly disagree with the overarching "If you use X, don't use Y".

aquilesb Over a year ago

May have some cases where Jquery can help, there is some interesting plugins. If you use Jquery to change the DOM, probably you are going to have problems with vue, it won't react for your changes, it is not the recommended way. And if you are not going to manipulate the DOM with Jquery, it is overkill use the whole lib just to make ajax calls and do foreach loops (you can make it natively). The point is not "If you use X, don't use Y", the problem is only using Jquery with Vue/React/Angular/... If you didn't like fetch, you can make ajax natively as well.

Taran Basi Over a year ago

Thank you for the help, following on with OBS 2 what would the JavaScript function look like for this if I'm not using jquery? Item and list would need to be defined but I'm not sure how to write this in code. I'm also using data from this API that doesn't have a CORS issue: dummy.restapiexample.com/api/v1/employees

aquilesb Over a year ago

" what would the JavaScript function look like for this if I'm not using jquery": If you are using tools like webpack for bundle, you just have to install the pollify and add it in your main.js file. If you are not using any tool for bundle and just adding the scripts on the html file, you just have to import it, as I do in the codepen example. If your browser already has an implementation of window.fetch, the pollify won't do anything. " I'm also using data from this API that doesn't have a CORS issue", if you try to load it on codepen or here the CORS issue.

Taran Basi Over a year ago

I've imported the scripts, not using any tools for bundling but the table is still not rendering.

|

Collectives™ on Stack Overflow

Unable to render API JSON data to table in vue js

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related