json table example

JSON Table Example

JSON, or JavaScript Object Notation, is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is commonly used for representing data structures in web applications.

Basic JSON Table Example

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "age": 30,
      "email": "john.doe@example.com"
    },
    {
      "firstName": "Jane",
      "lastName": "Smith",
      "age": 25,
      "email": "jane.smith@example.com"
    },
    {
      "firstName": "Bob",
      "lastName": "Johnson",
      "age": 40,
      "email": "bob.johnson@example.com"
    }
  ]
}

In the above example, we have an object called "employees" that contains an array of employee objects. Each employee object has four properties: firstName, lastName, age, and email.

To create a JSON table in HTML, we can use the <table> and <tr>/<td> tags. Here is an example:

  
    
      First Name
      Last Name
      Age
      Email
    
  
  
    
      John
      Doe
      30
      john.doe@example.com
    
    
      Jane
      Smith
      25
      jane.smith@example.com
    
    
      Bob
      Johnson
      40
      bob.johnson@example.com
    
  

In the HTML table example above, we have used the <thead> and <tbody> tags to separate the header row from the data rows. We have also used the <th> and <td> tags to create the column headers and data cells, respectively.

We can use JavaScript to dynamically generate the HTML table from the JSON data. Here is an example:

const data = {
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "age": 30,
      "email": "john.doe@example.com"
    },
    {
      "firstName": "Jane",
      "lastName": "Smith",
      "age": 25,
      "email": "jane.smith@example.com"
    },
    {
      "firstName": "Bob",
      "lastName": "Johnson",
      "age": 40,
      "email": "bob.johnson@example.com"
    }
  ]
};

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

const headers = Object.keys(data.employees[0]);
const headerRow = document.createElement('tr');

headers.forEach(header => {
  const th = document.createElement('th');
  th.textContent = header;
  headerRow.appendChild(th);
});

thead.appendChild(headerRow);

data.employees.forEach(employee => {
  const row = document.createElement('tr');

  headers.forEach(header => {
    const td = document.createElement('td');
    td.textContent = employee[header];
    row.appendChild(td);
  });

  tbody.appendChild(row);
});

table.appendChild(thead);
table.appendChild(tbody);

document.body.appendChild(table);

In the JavaScript example above, we have created a new <table> element and created separate <thead> and <tbody> elements. We have then used the Object.keys method to get the property names of the first employee object to create the column headers. We have then looped through the employee objects to create the data rows using the same property names.

There are many libraries that can be used to display JSON data in HTML tables, such as DataTables and Handsontable. These libraries provide additional features such as sorting, filtering, and pagination.