[Vuejs]-How to generate JSON data in Vue with html table

by

0👍

You should not have the this keyword in your template.

Replace what you have with this

<template>
  ...
      <tbody v-if="posts.data !== null">
        <tr
          v-for="(pieceOfData, index) in posts.data"
          :key="pieceOfData.id"
        >
          <th>{{ index + 1 }}</th>
          <td v-for="pieceOfUser in pieceOfData.user" :key="pieceOfUser.id">
            {{ pieceOfUser.id }}
            // ...
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

0👍

You need to remove this from HTML code and access the object values as given below.

new Vue({
  el: '#app',
  data: {
    posts: {
      data: [{
        "user": {
          "id": "fcc571b2-c7ca-4c5c-9d01-ab5b8019fea8",
          "phone": "456781234",
          "isVerified": true,
          "role": "NONE",
          "isContractSigned": true,
          "isRegulationsSigned": true
        },
        "profile": {
          "id": "0ee9e777-28ae-4303-8d6a-3e27e60674c8",
          "first_name": "xxxx",
          "last_name": "k",
          "birthdate": "1997-08-13 00:00:00.0",
          "id_card": "T",
          "pesel": "566",
          "street": "Reja",
          "number1": "Gy",
          "number2": "Hh",
          "postcode": "36r",
          "city": "xxx",
          "account_number": "8588398",
          "profile_status": "STUDENT",
          "distance": 100000.0,
          "fileId": null,
          "employee_status": "WAITING",
          "longitude": 21.99372019999999,
          "latitude": 50.0468653
        }
      }, {
        "user": {
          "id": "ccc571b2-c7ca-4c5c-9d01-ab5b8019fea8",
          "phone": "1456781234",
          "isVerified": true,
          "role": "NONE",
          "isContractSigned": true,
          "isRegulationsSigned": true
        },
        "profile": {
          "id": "0ee9e777-28ae-4303-8d6a-3e27e60674c8",
          "first_name": "xxxx",
          "last_name": "k",
          "birthdate": "1997-08-13 00:00:00.0",
          "id_card": "T",
          "pesel": "566",
          "street": "Reja",
          "number1": "Gy",
          "number2": "Hh",
          "postcode": "36r",
          "city": "xxx",
          "account_number": "8588398",
          "profile_status": "STUDENT",
          "distance": 100000.0,
          "fileId": null,
          "employee_status": "WAITING",
          "longitude": 21.99372019999999,
          "latitude": 50.0468653
        }
      }]
    }

  }

})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" style="border-bottom: none;">
  <table class="table table-bordered mt-5">
    <thead>
      <tr class="tr-table">
        <th scope="col">nr</th>
        <th scope="col">id</th>
        <th scope="col">first_name</th>
        <th scope="col">last_name</th>
        <th scope="col">birthdate</th>
        <th scope="col">id_card</th>
        <th scope="col">pesel</th>
        <th scope="col">street</th>
        <th scope="col">number1</th>
        <th scope="col">number2</th>
        <th scope="col">postcode</th>
        <th scope="col">city</th>
        <th scope="col">account_number</th>
        <th scope="col">profile_status</th>
        <th scope="col">distance</th>
        <th scope="col">fileId</th>
        <th scope="col">employee_status</th>
        <th scope="col">longitude</th>
        <th scope="col">latitude</th>
      </tr>
    </thead>
    <tbody v-if="posts.data !== null">
      <tr v-for="(pieceOfData, index) in posts.data" :key="index">
        <th>{{ index + 1 }}</th>
        <td>{{ pieceOfData.user.id }}</td>
        <td>{{ pieceOfData.profile.first_name }}</td>
        <td>{{ pieceOfData.profile.last_name }}</td>
      </tr>
    </tbody>
  </table>
</div>

Leave a comment