[Solved] How to load JSON data to Quasar Table via Javascript object

[jreqthek9]

Hello. Getting into Quasar, and I need some assistance. I am trying to load a string of JSON data into a Javascript object and bind the model to a Quasar markup table. The result should be that the index.vue page will display the JSON data in the markup table.

As an example, the JSON data I am using is the employees.json file (stored in the assets folder) at http://dummy.restapiexample.com/api/v1/employees

The index.vue code is below. The <script> code simply imports the JSON data and exports it on the page, but I want to have the JSON code exported to a Javascript object and have it exported into the table.

[s.molinari]

Can you create a codepen off of this one with what you’ve done so far please? Then we can look at what you are missing.

https://codepen.io/smolinari/pen/vYOmdyp?editors=1010

Thanks.

Scott

[jreqthek9]

This post is deleted!

[jreqthek9]

This post is deleted!

[jreqthek9]

This post is deleted!

[jreqthek9]

@s-molinari

The Index.vue code displays a simple Quasar four-row markup table with 5 column headers: Id, Employee Name, Employee Salary, Employee Age, and Profile Image.

<div id="q-app">
  <div class="q-pa-md"> 
    <q-markup-table>
      <template>
        <thead>
          <tr>
            <th class="text-left">Id</th>
            <th class="text-right">Employee Name</th>
            <th class="text-right">Employee Salary</th>
            <th class="text-right">Employee Age</th>
            <th class="text-right">Profile Image</th>
          </tr>
        </thead>
      </template>
      <template>
        <tbody>
          <tr>
            <td class="text-left"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
          </tr>
          <tr>
            <td class="text-left"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
          </tr>
          <tr>
            <td class="text-left"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
          </tr>
          <tr>
            <td class="text-left"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
            <td class="text-right"></td>
          </tr>
        </tbody>
      </template>
    </q-markup-table>
  </div>
</div>

What I also have is a JSON file with the information below that will need to be displayed in the markup table:

{“status”:“success”,
“data”:[
{“id”:“1”,
“employee_name”:“Tiger Nixon”,
“employee_salary”:“320800”,
“employee_age”:“61”,
“profile_image”:""},
{“id”:“2”,
“employee_name”:“Garrett Winters”,
“employee_salary”:“170750”,
“employee_age”:“63”,
“profile_image”:""},
{“id”:“3”,
“employee_name”:“Ashton Cox”,
“employee_salary”:“86000”,
“employee_age”:“66”,
“profile_image”:""},
{“id”:“4”,
“employee_name”:“Cedric Kelly”,
“employee_salary”:“433060”,
“employee_age”:“22”,
“profile_image”:""}
]}

My main goal is to send the string of JSON data into a Javascript object and bind the model to a Quasar markup table. The result should be that the index.vue page will display the JSON data in the markup table.

[jreqthek9]

@jreqthek9

I figured it out! I just needed to adjust the v-for information. It’s working now.

<template>
  <div class="q-pa-md">
    <q-markup-table>
      <thead>
        <tr>
          <th class="text-left">Id</th>
          <th class="text-left">Employee Name</th>
          <th class="text-right">Employee Salary</th>
          <th class="text-right">Employee Age</th>
          <th class="text-right">Profile Image</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(data, index) in myJson.data"
          :key="index"
        >
          <td class="text-left">{{data.id}}</td>
          <td class="text-right">{{data.employee_name}}</td>
          <td class="text-right">{{data.employee_salary}}</td>
          <td class="text-right">{{data.employee_age}}</td>
          <td class="text-right">{{data.profile_image}}</td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>

<script>
import json from '../statics/employees.json'
export default {
  data () {
    return {
      myJson: json
    }
  }
}
</script>

[Hafeezullah]

Thanks, this worked for me