/**  題目一 **/
let array = [];
axios.get("https://hexschool.github.io/ajaxHomework/data.json")
  .then(function (response) {
    array = response.data;
    console.log('題目一',array); //1 
  });

console.log('題目一', array); //2


/** 填答區開始 **/

// 題目一
// 執行順序 / 印出結果
// 2 / 印出 空陣列
// 1 / 印出 response.data 回傳結果

/** 填答區結束 **/



/**  題目二 **/
// 依步驟指引將臺中市夜間急診或24小時急診動物醫院名冊 JSON 檔案資料渲染在網頁上：
let ary = [];
axios.get("https://hexschool.github.io/ajaxHomework/data.json")
  .then(function (response) {
    ary = response.data;
    console.log('題目二', ary); //1
    renderData()
  });

function renderData() {
  console.log('題目二',ary); //2
}

// console.log(ary); //3


/** 填答區開始 **/

// 題目二
// 執行順序 / 印出結果
// 3 / 印出 空陣列
// 1 / 印出 response.data 回傳結果
// 2 / 印出 response.data 回傳結果

/** 填答區結束 **/

/**  題目三(實作挑戰題:非必填) **/
// JSON 檔案網址
const url = "https://datacenter.taichung.gov.tw/swagger/OpenData/d7fbd4a8-0116-4a38-bfed-dbdbfe313e82";
const card = document.querySelector(".js-body");
let data = [];

/** 步驟一 **/
//透過 axios.get 撈取 url 資料
//透過 console.log 觀看是否正確撈取資料
axios.get(url)
  .then(function(response){
  console.log('題目三',response.data)
  
  // 撈取到的資料賦予到 data 上
  data = response.data;
  // 呼叫下方函式
  renderData();
});

/** 步驟二 **/
//定義一個函式命名為 renderData
function renderData(){
  //請宣告一個變數 str 並賦予值為字串型別的空字串
  let str = "";
  
  //請透過 data 陣列跑 forEach ，並至少帶入第一個參數
  data.forEach(function(item){
    //請將以下內容賦予給 str
    str += `<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header">${item.醫院名稱}</div>
      <div class="card-body">
        <h5 class="card-title">${item.醫院電話}</h5>
        <p class="card-text">${item.急診服務}</p>
      </div>
    </div>`;
  });
  
  //請透過 innerHTML 給 card 變數賦予值
  console.log('str',str)
  card.innerHTML = str;
}
//在步驟一的 axios.get 內呼叫 renderData()