如何將JSON數據添加到HTML文件

Question

我正在嘗試將JSON文件中的數據傳輸到HTML文件中，因此，在編輯數據時，我只能打開一個文件，而不是編輯20個單獨的文件。

在這種情況下，經理的姓名和世界排名應該使用JSON文件中的數據顯示在HTML頁面上。 例如，HTML頁面應顯示為：“經理：Corinne Diacre”，“世界排名：5”。

這可能嗎？ 如果是這樣，我該如何解決這個問題？

countrys_women JSON文件：

{
  "france": [
    {
      "manager": "Corinne Diacre",
      "world-ranking": "5",
    }
  ],
  "england": [
    {
      "manager": "Phil Neville",
      "world-ranking": "2",
    }
  ]
}

france_women HTML文件：

    <div>
      <h1>France Women</h1>
      <p>Manager: *NAME HERE*</p>
      <p>World Ranking: *RANKING HERE*</p>
    </div>

我希望它會出現在NAME此處的 “ Corinne Diacre”和RANKING HERE的 “ 5”。

非常感謝所有幫助！

Answer 1

先決條件：

• 安裝NodeJS

• 安裝this npm package ，使之成為用於提供本地文件的簡單服務器

  npm install -g http-server

• 導航到您的index.html所在的目錄M:/Website ，然后打開命令提示符並鍵入以下命令。

  http-server --cors=*

• 這樣做將生成一個禁用了CORS的簡單HTTP服務器。

---

進行異步調用以讀取您的nations_women.json文件，然后獲取適當的DOM元素並替換其中的值。

在您的Javascript中：

window.onload = function() {

    const franceMgrEle = document.querySelector('#franceMgr');
    const franceRanking = document.querySelector('#franceRanking');

    function readLocalFile(callback) {
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const fileContents = JSON.parse(xhr.responseText);
                callback(fileContents);
            }
        };

        xhr.open("GET", "http://localhost:8080/nations_women.json", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader('Access-Control-Allow-Credentials', 'true');
        xhr.send();
    }

    function SubstituteNames(data) {
        // Substitute the value here
        franceMgrEle.innerHTML = data.france[0]['manager'];
        franceRanking.innerHTML = data.france[0]["world-ranking"];
    }

    readLocalFile(SubstituteNames);
};

在您的HTML中：

<fieldset>
  <legend>France Women</legend>
  <span> Manager: <p id="franceMgr"></p> </span>
  <span> World Ranking: <p id="franceRanking"></p> </span>
</fieldset>

您的JSON文件：

{
    "france": [{
        "manager": "Corinne Diacre",
        "world-ranking": "5"
    }],
    "england": [{
        "manager": "Phil Neville",
        "world-ranking": "2"
    }]
}