title: how to display json in table vuejs
body: <p>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.</p>
  <p>this my json</p>
  <pre><code>[
      {
        &quot;id&quot;:&quot;1&quot;,
        &quot;name&quot;: &quot;KINTIL&quot;,
        &quot;desc&quot;: &quot;Kintil is good&quot;,
        &quot;location&quot;: [
          {
          &quot;prov&quot;: &quot;Jawa Barat&quot;,
          &quot;city&quot;: &quot;Bandung&quot;
          },
          {
          &quot;prov&quot;: &quot;Banten&quot;,
          &quot;city&quot;: &quot;Tanggerang&quot;
          }
        ],
        &quot;applied&quot;: [
          {
              &quot;item_name&quot;: &quot;galian&quot;
          },
          {
              &quot;item_name&quot;: &quot;timbunan&quot;
          }
        ],
        &quot;exception&quot;: [
          {
              &quot;ex_name&quot;: &quot;F001&quot;,
              &quot;ex_value&quot;: &quot;001001&quot;
          },
          {
              &quot;ex_name&quot;: &quot;M001&quot;,
              &quot;ex_value&quot;: &quot;002002&quot;
          }
        ]
      }
    ]
  </code></pre>
  <p>and this html</p>
  <pre><code>&lt;b-table class=&quot;table spacing-table&quot; style=&quot;font-size: 13px;&quot; show-empty 
      :items=&quot;inovasi&quot; :fields=&quot;fields&quot; :current-page=&quot;currentPage&quot; :per-page=&quot;0&quot; :filter=&quot;filter&quot; &gt;
  &lt;/b-table&gt;
  </code></pre>
  <p>and this my script</p>
  <pre><code>import json from &quot;../static/data.json&quot;;
  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: {
    }
  }
  </code></pre>
  <p>this result
  <a href="https://i.stack.imgur.com/69V0C.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69V0C.jpg" alt="enter image description here" /></a></p>
  <p>how to display location and applied , into a single row table ?
  thanks in advance for those who have answered :)</p>
  <p>thanks</p>