你需要有3個檔案，分別為XXX.css XXX.json,XXX.js以及一個github賬號

首先你的html程式碼中需要新增header以及section模組，如若沒有，則會出現無法響應的情況。

其次是你XXX.css檔案對其格式的設定

XXX.json檔案則是寫出你所需要展示的內容

var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL = 'https://raw.githubusercontent.com/AMARK-BRO/WINE/master/JSON.json';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
      var superHeroes = request.response;
      populateHeader(superHeroes);
      showHeroes(superHeroes);
    }
    function populateHeader(jsonObj) {
      var myH1 = document.createElement('h1');
      myH1.textContent = jsonObj['squadName'];
      header.appendChild(myH1);
      var myPara = document.createElement('p');
      myPara.textContent = '品評人: ' + jsonObj['homeTown'] + ' ※※ 品評年份: ' + jsonObj['formed'];
      header.appendChild(myPara);
    }
    function showHeroes(jsonObj) {
      var heroes = jsonObj['members'];
      for(var i = 0; i < heroes.length; i++) {
        var myArticle = document.createElement('article');
        var myH2 = document.createElement('h2');
        var myPara1 = document.createElement('p');
        var myPara2 = document.createElement('p');
        var myList = document.createElement('ul');
        myH2.textContent = heroes[i].name;
        myPara1.textContent = '口感: ' + heroes[i].secretIdentity;
        myPara2.textContent = '價錢: ' + heroes[i].age;
        myArticle.appendChild(myH2);
        myArticle.appendChild(myPara1);
        myArticle.appendChild(myPara2);
        myArticle.appendChild(myList);
        section.appendChild(myArticle);
      }
    }

而XXX.js檔案也是最為重要的呼叫以及解析的過程

而對於你json檔案的解析，URL的生成一般由github的庫裡面新增入你的XXX.js檔案從而得到一個URL。

效果圖如上所示。