---
tags: HW4
---

<h1 style="text-align:center;">
CP113-A-HW4
</h1>

<h3>
作業相關附件與繳交處
</h3>

###### 請<span style="color:red;"><b>直接</b></span>下載，並在對應的作答區作答。<br><br>此次作業主要是 async await / fetch，Array sort & filter & Dom Events (加分)為主要要素，作答卷會附上相關 CSS 以及 指定插入 Dom 的位置，如需自行修改也可以。<span style="color:red;"><b>但不建議更動，寫JS即可。</b></span>

[HW4-作答卷](https://drive.google.com/file/d/1oxen1Qr5hktfgh5RCkkfk4orsA_9_GXa/view?usp=sharing)
[HW4-作業繳交處](https://forms.gle/429sQtVvfvXAiD9W6)

:::warning
<h6>
時間：06/18 23：59 逾時不候
</h6>
:::

:::danger
###### 如遇有 API 打不通的問題，請速速寄信讓我知道，感恩。
:::

:::info
<h6>
作業繳交 ( 一個 html 檔案，不需要壓縮，檔名為學號 [只需要數字的部分])
<br>
如要多次繳交檔案命名方式為
<br>
<span style="color:red;"><b>學號_版本</b></span>，Ex.1086215_2.html
</h6>
<h6>
有問題請寄信至 [e-mail]，請<span style="color:red;"> 勿 </span>用 Portal 發信
<br>
若繳交時被GOOGLE拒絕，通常是你有 <span style="color:red;">"多重"</span> 的副檔名 Ex. 1086215.html.html
</h6>
:::

<h3>
相關評分與要求
</h3>

#### 評分標準

1-1 ( 20% ) Fetch API 
1-2 ( 60% ) JSON Show
2-1 ( 20% ) Table
2-2 ( 加分 ) ( 30% ) Filter 級距加分 ( 0 / 10 / 20 / 30 )
2-3 ( 加分 ) ( 30% ) Sorter 級距加分 ( 0 / 10 / 20 / 30 )

<h4>
Part 1 Fetch API & 結構重構
</h4>

##### Data col 解釋

topic=區域
sub_topic=次區域
date=新聞日期
board=新聞來源
d_v=正負面分數 (1-9)
d_a=激動分數 (1-9)
valence=綜合面向 ( pos, neu, neg )
title=新聞標題

1. Target： [20200101~20201231 隨機抽樣新聞](http://140.138.154.197:8787/CP113/A/HW4)

:::warning
###### <span style="color:red;">該 URL 會回傳 一標準 JSON 格式 DATA，可用 json() function 解譯</span><br>[json function document](https://developer.mozilla.org/zh-TW/docs/Web/API/Body/json)<br><br><br>HTML不用 require 即可使用 function，所以 Fetch function 直接用就可以了。
:::

2. Conlose log print fetch result
3. Rebuild json & console log print 出其格式如下，encoding='utf-8-sig'

{
    total:(all_news_length),
    tags:[
            {
            topic:(topic_name),
            length:(topic_news_length),
            sub_topics:[
                {
                    name:(sub_topic_name),
                    length:(sub_topics_news_length)
                }
                ...
            ]
        }
        ...
    ]
}

### sample ###
{
    total:9453,
    tags:[
            {
            topic:亞太,
            length:666,
            sub_topics:[
                {
                    name:台灣,
                    length:64
                },
                {
                    name:日本,
                    length:64
                },
                {
                    name:大陸,
                    length:64
                }
                ...
            ]
        }
        ...
    ]
}

<h4>
Part 2 建立網頁
</h4>

:::warning
必須利用 JS 撰寫，<span style="color:red"><b>不可手刻</b></span>
:::

1. 利用得到的 DATA 建立一個 Table

* 照往常的 thead tbody 架構
* 欄位有 topic, sub_topic, date, board, d_v, d_a, valence, title

2. (加分) 對 topic & valence 有個別的 filter (全部 為回復原樣子)
3. (加分) 對 date & d_v & d_a & valence 有個別的 sorter ( ASC & DESC & 回復原狀 )

<h3>
Code Tips
</h3>

<div>
    <div id="filter">
        <div>
            <span>Filter</span>
        </div>
        <div>
            <div id="topic">(topic filter 插入處)</div>
            <div id="valence">(valence filter 插入處)</div>
        </div>
    </div>
    <div id="sorter">(sorter 插入處)</div>
</div>
<div id="table">(table 插入處)</div>

文字 sort sample

col=element.target.innerHTML;

ASC
data = data.sort(function (a, b) {
	return a[col] > b[col] ? 1 : a[col] < b[col] ? -1 : 0;
});
    
DESC
data = data.sort(function (a, b) {
	return b[col] > a[col] ? 1 : b[col] < a[col] ? -1 : 0;
});


filter sample

data = data.filter(function (item) {
	return item.topic == ele.target.innerHTML;
});

json array 取值 sample

data = [
            {
                title:'YAYAYA',
                content:'ioleiole'
            },
            {
                title:'BilaBila',
                content:'PachuPachu'
            },
            {
                title:'Taiwai naboone',
                content:'RRRRRRRR'
            },
    ]
    
取 第2個的title 寫法

title = data[1]['title']

### 答案範例 ( 點擊可放大 )
###### 如圖片顯示在題目中無說明，表示不需要做到，但可以根據 CSS 去增減 Class Event ( css 皆已寫好，請根據 CSS 去增減 class )

##### Fetch result (有可能會有兩種顯示方式，皆無差，直接印出 Fetch callback 即可。)

[](https://i.imgur.com/PT0TwBy.jpg)

[](https://i.imgur.com/sl5oCHq.jpg)

##### Rebuild json (不一定為正確答案)

[](https://i.imgur.com/rOSdjn4.jpg)

##### 原始樣子

[](https://i.imgur.com/qYsUvoD.jpg)

##### Topic Filter

[](https://i.imgur.com/nA6xQsl.gif)

##### Valence Filter

[](https://i.imgur.com/rGLRlI7.gif)

##### Sorters

[](https://i.imgur.com/SbeifGU.gif)