---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/qBKxRqM) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/ExRQZgQ)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/xxzYgqz)|
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/jOKZyBV?editors=1011)|
|yumy#1940|[CodePen](https://codepen.io/yumyyang/pen/zYaRNpj)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/KKeQaNN?editors=1010)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/NWzydXR)|
|圈圈#4060|[codepen](https://codepen.io/wjejfczn-the-bold/pen/OJEQWpP)|
|jimmyFang#9575|[codepen](https://codepen.io/pohxiqqo/pen/BaVYWNW?editors=1011)|
|Clara#1275|[codepen](https://codepen.io/bsupixqu/pen/VwdQpLY?editors=1010)|
|薯餅#3581|[codepen](https://codepen.io/ColdingPoTaTo/pen/RwJQpbW)|
|WEI_RIO#9342|[Codepen](https://codepen.io/wei_wu/pen/wvXygYz?editors=0010)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/VwdQpza?editors=0011)|
|Kimi #9564|[CodePen](https://codepen.io/kimihu91/pen/mdKpjNE)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/GRGQWmr?editors=1111)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/GRGQrbZ)|
|banazita#5143|[CodePen](https://codepen.io/banazita/pen/gOKvmmm?editors=1111)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/qBKxrvN)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/oNyEZqx)|
|楓之聲#6945|[Codepen](https://codepen.io/sshane258/pen/yLEvMWr)|
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/JjZpWZd?editors=1011)|
|amy芳#1385|[Codepen](https://codepen.io/amy-chieng/pen/RwJQVrx)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/xxzpyeY)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/wvXydBE)|
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/dyKdvvY)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/WNyMjEB?editors=1011)|
|shinyhung#3825|[Codepen](https://codepen.io/sean_1215/pen/VwdQPmg?editors=1010)|
|Ruby Chen#7452|[Codepen](https://codepen.io/ruby92429/pen/vYrdmeR?editors=1011)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/qBKxmqr)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/vYrdmXp?editors=1010)|
|Loran#1105|[CodePen](https://codepen.io/loranlin/pen/xxzYdop)|
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/poKaPmy)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/ExRQXxb)|
|beta lin#1445|[CodePen](https://codepen.io/linbeta/pen/BaVYZja)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/QWxQvdR)|
|Vera#5592|[CodePen](https://codepen.io/skvera/pen/MWXQpgG)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/LYrQjyE)|
|k.sin#3115|[Codepen](https://codepen.io/sin588/pen/eYKVEro?editors=0011)
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/OJEQjev?editors=1010)
|Data#9297|[Codepen](https://codepen.io/kirakira72/pen/YzveNEb)
|Hironaka#7367|[Codepen](https://codepen.io/Hironaka0815/pen/ZERrXab?editors=1010)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/PoaQJeX?editors=1010)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/WNyMZrP?editors=0010)|
|William Lai#0196|[CodePen](https://codepen.io/lai-weihan/pen/RwJQjQX?editors=1111)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/zYaRpWV)
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/mdKXXdq)|
|yoyo#1003|[Codepen](https://codepen.io/pen/WNyMMVb)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/MWXQVdV?editors=1011)
|肉桂卷#0625|[codepen](https://codepen.io/ginnlee/pen/vYrdRJM?editors=1011)
|How#5806|[codepen](https://codepen.io/howtobefine/pen/OJEQwQV)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/BaVYPJo)|
|無名#6427|[CodePen](https://codepen.io/Nomoney/pen/QWxQdmp)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/YzveOqX)|
|mou#2215|[CodePen](https://codepen.io/shihchiehlan/pen/PoaQjvz?editors=1010)|
|Lucie#3831|[Codepen](https://codepen.io/bisespei/pen/jOKZeMR)|
|勁辣雞腿寶#5817|[Codepen](https://codepen.io/orz311013/pen/RwJQqyX)|
|Jill#5577|[CodePen](https://codepen.io/Jillkate/pen/LYrQXov)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/wvXyNoY)|
|yen#5757|[Codepen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=0010)|
|hannah#2224|[Codepen](https://codepen.io/hangineer/pen/QWxQOmd?editors=1011)|
|Peng#9811|[Codepen](https://codepen.io/peng-027/pen/eYKMOBY)|
|m_m#5493|[CodePen](https://codepen.io/minnn7716/pen/NWzYKbE)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/PoaQaBX?editors=0011)|
|yoshidc#0455|[CodePen](https://codepen.io/yoshiyyc/pen/bGKvGxp)|
|powei#8484|[CodePen](https://codepen.io/harrison-wei-lai/pen/ZERxbwv?editors=1111)|
|粉蒸肉#6214|[codepen](https://codepen.io/wrightyu/pen/xxzYrMm?editors=1011)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/vYrRLeL?editors=0011) |
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/YzvaqJe?editors=0001)|
|Amberhh#2465| [codepen](https://codepen.io/Amberhh/pen/jOKZBxv) |
|Iris_#8462| [codepen](https://codepen.io/irissamy/pen/BaVrExW?editors=1010)
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/bGKMVBP?editors=1011)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/mdKLWEb) |
| kevin #6131 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/xxzjLgy?editors=1011) |
| YI#0863 | [CodePen](https://codepen.io/YI0305/pen/xxzjXXw) |
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/dyKeKZp?editors=1111)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/YzvLoKr)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/RwJJrLX)|
|Joy1712#4670|[CodePen](https://codepen.io/Joy1712/pen/NWzMqZJ?editors=1011)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/yLEEZvR)|
|Chung#5951|[CodePen](https://codepen.io/yuju16/pen/PoaaLJd?editors=0011)|
|Baozi#2042|[CodePen](https://codepen.io/lillianyu/pen/jOKxLZG)|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/poKKBNE?editors=1011)|
|yo_yo#2678|[CodePen](https://codepen.io/djmliogn-the-flexboxer/pen/LYrrKZx?editors=0011)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/gOKjYXg?editors=10110)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/eYKjgXZ)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/RwJBxZv?editors=0011)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/zYaJPRx)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/OJEBgNp?editors=1111)|
|RayPo#8090|[Codepen](https://codepen.io/raycheng/pen/abKRKKa?editors=1111)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/ExReNYL?editors=1010)|
|charlottelee849#0366|[Codepen](https://codepen.io/char849/pen/MWXPxjB?editors=0011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/wvXYZdQ?editors=0011)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/jOKQMGR?editors=1011)|
|Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/mdKvwOZ?editors=1111)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/YzvgoLd)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/wvXZErz?editors=1011)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/xxzemMe?editors=1011)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/zYLOEZR?editors=1010)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/poKOBMN?editors=1011)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/Jjapmpd)|