---
title: 如何整合 innerHTML 資料
tags: innerHTML, forEach
description:
---
如何整合 innerHTML 資料
---
**如何將下列物件資料，整合在HTML做呈現。**
```javascript=
const chargStation = [
{
name: '豐田',
type: '投幣',
placeNum: 10,
},
{
name: '特斯拉',
type: '感應支付',
placeNum: 12,
},
{
name: '本田',
type: '投幣',
placeNum: 8,
},
];
```
**以下為HTML部分**
- 在HTML建立`<ul>`元素，`class="list"`
```htmlmixed=
<body>
<ul class="list"></ul>
<script src="./all.js"></script>
</body>
```
**以下為JavaScript部分**
- `document.querySelector('.list')`，選取HTML`<ul>`元素，賦予給變數`list`。
- `chargStation.forEach()`，使用`forEach`將陣列`chargStation`內的物件取出。
- `{name, type, placeNum} = item`，解構賦值把物件屬性`name`、 `type`、`placeNum`取出。
- 每次`chargStation`取出物件資料，與`<li>`元素組成字串，存放在變數`str`。
- `list.innerHTML = str`，把HTML結構字串`str`賦予給HTML`<ul>`元素，成為`<ul>`元素內層的`<li>`結構。
```javascript=
const list = document.querySelector('.list');
let str = '';
chargStation.forEach(({name, type, placeNum} = item) => {
str += `<li>${name}充電站，付費方式為${type}式，共有${placeNum}個充電位置</li>`;
});
list.innerHTML = str;
```
---
### 搭配網頁初始化狀態
如果資料是從**外部**取得，取得資料時，可以用**函式**把**整合innerHTML資料**的程式碼封裝起來，將**網頁初始化**（載入網頁，資料就呈現在網頁上）。
- 建立一個名為`init`的函式。
```javascript=
function init() {
};
```
- 把整合innerHTML資料的程式碼，封裝到函式`init()`。
- 當網頁重新載入時，再呼叫`init()`，完成網頁初始化。
```javascript=
function init() {
const list = document.querySelector('.list');
let str = '';
chargStation.forEach(({name, type, placeNum} = item) => {
str += `<li>${name}充電站，付費方式為${type}式，共有${placeNum}個充電位置</li>`;
});
list.innerHTML = str;
};
init();
```
---
### 篩選條件增加流程
- 監聽HTML的`<div>`元素`filterType`的`click`行為。如果點擊到`<button>`以外的元素，`e.target.value`會顯示`undefined`，若監聽`click`行為滿足此條件則會`return`中斷監聽。
- 監聽`click`行為，同時`e.target.value`代入，將`chargeStation`的資料進行`forEach()`。
- `forEach()`內的條件式，從`<button>`元素取得`e.target.value`跟物件的type屬性值做比較。
- 依照點擊不同的按鈕`e.target.value`也會不同，為`true`的，則會與變數`str`做字串累加。
- 變數`str`最後再把累加字串，賦予給`<ul>`元素內形成HTML結構。
```javascript=
// 篩選資料
filterType.addEventListener('click', (e) => {
if (e.target.value === undefined) return;
let str = '';
chargeStation.forEach(({ name, type, placeNum } = item) => {
type === e.target.value ? str += htmlStr(name, type, placeNum) : e.target.value === '全部' ? str += htmlStr(name, type, placeNum) : str += ``;
})
list.innerHTML = str;
});
```
---
### 使用箭頭函式，封裝html結構字串
- 使用箭頭函式，把樣板字面值``<li>${name}充電站，付費方式為${type}式，共有${placeNum}個充電位置</li>``封裝起來，並且`return`出來。
- 並代入參數`name`, `type`, `placeNum`，然後賦予給變數`htmlStr`。
```javascript=
const list = document.querySelector('.list');
const filterType = document.querySelector('.filterType');
const chargeType = document.querySelector('.chargeType');
const htmlStr = (name, type, placeNum) => { return `<li>${name}充電站，付費方式為${type}式，共有${placeNum}個充電位置</li>` };
// 初始化
function init() {
chargeType.value = 0;
let str = '';
chargeStation.forEach(({name, type, placeNum} = item) => {
str += htmlStr(name, type, placeNum);
});
list.innerHTML = str;
};
init();
// 篩選資料
filterType.addEventListener('click', (e) => {
if (e.target.value === undefined) return;
let str = '';
chargeStation.forEach(({ name, type, placeNum } = item) => {
type === e.target.value ? str += htmlStr(name, type, placeNum) : e.target.value === '全部' ? str += htmlStr(name, type, placeNum) : str += ``;
})
list.innerHTML = str;
});
```
---
### 經由監聽click行為，增加資料到物件
**HTML部分**
- `<select>`選單裡的`<option value="0" disabled>付款方式</option>`，做為預設選單，點擊後無法再次選取。
```htmlmixed=
<h2>新增資料</h2>
<input type="text" class="chargeName" placeholder="充電站名稱">
<select class="chargeType">
<option value="0" disabled>付款方式</option>
<option value="投幣">投幣式</option>
<option value="感應支付">感應支付式</option>
</select>
<input type="number" class="chargePlace" placeholder="充電位置數量">
<button type="button" class="addData" value="新增">新增</button>
```
**JavaScript部分**
- `document.querySelector()`分別把`<input>`、`<select>`、`<button>`元素選擇後，賦予給變數。
- `<button>`元素監聽`click`行為，`<input>`、`<select>`的value賦予給物件`obj`的屬性值，最後物件`obj`再`.push()`到`chargeStation`陣列資料內。
- 點擊**送出**按鈕後`<input>`、`<select>`的value值將其清空（賦予空字串、0）。
- 最後再呼叫`init()`進行資料（包含新建資料）呈現在畫面上的初始化。
```javascript=
const chargeName = document.querySelector('.chargeName');
const chargePlace = document.querySelector('.chargePlace');
const btnAdd = document.querySelector('.addData');
btnAdd.addEventListener('click', (e) => {
let obj = {};
obj.name = chargeName.value;
obj.type = chargeType.value;
obj.placeNum = +chargePlace.value; // 轉型為number
chargeStation.push(obj);
chargeName.value = '';
chargeType.value = 0; // 點選新增後，<select>選單要恢復成付款方式（預設值）
chargePlace.value = 0;
init();
});
```
Sign in with Wallet
Connect another wallet