iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Modern Web

JavaScript 菜鳥研究室系列 第 2

菜鳥日記Day 2-建立「森林步道資訊網」

  • 分享至 

  • xImage
  •  

一開始先建立一個專案資料夾「Taiwan_Forest」,並新增HTML、CSS、JS檔案

  1. 設置完初始環境後,透過axios從遠端撈取林務局的資料
    https://ithelp.ithome.com.tw/upload/images/20200916/20130039Rb4UJgpVHk.png

注意:在使用axios套件時,必須在HTML的body載入axios的cdn檔,且位置必須在all.js之前,否則會顯示axios is not defined的訊息。

  1. 在撈到外部資料後,將資料儲存在變數dataList裡面(在此之前我已在function getData外面建立一個空的dataList變數)。

  2. 建立變數selectArea,並從HTML的select欄位中,將value撈出。

  3. 設定str變數為空值。

  4. 設定len變數為dataList長度的縮寫(這個設置是為了讓for迴圈使用)。

  5. 設置for迴圈,讓i從第0筆資料開始跑,當i小於dataList的總長度時,不斷重複以下的判斷式。

  6. 設置判斷式:當dataList.TR_ADMIN的值,等於selectArea撈到的值時,將content中的字串塞到str裡。原本的str為空字串,但當上述判斷式成立時,以innerHTML的方式,將content的內容放置在HTML的指定區塊(這裡是設定為ul其class名稱為TR_Content)。

如此即可將打撈到的資料,透過select選擇器的方式將文字呈現在HTML頁面裡~


上一篇
菜鳥日記Day 1-序
下一篇
菜鳥日記Day 3-什麼是JSON?
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言