建立一個蔬菜網

步驟

撈取資料&渲染












































// JSON 檔案網址
const url = "https://shannon945.github.io/farm_produce/data.json";
const productsList = document.querySelector(".showList");
let data = [];

/** 步驟一 **/
function getData(){
//打開註解，透過底下 axios.get 撈取 url 資料
//透過 console.log 觀看是否正確撈取資料
//將撈取回來的資料賦予在變數 data 上
// axios.get(帶入url)
//   .then(function (response) {
//     console.log(response.data);
//   });
}
getData();

function renderData() {
 /** 步驟二 **/
//請宣告一個變數 str 並賦予值為字串型別的空字串
//請透過 data 陣列跑 forEach ，並至少帶入第一個參數

/** 步驟三 **/
//以下步驟在 forEach {} 大括號內執行
//請將以下內容賦予給 str
//並依指示填入填空處
// str += `<tr>
        // <td>${請填入作物名稱}</td>
        // <td>${請填入上價}</td>
        // <td>${請填入中價}</td>
        // <td>${請填入下價}</td>
        // <td>${請填入平均價}</td>
        // <td>${請填入交易量}</td>
        // </tr>`;


/*＊ 步驟四 **/
//以下步驟在 forEach {} 大括號外執行
//請透過 innerHTML 給 productsList 變數賦予值
//該值為變數 str
}

/*＊ 步驟五 **/
//請在正確的位置呼叫 renderData() (請留意非同步)

篩選資料

































































// JSON 檔案網址
const url = "https://shannon945.github.io/farm_produce/data.json";
const productsList = document.querySelector(".showList");
const buttonGroup = document.querySelector(".button-group");
let data = [];
//撈取資料
function getData() {
  axios.get(url)
  .then(function (response) {
    data = response.data;
  });
}
getData();
/**          問題填答區開始       ***/
/** 步驟一 **/
//請依以下步驟改寫 renderData
//在名稱處新增一個參數 renderData(showData)
//將 data.forEach 改為 showData.forEach
//透過此方式可以呼叫 renderData 並傳入參數，組出想渲染的字串
function renderData() {
  let str = "";
  data.forEach((item) => {
    str += `<tr>
        <td>${item.作物名稱}</td>
        <td>${item.上價}</td>
        <td>${item.中價}</td>
        <td>${item.下價}</td>
        <td>${item.平均價}</td>
        <td>${item.交易量}</td>
        </tr>`;
  });
 productsList.innerHTML = str;
}

buttonGroup.addEventListener("click", (e) => {
  /** 步驟二 **/
  //請透過底下判斷式，確認點擊到的是否為 BUTTON
  if ("請填入判斷式判斷是否點擊到按鈕") {
    //請取出埋藏於 HTML button 上的 data-type 屬性值
    //將該值賦予到 type 變數上
    let type;
    let filterData = [];
    if ("請判斷 type 是否為 'N04'") {
      /** 步驟三 **/
      //請透過 data 陣列跑 filter ，並至少帶入第一個參數
      //以下步驟在 filter {} 大括號內執行
      //篩選出 data 內的種類代碼為 "N04"
      //賦予給 filterData
    } else if ("請判斷 type 是否為 'N05'") {
      //請透過 data 陣列跑 filter ，並至少帶入第一個參數
      //以下步驟在 filter {} 大括號內執行
      //篩選出 data 內的種類代碼為 "N05"
      //賦予給 filterData
    } else if ("請判斷 type 是否為 'N06'") {
      //請透過 data 陣列跑 filter ，並至少帶入第一個參數
      //以下步驟在 filter {} 大括號內執行
      //篩選出 data 內的種類代碼為 "N06"
      //賦予給 filterData
    }
    /** 步驟四 **/
    //呼叫 renderData 並傳入參數 filterData
  }
});

/**          問題填答區結束       ***/

搜尋資料





























/** 題目填答區開始  **/
/** 步驟一 **/
//註冊監聽 search 的點擊事件，並帶入事件參數
//以下步驟在監聽函式內執行
//透過 if 判斷點擊到的等於以下按鈕
//<button type="button" class="search text-white btn mb-2">搜尋</button>

/** 步驟二 **/
//以下步驟在 if 等於按鈕判斷式內執行
//選取以下節點
//<input class="rounded-end" type="search" placeholder="請輸入作物名稱" id="crop" name="crop">
//透過選取的節點判斷以上 input 欄位值濾掉空格後是否為空字串
//為空字串跳出 alert("請輸入作物名稱！") 並 return

