iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

For 前端小幼苗的圖解筆記系列 第 26

Ajax - 將取得的 API 資料應用於頁面中 ( 以 JSON 為例 )

續前篇,本篇示例將取得的 json 資料應用在頁面上。


完整栗子 >> Codepen Demo

  • 使用的 API 預期資料呈現如下:

HTML

<div id="contain"></div>
<h1>台灣獨立書店名冊<span>( 資料來源:政府資料開放平台 )</span></h1>
<div id="contain"></div>

JavaScript

var cros = 'https://cors-anywhere.herokuapp.com/'
var originUrl = "https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M"
var dataUrl = cros + originUrl

var xhr = new XMLHttpRequest()
xhr.open('GET',dataUrl, true)
xhr.send()
xhr.onload = function(){
    var dataset = JSON.parse(this.responseText)
    print(dataset)
}

function print(dataset){
	dataset.forEach( (data, index) => {
		let newCard = document.createElement("div")
		newCard.className = "infoCard"
		document.querySelector("#contain").appendChild(newCard)
		let newCardInfo = `
			<span class="order">${index + 1}</span>
			<h3 class="name">${data.name}</h3>
			<p class="address">${data.cityName}  ${data.address}</p>
			<p class="openTime">${data.openTime}</p>
		`
		newCard.innerHTML = newCardInfo
    })
}


剖開栗子分析一下:

先將 API URL 存成一個變數 (備註)

var cros = 'https://cors-anywhere.herokuapp.com/'
var originUrl = "https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M"
var dataUrl = cros + originUrl

撈出的資料做型別處理後存成變數 dataset,並將 dataset 傳入指定的 function (成功取得資料後要做的事)

var xhr = new XMLHttpRequest()
xhr.open('GET',dataUrl, true)
xhr.send()
xhr.onload = function(){
   var dataset = JSON.parse(this.responseText)
    print(dataset)
}

透過操作DOM與陣列的方式,將資料置入 HTML DOM 中

function print(dataset){
	dataset.forEach( (data, index) => {
		let newCard = document.createElement("div")
		newCard.className = "infoCard"
		document.querySelector("#contain").appendChild(newCard)
		let newCardInfo = `
			<span class="order">${index + 1}</span>
			<h3 class="name">${data.name}</h3>
			<p class="address">${data.cityName}  ${data.address}</p>
			<p class="openTime">${data.openTime}</p>
		`
		newCard.innerHTML = newCardInfo
	})
}

  • 定義這段 function 前,先console.log(dataset) 查看資料結構(key,value),再取對應的資料欄位於頁面中。

  • ES6 的字串寫法
    字串內穿插變數更單純、更直覺,只要整個字串前後用 ` 符包起來、變數用 ${ } 包起來,如下:

    let name = "Eudora"
    let age = 18
    let msg = ` Hi! 我是${name}!,今年${age}歲`
    console.log(msg)
    

    "Hi! 我是Eudora!,今年18歲"

    (謎:哦...真的hen好意思ㄟ!?)

  • index
    透過陣列操作方法時,也可善用 index 值(陣列中的第幾個)。例如印出該資料為所有資料的第幾筆(但 index 起始值為 0 ,故例子中在印出時刻意 +1)


好啦!以上示例將 JSON 資料帶出,還未接觸過的新手們,也試著做做看囉!


備註:

範例中使用的 API 有 CORS (Cross-Origin Resource Sharing 跨來源資源共用 ) 問題,將 API URL 前面加上 https://cors-anywhere.herokuapp.com/,以暫時避開 CORS 問題以取得資料(詳見:cors-anywhere)


個人 Blog: https://eudora.cc/


上一篇
Ajax - 以 GET 方法串接 API 資料 ( 以 JSON 為例 )
下一篇
[Vue.js] 基本語法
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言