<div id="app">
  <v-app>
    <v-main>
      <v-container class="pt-10 pb-5">
        <h1 class="text-center py-5">サンプルアプリ(データテーブル/JSON)</h1>
        <p class="text-justify px-10 py-5">
          使用JSONファイル: <a href="https://uedayou.net/ld/library/20210505/東京都/公共図書館.json" target="_blank" rel="noreferrer">https://uedayou.net/ld/library/20210505/東京都/公共図書館.json</a>
        </p>
        <v-divider></v-divider>
        <v-card>
          <v-card-title>
            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
          </v-card-title>
          <v-data-table :headers="headers" :items="items" :search="search"></v-data-table>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
  <v-overlay :value="isLoading">
    <v-progress-circular indeterminate size="64"></v-progress-circular>
  </v-overlay>
</div>

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      search: "",
      headers: [],
      items: [],
      isLoading: false
    };
  },
  mounted() {
    var self = this;
    self.isLoading = true;
    axios
      .get("https://uedayou.net/ld/library/20210505/東京都/公共図書館.json")
      .then(function (response) {
        var items = [];
        Object.keys(response.data).forEach(function (key) {
          var data = response.data[key];
          if (!data["http://www.w3.org/2003/01/geo/wgs84_pos#lat"]) return;
          items.push({
            label: data["http://www.w3.org/2000/01/rdf-schema#label"][0].value,
            url: key,
            id: data["http://purl.org/dc/terms/identifier"][0].value,
            pref: data["http://schema.org/addressRegion"][0].value,
            city: data["http://schema.org/addressLocality"][0].value,
            lat: data["http://www.w3.org/2003/01/geo/wgs84_pos#lat"][0].value,
            long: data["http://www.w3.org/2003/01/geo/wgs84_pos#long"][0].value
          });
        });
        self.setData(items);
      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(function () {
        self.isLoading = false;
      });
  },
  methods: {
    setData: function (data) {
      const _headers = [];
      for (const d of data) {
        const item = {};
        for (const key in d) {
          item[key] = d[key];
          _headers.push(key);
        }
        this.items.push(item);
      }
      for (const h of [...new Set(_headers)]) {
        this.headers.push({
          text: h,
          value: h
        });
      }
    }
  }
});