javascript get data === ###### tags: `規格書` ## js GET ## 使用步驟 1. 呼叫GET的function或直接寫fetch取得Promise物件儲存到變數 2. 用第一步儲存的變數取得JSON資料中需要的變數 3. 寫create Table的js程式將變數帶入 ------------------------------- > fetch > 在 JavaScript 使用 fetch() 函式時會需要傳入一段 url，它會 return 一個 promise ，這個 promise 就是我們樣處理的物件。 ```javascript= let fetchPromise = fetch(`https....`) console.log(fetchPromise) //{<pending>} ``` > .then() > 1. 要拿到 Promise 裡面的資料，我們需要使用 .then() 這個函式 > 2. .then() 裡面回傳一個值，這個值就會成為下一個 .then() 的參數 ```javascript= .then((response) => response.json()) .then((data) => {} ``` > return > 最後我們可以使用return回傳一個Promise的物件做後續的使用 ```javascript= return (getData = data); ``` > 範例 ```javascript= let getData; //用來接return 回來的Promise物件 let fetchPromise = fetch(url, { method: "GET", //method為GET headers: { "Content-Type": "application/json", //格式為JSON }, }) .then((response) => response.json()) .then((data) => { //取得Promise中的資料 return (getData = data); //回傳取得到的Promise物件 }) .catch((error) => console.error(error)); const data = await fetchPromise;//將回傳的Promise物件儲存在data中 ``` > 取得資料 > 之後若要使用Promise物件中的資料 ## js建立table >建立元素 ```javascript= const 自訂名稱 = document.createElement('要建立的元素標籤') ``` >插入一列 ```javascript= const 自訂名稱 = table.insertRow(); ``` >編輯欄位內容 ```javascript= const 自訂名稱 = document.createElement("th");//建立th元素 header1.textContent = "header1";//將th中的文字設為"header1" ``` >加入table row中 ```javascript= tableContainer.appendChild(table); headerRow.appendChild(header1); ``` > 範例 ```javascript= <!DOCTYPE html> <head></head> <body> <button onclink="createTable()"> <div id="tableContainer"></div> <script> async function eventSearch() { function createTable() { //抓到html裡table位置的div const tableContainer = document.getElementById("table-container"); //建立table元素 const table = document.createElement("table"); //插入一列 const headerRow = table.insertRow(); //建立th元素 const header1 = document.createElement("th"); const header2 = document.createElement("th"); const header3 = document.createElement("th"); //編輯欄位中的內容 header1.textContent = "header1"; header2.textContent = "header2"; header3.textContent = "header3"; //設定列的寬度 header3.colSpan = 3; //將變數加入row中 tableContainer.appendChild(table); headerRow.appendChild(header1); headerRow.appendChild(header2); headerRow.appendChild(header3); } </script } </script> </body> </html> ``` -