• 安安大家好，今天是延伸之前的串API的教學，也就是透過JS把JSON檔案的內容，顯示在html裡面。還沒看過的可以先看那篇喔，是最基本的JSON檔案串接教學。
• 那我們今天要講的是讀取非本地端，也就是檔案儲存在網路上面，類似之前講到的cdn，這樣抓取JSON檔案的方式會是以後非常常用的的方式。
• 這邊講一下流程，我會把檔案先上傳到一個網址localhost:3000，先用這樣的模式模擬。上傳後，基本上就只是把fetch的地方改成網址再修改一些東西之後即可，下面實際演示。
• 下載NODEJS，其必要軟體之一，https://nodejs.org/zh-tw/download。
  
• 下載完畢後npm install json-server，在終端機輸入npm install -g json-server。如果要在vscode上面輸入的話，有跑出ERROR的話，可以參考以下這篇https://akoncc.github.io/2019/11/01/vscode-cant-run-script/ 。其文章內容是說因為vscode的terminal是POWERSHELL而powershell會有一些原則，我們必須修改。修改方式是開powershell ISE，輸入get-executionpolicy，確定是 Restricted 後，再來輸入以下指令，執行後會有視窗詢問，按下確定後就能將執行原則改為 Remotesigned，set-executionpolicy remotesigned，會跳出個框框，按是即可。如果有例外狀況再詳細看那邊文章。
• 接下來輸入json-server data.json會自動在該路徑下建立一個名為data.json的file，我把它改成db.json
  

{
    "clevens": [
        {
            "name": "clevens",
            "age": 20,
            "email": "clevens@example.com"
        }
    ]
}

，按照其格式修改成自己想要的檔案即可，就可以在localhost:3000查看其檔案了。

• 接下來稍微修改html的路徑即可讀取。

<div id="data-container">
    <p><strong>姓名：</strong><span id="name"></span></p>
    <p><strong>年齡：</strong><span id="age"></span></p>
    <p><strong>Email：</strong><span id="email"></span></p>
</div>

<script>
    // 使用 JavaScript 來讀取並顯示 JSON 資料
    fetch('http://localhost:3000/db')
        .then(response => response.json())
        .then(db => {
            document.getElementById('name').textContent = db.clevens[0].name;
            document.getElementById('age').textContent = db.clevens[0].age;
            document.getElementById('email').textContent = db.clevens[0].email;

            // console.log(db);
        })
        .catch(error => console.error('讀取 JSON 檔案時發生錯誤：', error));

</script>