Vuejs How to render a table based on JSON data

Question

I have this JSON-array which looks like this:

"data": {
   "cells": [
    [
     {
      "rowIndex": 0,
      "columnIndex": 0,
      "value": "<p>This is some value</p>",
      "type": "th",
      "scope": "col"
     },
     {
      "rowIndex": 0,
      "columnIndex": 1,
      "value": "<p>Another value</p>",
      "type": "th",
      "scope": "col"
     }
    ],
    [
     {
      "rowIndex": 1,
      "columnIndex": 0,
      "value": "<p>Blabla blabla</p>",
      "type": "td",
      "scope": null
     },
     {
      "rowIndex": 1,
      "columnIndex": 1,
      "value": "<p>Lorem ipsum</p>",
      "type": "td",
      "scope": null
     }
    ]
   ],
 }

Now I want to render this data in a table in my vuejs-app, so I tried to do this:

First get the data through computed value:

computed: {
    tableData() {
        return this.content.data.cells;
    },
},

Then render the data through a table:

<table>
    <tr v-for="cell in tableData" :key="cell.id">
        <template v-if="cell.type === 'th'">
            <th v-for="header in cell" :key="header">
                {{ header.value }}
            </th>
        </template>
        <template v-if="cell.type === 'td'">
            <td v-for="celldata in cell" :key="celldata">
                {{ celldata.value }}
            </td>
        </template>
    </tr>
</table>

But this shows nothing, the fields are just empty. What am I doing wrong?

tony19 · Accepted Answer · 2022-07-16 01:57:06Z

Given that the cells array contains one array for each row, you must test row type with row[0].type
Cell content is html, so using interpolation {{ }} is not enough - you need to use v-html
You are using :key="cell.id" but I do not see any id field in the data itself...
You can simplify the template and eliminate duplicity by using special Vue is attribute

const data = {
  "cells": [
    [{
        "rowIndex": 0,
        "columnIndex": 0,
        "value": "<p>This is some value</p>",
        "type": "th",
        "scope": "col"
      },
      {
        "rowIndex": 0,
        "columnIndex": 1,
        "value": "<p>Another value</p>",
        "type": "th",
        "scope": "col"
      }
    ],
    [{
        "rowIndex": 1,
        "columnIndex": 0,
        "value": "<p>Blabla blabla</p>",
        "type": "td",
        "scope": null
      },
      {
        "rowIndex": 1,
        "columnIndex": 1,
        "value": "<p>Lorem ipsum</p>",
        "type": "td",
        "scope": null
      }
    ]
  ],
}

const vm = new Vue({
  el: "#app",
  data() {
    return {
      data
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

<div id="app">
  <table class="table is-bordered">
    <tr v-for="(row, idx) in data.cells" :key="idx">
      <th v-for="cell in row" :is="cell.type" :key="`r${idx}_c${cell.columnIndex}`" v-html="cell.value">
      </th>
    </tr>
  </table>
</div>

Tolumide · Accepted Answer · 2021-06-23 09:34:36Z

0

You're working with JSON data. You really need to parse the json back into javascript datatype first with the JSON.parse() method.

You can read up on this on mdn

answered Jun 23, 2021 at 9:34

Tolumide

9939 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vuejs How to render a table based on JSON data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related