jQuery 使用ajax獲取JSON資料問題

jquery ajax json

Coding小僧 2022-10-21 15:17:20 ‧ 979 瀏覽

分享至

資料來源：(隨便抓的)
https://soa.tainan.gov.tw/Api/Service/Get/08da54b2-cbff-406d-aa76-57d085e41f50

原本的寫法如下：

<div id="div1"></div>
<button id="btn" class="btn btn-success">Get Ajax Simple</button>
<script>
    let url = "https://soa.tainan.gov.tw/Api/Service/Get/08da54b2-cbff-406d-aa76-57d085e41f50";
    $("#btn").click(function () {
        $.get(url, function (result) {
            $.each(result, function (index, item) {
                $("#div1").append("<p>" + index + ":" + item + "</p>");
            })
        })
    })
</script>

這樣結果會是如下圖：

實際想要的資料是data屬性裡面的內容，可是我想不到如何才能讀到這一層...

結果PO完自己就找到答案了@@
改成類似下面這樣就可以了,重點在each後面的result參數直接加上.data

    $("#btn").click(function () {
        $.get(url, function (result) {
            $.each(result.data, function (index, item) {
                $("#div1").append("<p>" + item.區域別 + ":" + item.總計總計 + "</p>");
            })
        })
    })

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Wozski

iT邦新手 5 級 ‧ 2022-10-21 16:52:21

摁摁,最一開始的時候傳的資料格式不對,所以導致後面只會顯示 Object.
不過目前的話,如果不是特別想練習傳統 Ajax 的話,也許可以考慮使用 Fetch.
Fetch 的結構也會比傳統 Ajax(XHR) 模式更容易閱讀,使用 catch 更好除錯.

參考資料：
Fetch 和 Ajax 有什么区别？

回應 1
分享
檢舉

淺水員 iT邦大師 6 級 ‧ 2022-10-21 21:44:32 檢舉

我沒記錯的話
fetch 還沒辦法追蹤下載進度
而 XMLHttpRequest 可以

登入發表回應

woeichern

iT邦新手 1 級 ‧ 2022-10-22 13:30:47

建議可以使用JS內建的函數 forEach

    $("#btn").click(function () {
        $.get(url, function (result) {
            result.data.forEach( (item, index, arr) => {
                $("#div1").append("<p>" + item.區域別 + ":" + item.總計總計 + "</p>");
            });
        })
    })