<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-simple-table>
          <template v-slot:default>
            <thead>
              <tr>
                <th>ID</th>
                <th>名称</th>
                <th>URL</th>
                <th>都道府県</th>
                <th>市区町村</th>
                <th>緯度</th>
                <th>経度</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in items" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.label }}</td>
                <td>{{ item.url }}</td>
                <td>{{ item.pref }}</td>
                <td>{{ item.city }}</td>
                <td>{{ item.lat }}</td>
                <td>{{ item.long }}</td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </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 {
      items: [],
      isLoading: false
    };
  },
  mounted() {
    var self = this;
    self.isLoading = true;
    axios
      .get("https://uedayou.net/ld/library/20210505/東京都/公共図書館.json")
      .then(function (response) {
        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;
          self.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
          });
        });
      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(function () {
        self.isLoading = false;
      });
  }
});