how to display json in table vuejs

Question

how to display the following json data ? i have json data like this, and want to display it in table, i use vue-bostrapt . Previously I tried like this, but it's not perfect.

this my json

[
    {
      "id":"1",
      "name": "KINTIL",
      "desc": "Kintil is good",
      "location": [
        {
        "prov": "Jawa Barat",
        "city": "Bandung"
        },
        {
        "prov": "Banten",
        "city": "Tanggerang"
        }
      ],
      "applied": [
        {
            "item_name": "galian"
        },
        {
            "item_name": "timbunan"
        }
      ],
      "exception": [
        {
            "ex_name": "F001",
            "ex_value": "001001"
        },
        {
            "ex_name": "M001",
            "ex_value": "002002"
        }
      ]
    }
  ]

and this html

<b-table class="table spacing-table" style="font-size: 13px;" show-empty 
    :items="inovasi" :fields="fields" :current-page="currentPage" :per-page="0" :filter="filter" >
</b-table>

and this my script

import json from "../static/data.json";
export default {
  name: 'tes',
    data() {
    return {
        inovasi:[],
        filter: null,
        fields: [
         {
            key: 'id',
            label: 'id',
            sortable: true
         },
         {
            key: 'name',
            label: 'name',
            sortable: true
         },
         {
            key: 'location',
            label: 'location',
            sortable: true
         },
         {
            key: 'applied',
            label: 'applied',
            sortable: true
         },
         { key: 'actions', label: 'Doc' }
         ],
         currentPage: 0,
         perPage: 5,
         totalItems: 0
      }
  },
  mounted() {
     this.inovasi = json;
  },
  computed:{
  },
  methods: {
  }
}

this result

how to display location and applied , into a single row table ? thanks in advance for those who have answered :)

thanks

Which parameter(prov or city) do you want to show for location record? — cafertayyar
– cafertayyar, Commented Sep 9, 2021 at 9:53

cafertayyar · Accepted Answer · 2021-09-09 10:09:46Z

1

You can do it using formatter like

fields: [
   {
      key: 'id',
      label: 'id',
      sortable: true
   },
   {
      key: 'name',
      label: 'name',
      sortable: true
   },
   {
      key: 'location',
      label: 'location',
      sortable: true,
      formatter: (value, key, item) => { 
         return value.map(x => 'prov: ' + x.prov + ' city:' + x.city).join(", ") 
      }
   },
   {
      key: 'applied',
      label: 'applied',
      sortable: true,
      formatter: (value, key, item) => { 
         return value.map(x => x.item_name).join(", ") 
      }
   },
   { key: 'actions', label: 'Doc' }
],

It will show for the location column this: prov: Jawa Barat city:Bandung, prov: Banten city:Tanggerang and for the applied column this: galian, timbunan

answered Sep 9, 2021 at 10:09

cafertayyar

1,0722 gold badges7 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

how to display json in table vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related