説明

使用外部（後台）資料，不用自己建構資料模型。

步驟

1. 使用ajax串接後台api
2. 印出資料，success：成功
3. 將function内資料外接
4. 之後使用tododata變數，可以在外部編輯這筆資料

範例

div#notify

// 3 將function内資料外接
var tododata;

// 1 使用ajax串接後台api
$.ajax(
 {
  url: "https://goo.gl/PBvlqI",
 // 2 印出資料，success：成功
  success: function(res){
   $("#notify").text(res);
   tododata=res;
  }
 }
);

// 4 之後使用tododata變數，可以在外部編輯這筆資料

（按下載入不安全的代碼後顯示）

應用：JSON與ajax結合

1. 製作html清單模板
2. 定義外部api
3. ajax串接，ajax裡面是物件形式
   • 連接url變數
   • 成功：傳回參數→結果→外接
   • JSON.parse(文字)→物件結構
4. 製作迴圈，準備列印資料
   • 迴圈下的api資料
   • 代換變數
   • 載入代換後的新模板
5. 建立打勾項目
   • 取代class
   • 定義打勾class

.todolist
 h3 我的代辦清單
 hr
 ul#listitem
 //li(class="{{class}}") {{num}}. {{name}} {{date}}

*
font-family: 微軟正黑體
 
body
 padding: 30px

.todolist
 display: inline-block
 padding: 20px
 border: solid 3px
 
 & ul
  padding: 0px

 & li
  list-style: none
  width: 300px
  padding: 5px

 .done
  &:before
  content: " ✔ "
  color: red

// 1 製作html清單模板
var html="<li class='{{class}}'>{{num}}.{{name}} {{date}}</li>";
// 2 定義外部api
var api="https://goo.gl/PBvlqI";
// 3.3 定義外接資料
var data;

// 3 ajax串接，ajax裡面是物件形式
$.ajax({
 // 3.1 連接url變數
 url: api,
 // 3.2 成功：傳回參數→結果→外接
 success: function(res){
 // 3.3 JSON.parse(文字)→物件結構
 // console.log(JSON.parse(res));
 data=JSON.parse(res);
 
 // 4 製作迴圈，準備列印資料
 for(i=0;i<data.length;i++){
 // 4.1 迴圈下的api資料
 var item=data[i]
 // 5.2 定義打勾class
 // if簡寫(檢査項目==true)?"是的話傳値":"否的話傳値"
 var now_class=(item.done)==true?"done":"";
 
 
 // 4.2 代換變數
 var new_html=
 html.replace("{{num}}",i+1)
 .replace("{{name}}",item.name)
 .replace("{{date}}",item.date)
 // 5 建立打勾項目
 // 5.1 取代class
 .replace("{{class}}",now_class);
 
 // 4.3 載入代換後的新模板
 $("#listitem").append(new_html);
 }
 }
});

CODEPEN