/** 步驟三 **/
//宣告一個變數 filterData 並賦予值為空陣列
//透過 data 跑 filter，並至少帶入一個參數
//透過 filter 篩選出作物名稱與 input 欄位值相等的結果
//將篩選的值賦予給 filterData

/** 步驟四 **/
//判斷 filterData 長度等於零
//等於零的情況下
//將節點 productsList 透過 innerHTML 的方式賦予以下 HTML 標籤字串
// '<tr><td colspan="6" class="text-center p-3">查詢不到交易資訊QQ</td></tr>'
//不等於零的情況下執行函式 renderData 並帶入參數 filterData

/** 題目填答區結束  **/

排序資料







































/** 題目填答區開始 **/
/** 步驟一 **/
//註冊監聽 select 的 change 事件

/** 步驟二 **/
//底下步驟於監聽函式大括號內執行
//使用 switch 並於 switch 後方小括號內填入(e.target.value)
//判斷撰寫五個 case ，五個 case 比對的值如下：
//"依上價排序"
//"依中價排序"
//"依下價排序"
//"依平均價排序"
//"依交易量排序"
//記得每個 case 後方需透過 break; 終止

/** 步驟三 **/
//以下步驟於監聽函式內 switch 外執行
//定義一個 function 並命名為 selectChange
//帶入一個參數 value

/** 步驟四 **/
//以下步驟於 selectChange 函式內執行
//透過 data 執行陣列方法 sort
//帶入 compareFunction 函式，並於函式內帶入 a 、 b 兩參數
//透過 return 回傳 a[value] -  b[value]; 

/** 步驟五 **/
//以下步驟於 selectChange 函式內 sort 大括號外執行
//執行函式 renderData 並帶入參數 data

/** 步驟六 **/
//以下步驟於 switch 五個 case 內執行：
//"依上價排序"：呼叫 selectChange 函式並帶入參數"上價"
//"依中價排序"：呼叫 selectChange 函式並帶入參數"中價"
//"依下價排序"：呼叫 selectChange 函式並帶入參數"下價"
//"依平均價排序"：呼叫 selectChange 函式並帶入參數"平均價"
//"依交易量排序"：呼叫 selectChange 函式並帶入參數"交易量"

/** 題目填答區結束 **/

進階排序資料












































/** 題目填答區開始  **/
/** 步驟一 **/
//註冊監聽 sortAdvanced 的點擊事件
//並帶入事件參數

/** 步驟二 **/
//以下步驟於監聽函式大括號內執行
//透過 if 撰寫判斷式
//判斷點擊到的標籤是否為 <i></i> I 標籤

/** 步驟二 **/
//以下步驟於 if 判斷式內執行
//請宣告一個變數命名為 sortPrice
//將點擊時取出埋藏於 i 標籤的 data-price 值
//賦予給 sortPrice

//請宣告一個變數命名為 sortCaret
//將點擊時取出埋藏於 i 標籤的 data-sort 值
//賦予給  sortCaret

/** 步驟三 **/
//撰寫 if else 流程判斷
//在 if 的小括號內條件應填入"如果 sortCaret 取出的值相等於 "up"

/** 步驟四 **/
//以下步驟於在 if 判斷式大括號內執行
//透過 data 執行陣列方法 sort
//帶入 compareFunction 函式，並於函式內帶入 a 、 b 兩參數
//透過 return 回傳 b[sortPrice] -  a[sortPrice];
// b - a 可實現從大排到小

/** 步驟五 **/
//以下步驟在 else 大括號內執行
//透過 data 執行陣列方法 sort
//帶入 compareFunction 函式，並於函式內帶入 a 、 b 兩參數
//透過 return 回傳 a[sortPrice] -  b[sortPrice];
// a -  b 可實現從小排到大

/** 步驟六 **/
//以下步驟於 if（"判斷點擊到的為 I 標籤"）內
//if（"如果 sortCaret 取出的值相等於 "up"） else 大括號外執行
//呼叫函式 renderData 並帶入參數 data

/** 題目填答區結束  **/

沒成功的挑戰題

挑戰題二(非必填)
歡迎同學將同樣邏輯的 filter 程式碼拆分出來，包裝成一個函式！

tags: `JS`

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

如果覺得這篇文章對你有幫助，請給我個一個小小的鼓勵 ❤ 讓我知道，這會成為我寫下去很大的動力。
對了，我還有其他文章，如果有興趣也來逛逛吧！
(文章中如有覺得不妥之處、錯誤內容，也可以透過聯絡我，我會儘速改善，感謝！)

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我

建立一個蔬菜網

步驟

沒成功的挑戰題

tags: JS

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

tags: `JS`