getjson example

WHAT IS Jquery GetJSON() ?

getJSON is the method used to fetch the json data from the json file.

getJSON() sends the request to the server in asynchronous http request GET.

getJSON() retrives data from server in JSON format whereas GET() retrives any type of data from server.

SYNTAX

$.getJSON( url, [data], [callback] )

PARAMETERS

URL- contains the path from where json is fetched.

DATA- optional parameter which will be sent to server.

CALLBACK- function runs when data is loaded successfully.

EXAMPLE


       <script>
       $.getJSON('data.json', function(data) { console.log(data); });
       </script>
     

In the above example getJson has two parameters.

First parameter,contains the path(data.json) from where json data has to be fetched.

Third parameter,contains the call back function which gets executed whenever the request is succeeds.getJSON method converts server response to json object therefore data parameter will be in json format.

SCREENSHOT OF THE ABOVE EXAMPLE

getjson example

Copy this code in data.json file

Below is the example of array of json


  [
    {
      "name":"Raj",
      "location":"India"
    },
    {
      "name":"prem",
      "location":"India"
    },
    {
      "name":"shaker",
      "location":"India"
    },
    {
      "name":"Smith",
      "location":"Australia"
    },
    {
      "name":"Gayle",
      "location":"west Indies"
    },
    {
      "name":"Taylor",
      "location":"NewZeland"
    },
    {
      "name":"Root",
      "location":"England"
    },
    {
      "name":"Zubair",
      "location":"India"
    },
    {
      "name":"peter",
      "location":"USA"
    },
    {
      "name":"Harry",
      "location":"USA"
    },
    {
      "name":"Jai",
      "location":"India"
    },
    {
      "name":"bharat",
      "location":"India"
    },
    {
      "name":"Omkar",
      "location":"India"
    },
    {
      "name":"Ishwar",
      "location":"India"
    },
    {
      "name":"john",
      "location":" CA"
    },
    {
      "name":"Dwayne",
      "location":"CA"
    },
    {
      "name":"scarlett",
      "location":"CA"
    }
  ]

           

Copy this code in jsonsearch.php file


  <!DOCTYPE html>
  <html>
   <head>
    <title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css" rel="stylesheet">
    <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/js/mdb.min.js"></script>
    <style>
    #result {
     position: absolute;
     width: 100%;
     cursor: pointer;
     overflow-y: auto;
     max-height: 400px;
     box-sizing: border-box;
     z-index: 1001;
    }
    .link-class:hover{
     background-color:#f1f1f1;
    }
    li:nth-child(odd)
    {
      background:#ce93d8;
    }
    li:nth-child(even)
    {
      background:#ab47bc;
    }
    body{
      background:#b71c1c;
    }

    </style>
   </head>
   <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="text-center p-5">SEARCH FOR DATA</h1>
        </div>
        <div class="col-md-12">
          <div class="input-group md-form form-sm mt-5 form-1 pl-0">
            <div class="input-group-prepend">
              <span class="input-group-text purple lighten-3" id="basic-text1"><i class="fas fa-search text-white"
                  aria-hidden="true"></i></span>
            </div>
            <input class="form-control my-0 mt-10 py-1" style="font-size:25px; color:white;" name="search" id="search" type="text"  aria-label="Search">
  <ul class="list-group mt-5" id="result">
  </ul>
          </div>
       </div>
      </div>

    </div>
   </body>
  </html>
  <script>
  $(document).ready(function(){
   $.ajaxSetup({ cache: false });
   $('#search').keyup(function(){
    $('#result').html('');
    var searchField = $('#search').val();
    var expression = new RegExp(searchField, "i");
    $.getJSON('data.json', function(data) {
     $.each(data, function(index, value){
      if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
      {
       $('#result').append('<li class="list-group-item link-class" style="font-size:25px;">'+value.name+' | <span class="text-muted" style="font-size:25px;">'+value.location+'7lt;/span></li>');
      }
     });
    });
   });

   $('#result').on('click', 'li', function() {
    var click_text = $(this).text().split('|');
    $('#search').val($.trim(click_text[0]));
    $("#result").html('');
   });
  });
  </script>
           

Below is the screenshot of the output

getjson example
About author
Supreet Patil
I am a web developer.I have started the journey of web development 2017.I am CSE degree holder.
E-mail:psupreet12@gmail.com
Leave a reply