JS 筆記 - innerHTML 與 for 迴圈的使用

物件資料

這次記錄透過 for 迴圈篩選出資料後，渲染在網頁上，未來 for 迴圈也會很常篩選 JSON 的資料內容，這次的資料如下：

var data = [
  {
    team: "bulls",
    name: "Jordan",
  },
  {
    team: "lakers",
    name: "Bryant",
  },
];

HTML 架構

這次要透過 for 迴圈要找出每一隊球員的名字，然後渲染在網頁上，這次 html 的內容有設定主題，如下：

<h1>每個球隊的球員名字</h1>
<ul class="list"></ul>

綁定元素與取得資料長度

先建立基本的元素內容與 for 迴圈：

//變數
var el = document.querySelector(".list");
var dataLen = data.length; //資料長度
for (var i = 0; i < dataLen; i++) {
  // for 迴圈
}

組字串

為了等等要將文字渲染在網頁上，這邊會多設定一個變數 str，裡面為空白，為了等等篩選資料要填入預設的空字串中，這個部份很重要，是渲染網頁的重要環節：

var el = document.querySelector(".list");
var dataLen = data.length; //資料長度
var str = ""; //建立一個空字串，要將資料填入的
for (var i = 0; i < dataLen; i++) {
  // for 迴圈
}

為了避免等等組字串寫錯，先把空位寫好：

for (var i = 0; i < dataLen; i++) {
  // for 迴圈
  var content = "<li>" + 球員名稱 + "</li>";
}

再將取資料的寫法 data[i].name 替換 球員名稱，透過加總把 變數 content 的內容回傳到 str 中，

for (var i = 0; i < dataLen; i++) {
  // for 迴圈
  var content = "<li>" + data[i].name + "</li>"; //組字串
  str += content;
}

使用迴圈取得資料

最後再用寫好的 el 選取到的 list，透過 innerHTML 的方式，把 str 裡的資料渲染到網頁上，最後完成的程式碼就會如下：

//JSON 資料
var data = [
  {
    team: "bulls",
    name: "Jordan",
  },
  {
    team: "lakers",
    name: "Bryant",
  },
];

//變數
var el = document.querySelector(".list");
var dataLen = data.length; //資料長度
var str = ""; //建立一個空字串，要將資料填入的
// for 迴圈
for (var i = 0; i < dataLen; i++) {
  var content = "<li>" + data[i].name + "</li>"; //組字串
  str += content; // 透過加總把 變數 content 的內容回傳到 str 中
}
el.innerHTML = str;
//透過 el 選取到的 list，透過 innerHTML 的方式，把 str 裡的資料渲染到網頁上

codepen: https://codepen.io/hnzxewqw/pen/ExjNRoL

心得

中間寫一兩行就用 console.log 確認一下是否有正確寫對 JS，避免寫了十幾行，才來 debug 會比較辛苦。