API Consumption using jQuery Ajax(Todos)

API: https://jsonplaceholder.typicode.com/todos
Request: GET
Params : None

 

Task 1: Consume entire api and display into a table format
              Use Bootstrap-4 for Responsiveness.

 

Full Code:

 

Here first I am displaying only the console part output along with the console part code.

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Todos</title>

    <!-- Here I am adding jQuery CDN -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- Here I am adding Bootstrap - 4 CDN -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <!-- Here I have used ajax function where I have pasted the url of backend and then used the GET type method and as no data is present so kept the data part as empty null within 2nd bracket and then print the success and error as console log so that in the output section within console log the output executes and then displaying all medicines in table format. Here I have used "$('#b1').click(function()" and this b1 id which I have used here is of button id and in "document.getElementById("d1").innerHTML=strContent;" the d1 id which I have used is of the last div "<div class="form-group" id="d1"></div> then closing the table and printing the strContent in console.log".-->

     <script type="text/javascript">

        $(document).ready(function(){

            $('#b1').click(function(){

                $.ajax({

                    url: 'https://jsonplaceholder.typicode.com/todos',

                    type: 'GET',

                    data: {},

                    success: function(data,status){

                        console.log(data);

                    },

                    error: function(error){

                        console.log(error);

                    },

                });

            });

        });

     </script>

</head>

<body>

<!-- Here I have taken a div container which is used to organize the content in a structural way on a webpage and I have given a bootstrap class name -->

 <div class="container-fluid">

    <!-- Here I have taken a fieldset element which helps to organize the form for better structural way and is used to group the related elements within a webpage form and I have given a bootstrap class name -->

     <fieldset class="form-group card p-3 m-3">

        <legend>

            <h4>Advanced Search:</h4>

        </legend>

        <!-- Add a Textfield for Live Search Options-->

         <input type="search" style="text-align: center;" class="form-control" name="s1" id="s1" placeholder="e.g. title..." onkeyup="show(event)">

     </fieldset>

     <!-- Here I have taken another div where I have provided the Bootstrap class name and within that div I have taken one button of "Displaying All Photos"-->

      <div class="form-group" align="center">

        <button id="b1" class="btn btn-outline-success">Displaying All Todos:</button>

      </div>

      <!-- I have used this div to display all the photos not only in console but outside console. And if we don't use this div then the output will only show in console but it will not show in outside console, and it will throw an error. This is the difference.-->

       <div class="form-group" id="d1"></div>

 </div>

</body>

</html>

 Now I am displaying both the console part and “Displaying All Todos:” output along with the console part and “Displaying All Todos:” part code.

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Todos</title>

    <!-- Here I am adding jQuery CDN -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- Here I am adding Bootstrap - 4 CDN -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <!-- Here I have used ajax function where I have pasted the url of backend and then used the GET type method and as no data is present so kept the data part as empty null within 2nd bracket and then print the success and error as console log so that in the output section within console log the output executes and then displaying all medicines in table format. Here I have used "$('#b1').click(function()" and this b1 id which I have used here is of button id and in "document.getElementById("d1").innerHTML=strContent;" the d1 id which I have used is of the last div "<div class="form-group" id="d1"></div> then closing the table and printing the strContent in console.log".-->

     <script type="text/javascript">

        $(document).ready(function(){

            $('#b1').click(function(){

                $.ajax({

                    url: 'https://jsonplaceholder.typicode.com/todos',

                    type: 'GET',

                    data: {},

                    success: function(data,status){

                        console.log(data);

                        var strContent=`

                        <table class="table table-hover">

                            <tr>

                                <th>User Id:</th>

                                <th>Id:</th>

                                <th>Title:</th>

                                <th>Completed:</th>

                                </tr>

                            `;

                            for(let taskObj of data){

                                console.log(taskObj);

                                strContent+=`

                                <tr>

                                    <td>${taskObj.userId}</td>

                                    <td>${taskObj.id}</td>

                                    <td>${taskObj.title}</td>

                                    <td>${taskObj.completed}</td>

                                    </tr>

                                `;

                            }

                            strContent+=`<table>`;

                                console.log(strContent);

                                document.getElementById("d1").innerHTML=strContent;

                    },

                    error: function(error){

                        console.log(error);

                    },

                });

            });

        });

     </script>

</head>

<body>

<!-- Here I have taken a div container which is used to organize the content in a structural way on a webpage and I have given a bootstrap class name -->

 <div class="container-fluid">

    <!-- Here I have taken a fieldset element which helps to organize the form for better structural way and is used to group the related elements within a webpage form and I have given a bootstrap class name -->

     <fieldset class="form-group card p-3 m-3">

        <legend>

            <h4>Advanced Search:</h4>

        </legend>

        <!-- Add a Textfield for Live Search Options-->

         <input type="search" style="text-align: center;" class="form-control" name="s1" id="s1" placeholder="e.g. title..." onkeyup="show(event)">

     </fieldset>

     <!-- Here I have taken another div where I have provided the Bootstrap class name and within that div I have taken one button of "Displaying All Photos"-->

      <div class="form-group" align="center">

        <button id="b1" class="btn btn-outline-success">Displaying All Todos:</button>

      </div>

      <!-- I have used this div to display all the photos not only in console but outside console. And if we don't use this div then the output will only show in console but it will not show in outside console, and it will throw an error. This is the difference.-->

       <div class="form-group" id="d1"></div>

 </div>

</body>

</html>