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



  • 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.

    index.vue code

    index.vue page



  • 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



  • This post is deleted!


  • This post is deleted!


  • This post is deleted!


  • @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

    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>
    
    

Log in to reply