---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 37 - 申請 API

注意事項
---
請先 [申請 API](https://livejs-api.hexschool.io/)，並參照 [API 文件](https://hexschool.github.io/hexschoolliveswagger/) 進行練習。

> [API 簡易串接教學文件](https://chalk-freedom-ec6.notion.site/API-8b5b74eb052b451faf28013d76811fac)

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


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


## 回報流程

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


<!-- 解答：

記得載入 axios CDN，並填入自己的 API 名稱

const baseUrl = "https://livejs-api.hexschool.io";
const api_path = "填入你的 API 名稱";
const 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();

-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
|詹姆士|[CodePen](https://codepen.io/z111048/pen/dyajKzp)|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/jOdpKyp)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/oNmMywx?editors=1011)|
|維哲|[CodePen](https://codepen.io/kwz1202/pen/oNmMgyv)|
| yuan! |[CodePen](https://codepen.io/townyuan/pen/WNPKyLL)|
|Celine 510|[CodePen](https://codepen.io/Celine-510/pen/gOqjKyz)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/ExrpRWY)|
| Alyce |[CodePen](https://codepen.io/alycehwy/pen/bGzjjaX?editors=0010)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/NWoBBaQ)|
| Oria |[CodePen](https://codepen.io/kajing/pen/rNPrrKy?editors=0011)|
| Eden |[Codepen](https://codepen.io/iseden/pen/OJdwwMa)|
| yuan2781 |[CodePen](https://codepen.io/ismebir/pen/QWYBVyK)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/zYeLJLm)|
| kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/xxMJaXQ)|
| 風羽 |[CodePen](https://codepen.io/Joy-Huang/pen/dyajqZE)|
| xin |[CodePen](https://codepen.io/Estherrrrrr999/pen/xxMJyRx)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/abXjagx?editors=0010)|
| Uli |[CodePen](https://codepen.io/uli1313/pen/NWoBOwz?editors=1010)|
| 依依 |[CodePen](https://codepen.io/Rita-Yang/pen/MWLBPbZ?editors=1011)|
| Allen |[CodePen](https://codepen.io/hlctw/pen/yLZqxKp?editors=1011)|
| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/gOqjjOK)|
| shuuu |[CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/oNmMJaK?editors=1011)|
| ⭐️小正 |[CodePen](https://codepen.io/colorgolden/pen/xxMJQJP?editors=1111)|
| kawa |[CodePen](https://codepen.io/z83xji6/pen/JjxBwbm)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/vYbabqW)|
|ann6212|[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/abXjRav?editors=1010)|
| santu0868 |[CodePen](https://codepen.io/HatsumiSan/pen/yLZqrbo)|
| JUNEW |[CodePen](https://codepen.io/June-W/pen/xxMJNbo)|
| dora |[CodePen](https://codepen.io/dorayu/pen/vYbabyX?editors=1111)|
| Fabio20 |[CodePen](https://codepen.io/fabio7621/pen/PoVBvMa?editors=1111)|
| tanuki5863 |[CodePen](https://codepen.io/tanuki320/pen/YzBjoJO?editors=1011)|
| claire |[CodePen](https://codepen.io/yi-wen-chen/pen/xxMJQYX)|
| yu.t_liu |[CodePen](https://codepen.io/YuT200053/pen/jOdpgoY?editors=1010)|
| Peng |[CodePen](https://codepen.io/H-Peng/pen/LYqJRjM)|
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/eYxLdEy)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/xxMaRGN) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/XWOPNxr?editors=1111) |
| Andy | [CodePen](https://codepen.io/andy31342/pen/OJdoXwq?editors=1010) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/ExreooR?editors=1011) |
| lychee_kk |[CodePen](https://codepen.io/kakakala/pen/xxMapJy?editors=1010)|
| Ching |[CodePen](https://codepen.io/tzuchingg/pen/XWOPWgj?editors=1011)|
| hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/abXjKpo)|
| 楓仔 |[CodePen](https://codepen.io/maplestartend/pen/OJdoqor?editors=1111)|
| jamesli_92837 |[CodePen](https://codepen.io/kfovdlln-the-reactor/pen/mdvGZqL?editors=1111)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/rNPZEjV)|
|gebyman|[CodePen](https://codepen.io/gebyman/pen/oNmPrRE?editors=1010)|
|Helen|[CodePen](https://codepen.io/milkteamonster/pen/WNPavzM?editors=1010)|
|Ataraxia|[CodePen](https://codepen.io/ataraxia8888/pen/NWoyBVy)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/bGzmBPv?editors=1011)|
|skypassion5000|[CodePen](https://codepen.io/skypassion5000/pen/QWYJjQz?editors=0011)|
|奔跑吧(GTR150)|[CodePen](https://codepen.io/Wer-Qwe/pen/ExrOXva?editors=1111)|
|Vivian2857|[CodePen](https://codepen.io/vivian_lin/pen/QWYJXpx)|
|macihuang|[CodePen](https://codepen.io/macy1215/pen/oNmJbEp)|
| 歐陽龍龍#1061 |[CodePen](https://codepen.io/dizzydog-rgb/pen/xxMMaWE)|
| 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/YzBBbdg)|
| NathanJames |[CodePen](https://codepen.io/ufo060204/pen/RwvdwNX)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/KKJEqLR) |
| Yijing |[CodePen](https://codepen.io/Yi-Jing-71080635/pen/dyarJwW?editors=0010)|
| MY |[CodePen](https://codepen.io/ahmomoz/pen/QWYoZeN?editors=1011)|
| ChrisSQR |[CodePen](https://codepen.io/ChrisSQR/pen/oNmOxjw)|
| Daylily |[CodePen](https://codepen.io/daylily/pen/rNRywNQ)|
<!--
| Discord |[CodePen]()|
-->