API Consumption using jQuery Ajax(Comments)

 

 API Consumption using jQuery Ajax(Comments)

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

 

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

 

Full Code:

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title>Posts</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/posts',

                    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>Body:</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.body}</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:</hd>

        </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 Comments"-->

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

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

        </div>

        <!-- I have used this div to display all the comments 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>

 

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>Comments</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/comments',

                    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 Comments"-->

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

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

</div>

<!-- I have used this div to display all the comments 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 Comments:” output along with the console part and “Displaying All Comments:” part code.

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title>Posts</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/posts',

                    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>Body:</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.body}</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:</hd>

        </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 Posts"-->

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

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

        </div>

        <!-- I have used this div to display all the posts 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>





 


 


 


 

Comments

Post a Comment

Popular posts from this blog

Programmings Based On Array And String Functions To Merge The 2 Arrays, Then After Merge Convert Into String And Then Find Out The 1st And Last Word From The Reverse String

Image
  Programmings Based On Array And String Functions To Merge The 2 Arrays, Then After Merge Convert Into String And Then Find Out The 1st And Last Word From The Reverse String Q1. Take 2 arrays then margin the arrays. After margin convert into string then reverse the string and find out 1st and last word from the reverse string. Ans: Coding => <?php $arr1 =[ "Dhoni" , "Rohit" , "Kohli" , "Rahul" ]; $arr2 =[ "Bumrah" , "Shami" , "Siraj" , "Chahal" ]; $arrmer = array_merge ( $arr1 , $arr2 ); print_r ( $arrmer ); echo "<br>" ; $str = implode ( " " , $arrmer ); print_r ( $str ); echo "<br>" ; $strrev = strrev ( $str ); print_r ( $strrev ); echo "<br>" ; $arr = explode ( " " , $strrev ); print_r ( $arr ); echo "<br>" ; $firstword = array_shift ( $arr ); $lastword = array_pop ( $arr ); print_r ( $firstword ); echo "...
Read more

PHP WEB DEVELOPMENT INTERVIEW QUESTIONS ASKED IN APOLLO HOSPITAL ALONG WITH MY OWN CONCEPTS AND MY OWN EXPLANATION ANSWERS(PART - 1) REST OF THE QUESTIONS AND ANSWERS WILL BE PREPARED BY ME IN MY NEXT BLOG

Image
 PHP WEB DEVELOPMENT INTERVIEW QUESTIONS ASKED IN APOLLO HOSPITAL  ALONG WITH MY OWN CONCEPTS AND MY OWN EXPLANATION ANSWERS (PART - 1) REST OF THE QUESTIONS AND ANSWERS WILL BE PREPARED BY ME IN MY NEXT BLOG  So, guy's today I am going to explore about some of the PHP Web development Questions used to be asked in Apollo Hospital, and the answers will be genuine with my own making explanations with the concepts which I have. So guy's you must be thinking that Apllo Hospital also work for IT Field? That's why I must say yes. Apollo hospital also work for IT Field. You must be curious about knowing that in which field Apollo Hospital work in IT Field? Don't worry, I am going to let you know that in which portion Apollo Hospital work in IT Field? Apollo Hospital work in IT field like ASKAPOLLO ONLINE i.e. the ONLINE APPOINTMENT SYSTEM which has features like online scheduling of the patient, books health appointment in minutes, 24/7 online appointment scheduling as well as...
Read more

Mini Project On Multi User CRUD Operations(Create, Read, Update & Delete) Of Donar Details Of Indian Nationals Who Donate To Ramkrishna Math, Belur Math Using PDO (PHP Data Objects) With Proper Explanation Of Each And Every Individual Line Of The Code Of connection.php Page, form.php Page, formaction.php Page, admin_display.php Page, client_display.php Page, edit.php Page, editaction.php Page And delet.php Page (Here You Will Find The Image Of Sayang Sri Ramkrishna Dev, Sayang Sri Ma Sarada Devi & Sayang Sri Swami Vivekananda) In My CRUD Operation

Image
Mini Project On Multi User CRUD Operations(Create, Read, Update & Delete) Of Donar Details Of Indian Nationals Who Donate To Ramkrishna Math, Belur Math Using PDO (PHP Data Objects) With Proper Explanation Of Each And Every Individual Line Of The Code Of connection.php Page, form.php Page, formaction.php Page, admin_display.php Page, client_display.php Page, edit.php Page, editaction.php Page And delete.php Page (Here You Will Find The Image Of Sayang Sri Ramkrishna Dev, Sayang Sri Ma Sarada Devi & Sayang Sri Swami Vivekananda) In My CRUD Operation  So,firstly I am going to explain about the connection page (connection.php).Let's begin. In connection.php page first I have taken ($servername="localhost";) where $servername is the name of the server with which we are actually wanting to connect. Now coming to ($username="root";) where $username is the name of the user which and I already know that server has definitely a user, and that user exists in which...
Read more