今天複習六角學院JS學徒特訓班使用axios抓取資料的題目

在HTML上加入必要的CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

抓取節點

const allData = document.querySelector("#allData"); //所有資料
const filterData = document.querySelector("#filterData"); //篩選後的資料
const castleNum = document.querySelector("#castleNum"); //篩選後的數量

建立一個裝資料的容器

let openData; 

去開放平台找一個資料來練習，記得打開網址看一下結構。

const url = "https://api.kcg.gov.tw/api/service/GetJsonLd/82c544fa-ec50-4dea-8e8c-d8041abe8dee";

使用axios抓取資料

axios.get(url).then(res => {
    openData = res.data;
    // console.log(openData);//確認是否有正確抓取
    // console.log(openData["data"]);//確認所需資料位置
}).catch(err => {
    console.log(err);
});

處理抓取的資料，先建立方訊和存放資料的容器

const getArea = () => {
    let text = ''; //放資料的容器
    let str = ''; //放篩選後的資料
    let num = 0; //放篩選後的數量
}

使用forEach處理傳入的值

openData["data"].forEach((item, index) => {
    });

把資料放入要呈現的位置

openData["data"].forEach((item, index) => {
        text += ` <tr>
                    <th scope="row">${index+1}</th>
                    <td>${item["古蹟名稱"]}</td>
                    <td>${item["公告種類"]} </td>
                </tr>`;
        if (item["公告種類"] == "城郭") {
            num += 1;
            str += ` <tr>
                    <th scope="row">${num}</th>
                    <td>${item["古蹟名稱"]}</td>
                    <td>${item["公告種類"]} </td>
                </tr>`;
        }
    });

再用innerHTML放到畫面上

    allData.innerHTML = text;
    filterData.innerHTML = str;
    castleNum.innerHTML = num;

最後回到上方的axios處，放入方訓的執行就完成了

axios.get(url).then(res => {
    openData = res.data;
    getArea();
}).catch(err => {
    console.log(err);
});

完整的code

const allData = document.querySelector("#allData"); //所有資料
const filterData = document.querySelector("#filterData"); //篩選後的資料
const castleNum = document.querySelector("#castleNum"); //篩選後的數量

let openData; //裝資料的容器
const url = "https://api.kcg.gov.tw/api/service/GetJsonLd/82c544fa-ec50-4dea-8e8c-d8041abe8dee";

axios.get(url).then(res => {
    openData = res.data;
    // console.log(openData);
    // console.log(openData["data"]);
    getArea();
}).catch(err => {
    console.log(err);
});

const getArea = () => {
    let text = ''; //放資料的容器
    let str = ''; //放篩選後的資料
    let num = 0; //放篩選後的數量
    openData["data"].forEach((item, index) => {
        text += ` <tr>
                    <th scope="row">${index+1}</th>
                    <td>${item["古蹟名稱"]}</td>
                    <td>${item["公告種類"]} </td>
                </tr>`;
        if (item["公告種類"] == "城郭") {
            num += 1;
            str += ` <tr>
                    <th scope="row">${num}</th>
                    <td>${item["古蹟名稱"]}</td>
                    <td>${item["公告種類"]} </td>
                </tr>`;
        }
    });
    allData.innerHTML = text;
    filterData.innerHTML = str;
    castleNum.innerHTML = num;
}

連結