giving more data to client to allow for later management

web/src/App.vue

@@ -1,9 +1,18 @@
 <template>
   <div id="app">
     <div>
-      <table>
-        <tr v-for="(row,rowKey) in json" :key="rowKey">
-          <td v-for="(value,key) in row" :key="key">{{value}}</td>
+      <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>
@@ -22,7 +31,7 @@ export default {
   name: "App",
   data() {
     return {
-      json: []
+      json: {}
     };
   },
   mounted() {
@@ -30,11 +39,6 @@ export default {
     fetch("?json")
       .then(res => res.json())
       .then(json => (self.json = json));
-  },
-  watch: {
-    json() {
-      console.log(this.json);
-    }
   }
 };
 </script>
@@ -47,6 +51,10 @@ td {
   padding: 5px;
 }
 
+th {
+  padding: 5px;
+}
+
 table {
   border-collapse: collapse;
 }