Vue.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js"></script>

<table id="app">
  <tr>
    <th>Name:</th>
    <td>{{ name }}</td>
  </tr>
  <tr>
    <th>Handle:</th>
    <td>{{ nick }}</td>
  </tr>
  <tr>
    <th>Email:</th>
    <td><a v-bind:href="mbox">{{ mbox }}</a></td>
  </tr>
  <tr>
    <th>Website:</th>
    <td><a v-bind:href="homepage">{{ homepage }}</a></td>
  </tr>
  <tr>
    <th>Depiction:</th>
    <td><img class="thumbnail" v-bind:src="depiction"></img></td>
  </tr>
</table>

<script type="text/javascript">
  Vue.createApp({
    data: function() {
      return {
        name: '',
        nick: '',
        mbox: '',
        homepage: '',
        depiction: '',
      };
    },
    created: function() {
      var caller = this;
      axios
        .get('/james.json')
        .then(function (response) {
          caller.name = response.data.name;
          caller.nick = response.data.nick;
          caller.mbox = response.data.mbox;
          caller.homepage = response.data.homepage;
          caller.depiction = response.data.depiction;
        })
        .catch(function (error) {
          console.error(error.message);
        });
    },
  }).mount('#app');
</script>