---
# System prepended metadata

title: javascript get data
tags: [規格書]

---

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>
```
-