<template> <div id="app"> <div> <table v-if="json.headings && json.data"> <tr> <th v-for="(value, key) in json.headings.filter((val,ind)=>!json.hidden.includes(ind))" :key="key" >{{value}}</th> </tr> <tr v-for="(row,rowKey) in json.data" :key="rowKey"> <td v-for="(value,key) in row.filter((val,ind)=>!json.hidden.includes(ind))" :key="key" >{{value}}</td> </tr> </table> </div> <br /> <br /> <a style="font-size:10px" rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" >GNU General Public License v3.0 or later © Timo Hocker</a> </div> </template> <script> export default { name: "App", data() { return { json: {} }; }, mounted() { const self = this; fetch("?json") .then(res => res.json()) .then(json => (self.json = json)); } }; </script> <style> @import url("https://cdn.scode.ovh/bootstrapLight.css"); td { border: 1px solid green; padding: 5px; } th { padding: 5px; } table { border-collapse: collapse; } </style>