Breaking News: Grepper is joining You.com. Read the official announcement!

json data to html table using ajax jquery getjson method

Peshawa Othman answered on October 18, 2022 Popularity 8/10 Helpfulness 4/10

answer json data to html table using ajax jquery getjson method

json data to html table using ajax jquery getjson method

Comment

<html>
  <head>
    <title>JSON data to HTML table</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.js"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="table-responsive">
        <h1>Data Fetch into HTML Table using Ajax Jquery getJSON method</h1>
        <br />
        <table class="table table-bordered table-striped" id="employee_table">
          <tr>
            <th>Name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Address</th>
             <th>geo</th>
             <th>phone</th>
             <th>website</th>
             <th>company</th>
                  </tr>
        </table>
        
    </div>
    </div>
     
  </body>
  
</html>
<script>
$(document).ready(function(){
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(data){
    var employee_data = '';
    $.each(data, function(key, value){
      employee_data += '<tr>';
      employee_data += '<td>'+value.name+'</td>';
      employee_data += '<td>'+value.username+'</td>';
      employee_data += '<td>'+value.email+'</td>';
      employee_data += '<td>'+value.address+'</td>';
      employee_data += '<td>'+value.geo+'</td>';
      employee_data += '<td>'+value.phone+'</td>';
      employee_data += '<td>'+value.website+'</td>';
      employee_data += '<td>'+value.company+'</td>';
      employee_data += '<tr>';
    });
    $('#employee_table').append(employee_data);
  });
  
});
</script>

Popularity 8/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: ajax html html-table json using

Link to this answer
Share Copy Link

Contributed on Oct 18 2022

Peshawa Othman

0 Answers Avg Quality 2/10

json data to html table using ajax jquery getjson method

Contents

More Related Answers

json data to html table using ajax jquery getjson method

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.