<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 &copy; 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>