Search⌘ K
Home
Courses
The Complete Guide to jQuery

Solution Review: Import Tasks in the To-Do List from a Server

Explore how to handle AJAX GET requests in jQuery to import tasks from a server. Understand the callback function for processing JSON data and dynamically adding tasks to a to-do list in a web app.

We'll cover the following...

Solution

Explanation

  • In line 3, we make a GET request to the server with a URL of https://5f28559af5d27e001612eebf.mockapi.io/tasks/.

  • In line 20, we specify the response’s expected data type from the server.

  • In line 4, we define the callback function for the get() method, which is executed after the successful completion of the GET request.

    • In the callback function (line 6), we extract the list of tasks from the server response object data with type JSON.
    • In the callback function (lines 8-18), we iterate the tasks one-by-one and add them to the end of the to-do list. The code for task addition is identical to that in the event handler for the “Add” button.
    • In lines 9-17, we create a new task, add the done and delete buttons, and then add the task to the notCompleted class.