# 4. dataset、array 運用

### HTML:

- 在 HTML 增加一個 ul 標籤，class 取名為: list

並在標籤直接注入屬性 style

周圍推擠 20px、背景顏色:黑、文字顏色:白。

<ul style="padding: 20px; background: #000; color:aliceblue;" class="list">

</ul>

### JavaScript 寫法:

- 開始之前，先看完整程式碼，我們再來逐步解析：

var country = [
    {
        farmer: '約翰',
    },
    {
        farmer: '查理',
    },
];

var el = document.querySelector('.list');

// 以JS 來動態產生 li 標籤 並運動 for-array & data-* 的方式：


function updateList() {
    var total = country.length;
    var str = '';  // 組字串用 BJ4
    for (var i = 0; i < total; i++) {
        str += '<li data-num="' + i + '">' + country[i].farmer + '</li>';
    }
    el.innerHTML = str;
}

updateList();


// 監聽事件:

function checkName(e) {
    var checkTag = e.target.nodeName;
    if (checkTag !== "LI") { return };
    var str = e.target.dataset;
    alert('我們選擇了：' + country[str].farmer);
}

el.addEventListener('click', checkName, false);

### 這邊共有幾個重點段落:

1. **country** - 陣列資料

2. **updateList()**

3. **checkNameList()**

- 資料陣列 & 綁定 .list:

var country = [
    {
        farmer: '約翰',
    },
    {
        farmer: '查理',
    },
];

// list DOM
var el = document.querySelector('.list');

- 為什麼我們會需要先寫 // **updateList()** ?

- 原因是因為: 這個範例我們需要先有 li 標籤的產生我們才能透過後面 click 事件來完成功能，所以我們會先寫好一串資料，最後再透過 innerHTML 的方式來載入

- 並且組字串時寫入: `data-num="' + i + '"`，使得 i 根據迴圈內容資料長度來跑出相對應的筆數:

預期會顯示出兩位農夫的名字:

function updateList() {
    var total = country.length;
    var str = '';  // 組字串用 BJ4
    for (var i = 0; i < total; i++) {
        str += '<li data-num="' + i + '">' + country[i].farmer + '</li>';
    }
    el.innerHTML = str;
}

updateList();

示意圖:

---

- 控制部份， 'click' event，點擊 target.nodeName == "LI"
才能觸發後續結果，所以這邊會寫入條件

1. 設定變數: e.target.nodeName

2. 設定條件: 是 LI 才會觸發，否則則回傳 return 空值

3. 寫入變數，並且為: e.target.dataset，這個 str 非常重要

function checkName(e) {
    var checkTag = e.target.nodeName;
    if (checkTag !== "LI") { return };
    var str = e.target.dataset;
    alert('我們選擇了：' + country[str].farmer);
}

el.addEventListener('click', checkName, false);

- alert，後面則是撈取 `country[str]` 可以看到我們這邊抓 data-num 的值來抓取農夫資料，故這就是為何前面需要透過 updateList 來產生 ul>li

- 再透過產生的資料資訊--`updateList()`，

- 並且 li 綁定的 data-編號，在監聽事件內寫入區域變數
就可以和 country 資料做連結。

###### tags: `JavaScript - localStorage`