Callback hell

by kulimusoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="order-container">
  <p>尊貴的客戶您好，您上次的消費內容是：</p>
  <p>訂單編號：<span class="order-num"></span></p>
  <p>訂單內容：<span class="order-info"></span></p>
  <p>訂單金額：$<span class="order-amount"></span></p>
  <p>希望這次也能有機會服務您！</p>
</div>

JavaScript

const orderNum = $('.order-num');
const orderInfo = $('.order-info');
const orderAmount = $('.order-amount');

const userApi = 'https://codelove.tw/fake-api/get-current-user';
const orderApi = 'https://codelove.tw/fake-api/get-orders';
const detailApi = 'https://codelove.tw/fake-api/get-order-details';


$.get(userApi, (res) => {
  $.get(orderApi, {
    user_id: res.data.user.id
  }, (res) => {
    $.get(detailApi, {
      order_id: res.data.orders.at(-1).id
    }, (res) => {
      orderNum.text(res.data.order.id);
      orderInfo.text(res.data.order.content);
      orderAmount.text(res.data.order.amount);
    })
  })
})