---
# System prepended metadata

title: Todolist RESTful API

---

六角體驗營
# Todolist RESTful API : 開發新刪修查的API (實作4) - CRUD ( DELETE API)
> [**Todolist RESTful API : 開發新刪修查的API (實作3) - POST API 資料錯誤樣態**](https://hackmd.io/6c02HxuUR5CLhX5K5vgVBg?view)

<br>

## 11. DELETE API 
> 刪除待辦事項功能：刪除 所有/指定 待辦事項
* #### STEP 11-1.  判斷路由為 刪除 "全部" 或 "指定" 待辦事項
  * 刪除所有待辦事項 {{url}}/todolist
  * 刪除指定待辦事項 {{url}}/todolist/**{{uuid}}**
  
<br>
  
* #### STEP 11-2.  新增使用 DELETE 方法的函式
  * **11-2-1. 測試 DELETE API被使用**
    > DELETE 不需要寫request.on('end',()=>{...}) 
    > 因為不需要接收 body 的資訊 
    > (只有 **POST 新增 / PATCH 編輯** 要接收chunk組成的body數據)
  
    ```js=
    else if(req.url='/todolist' && request.method =='DELETE'){
        response.writeHead(200,headers);
        response.write(JSON.stringify({
            "status":"success",
            "data":todos,
            "delete":"yes" //測試使用DELETE 方法是否會印出
        }))
    }

    ```
    * postman DELETE API 測試
      ![](https://hackmd.io/_uploads/SyziaIPzT.png)


  <br>  <br>

* #### **STEP 11-3. 刪除全部待辦 - 清空資料函示**
  > **{{url}}/todolist**
  ```js=
  else if(req.url='/todolist' && request.method =='DELETE'){
      
        //1. 將todos[]中所有資料清空
        todos.length = 0; //清空陣列資料
        //todos為const變數，不能直接使用 todos = [] 清除陣列資料
      
        response.writeHead(200,headers);
        response.write(JSON.stringify({
            "status":"success",
            "data":todos,
            //"delete":"yes" //測試使用DELETE 方法是否會印出
        }))
    }
  ```
    <br>  <br>
    
* #### **STEP 11-4. 刪除單筆待辦**
  
    > 以 uuid 是否存在判斷是否為單筆刪除
    > **{{url}}/todolist/{{uuid}}**
    > 
    >　處理陣列資料：
    > [**JS-陣列與字串處理操作：startsWith、split、pop、findIndex**](https://hackmd.io/DJQ2KbVxSLus2JLBK7rb-A?view)

    
    * **STEP 11-4-1. 測試DELETE API 透過 url路由 判斷回傳 : 
      若url 開頭包含'/todolist/' (含後面的'/') ; 且使用 DELETE 方法**
    
        ```js=
        //若url 開頭包含'/todolist/' (含後面的'/') ; 且使用 DELETE 方法
        else if(request.url.startsWith('/todolist/') && request.method == "DELETE" ){
            response.writeHead(200,headers);
            response.write(JSON.parse({
                "status":"success",
                "data": todos,
                "id":1 //postman測試使用 
            }))    
        }
        ```
      
      * postman 測試
        ![](https://hackmd.io/_uploads/H1Ah8PwGa.png)

      
    * **STEP 11-4-2. 抓取 uuid 資訊**
      uuid會設計在路由後方 **/todos/{{uuid}}**  )
        ```js=
        //路由開頭 startsWith
        else if(request.url.startsWith('/todolist/') && request.method == "DELETE" ){
            
            //1. 抓取 路後由方的 id 資訊
            //   抓到陣列中最後一個pop值，即{{uuid}}
            const id = request.url.split('/').pop(); 
            
            //2. 查詢索引值
            //   todos陣列元素中 物件id屬性 與 id 相同的索引值
            const index = todos.findIndex(element => element.id == id ) 
            console.log(id, index)  //陣列中若有相關資訊 -> index 回復索引值 ; 
                                    //沒有相關數據 -> index 回復-1
            
            response.writeHead(200,headers);
            response.write(JSON.parse({
                "status":"success",
                "data": todos,
                "id":id 
            }))    
        }
        ```
         
         <br>
          
        * postman 測試-1 錯誤樣態: 隨便在網址後方放入 id 數字
          回傳-1
          
          不存在該筆資料：回傳陣列索引值 **id  -1** 
          ![](https://hackmd.io/_uploads/rJHle_Pza.png)
          ![](https://hackmd.io/_uploads/HJN-ldwfT.png)

           
         

          
        * postman 測試-2 正確樣態: 將POST生成的一組 uuid 加入路由後方
        
          存在該筆資料：回傳陣列索引值 **id  index** 
          ![](https://hackmd.io/_uploads/ByP7y_Dfp.png)
          ![](https://hackmd.io/_uploads/rJLrkuwMa.png)

        <br>  <br>
        
    * **STEP 11-4-3. 修改 DELETE API 執行函式**
      * todos中有該筆資料的狀況下，才執行刪除
      
      ```js=
        else if(request.url.startsWith('/todolist/') && request.method == "DELETE" ){
 
            const id = request.url.split('/').pop(); 
            const index = todos.findIndex(element => element.id == id ) 
            // console.log(id, index)  
            
            //todos中有該筆資料的狀況下，才執行刪除
            if(index !== -1){
                
                //splice 刪除 該索引開始的 1筆數據
                todos.splice(index,1); 
                
                //執行刪除的回應函式
                response.writeHead(200,headers);
                response.write(JSON.parse({
                    "status":"success",
                    "data": todos,
                    "id":id //測試，這裡印出的是該筆被刪除的id
                }));  
                
                
            }else{
                //加入錯誤處理module
                errorHandle(response);
            }
            
              
        }
        ```
        
        * postman 成功刪除的結果
          ![](https://hackmd.io/_uploads/SJDkBdPz6.png)


<br><br>

> [**Todolist RESTful API : 開發新刪修查的API (實作5) - CRUD ( PATCH API )**](https://hackmd.io/JFbnJydEQuWnoUyegg1FTA?view)
