---
# System prepended metadata

title: "\U0001F3C5 4/6 (二) 每日任務"
tags: [JS 直播班 - 2021 春季班]

---

# 🏅 4/6 (二) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

注意事項
---
請先 [申請 API](https://hexschoollivejs.herokuapp.com/dashboard)，並參照 [API 文件](https://hexschoollivejs.herokuapp.com/api-docs/) 進行練習。

問題
---
請練習串接以下 API 取得產品列表:

![](https://i.imgur.com/B70s7XG.png)


並透過此 [CodePen 模板](https://codepen.io/znlcgmgk/pen/rNjmprp?editors=1011)，練習將取得的產品資料呈現於畫面如下:

![](https://i.imgur.com/CLZfvod.png)


回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/6UoJVtD.png)

<!-- 解答 (JS)

let baseUrl = "https://hexschoollivejs.herokuapp.com";
let api_path = "填入你的 API 名稱";
let productList = document.querySelector('.productList');

function getProduct() {
  let url = `${baseUrl}/api/livejs/v1/customer/${api_path}/products`;
axios.get(url)
  .then(function (res) {
    let product = res.data.products
    render(product);
  })
  .catch(function (error) {
    console.log(error);
  })
}
function render(product) {
  let str = '';
  product.forEach((item) => {
    str += `
      <div class="col-6 mb-3">
      <div class="card">
        <img src="${item.images}" class="card-img-top productImg" alt="${item.title}">
        <div class="card-body">
          <h5 class="card-title"><strong>標題:</strong> ${item.title}</h5>
          <p class="card-text"><strong>種類:</strong> ${item.category}</p>
          <p class="card-text"><strong>原始價格:</strong> ${item.origin_price}</p>
          <p class="card-text"><strong>售價:</strong> ${item.price}</p>
          <p class="card-text"><strong>描述:</strong> ${item.description}</p>
        </div>
      </div>
    </div>
    `
  })
  productList.innerHTML = str;
}
getProduct();

-->