Display json data in html table using jQuery

Question

How to display json data in html table using jQuery ? and How can i remove case sensitive while searching the result?

expected output

How can i display the result in my table? How can i achieve this?

var data = [{
    "username": "John Doe",
    "email": "[email protected]",
    "skills": "java,c,html,css"
  },
  {
    "username": "Jane Smith",
    "email": "[email protected]",
    "skills": "java,sql"
  },
  {
    "username": "Chuck Berry",
    "email": "[email protected]",
    "skills": "vuejs"
  }
];



/* Get Result */
function getResult() {
  /* Read value from input fields */
  var skills = $("#skills").val() || '',
    email = $("#email").val() || '',
    username = $("#username").val() || '';

  var result = [],
    i;

  for (i = 0; i < data.length; i++) {
    if ((skills !== '' && data[i]["skills"].indexOf(skills) !== -1) || (data[i]["email"] === email) || (
        data[i]["username"] === username)) {
      result.push(data[i]);
    }
  }

  return result;
};

$('#submit').click(function onClick() {
  var output = getResult();
  console.log(output);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="skills" type="text" placeholder="skills">
<input id="email" type="email" placeholder="mail id">
<input id="username" type="text" placeholder="username">
<input id="submit" type="submit" value="submit">

Answer 1

You need to create a table and need to append coming data to this table using below code:-

$('#submit').click(function onClick() {
  var output = getResult();
  var html = '';
  $.each(output,function(key,value){
      html +='<tr>';
      html +='<td>'+ value.username + '</td>';
      html +='<td>'+ value.email + '</td>';
      html +='<td>'+ value.skills + '</td>';
      html +='</tr>';
  });
$('table tbody').html(html);
});

To do case-insensitive comparison use .toUpperCase()

Working snippet:-

var data = [{
    "username": "John Doe",
    "email": "[email protected]",
    "skills": "java,c,html,css"
  },
  {
    "username": "Jane Smith",
    "email": "[email protected]",
    "skills": "java,sql"
  },
  {
    "username": "Chuck Berry",
    "email": "[email protected]",
    "skills": "vuejs"
  }
];



/* Get Result */
function getResult() {
  /* Read value from input fields */
  var skills = $("#skills").val() || '',
    email = $("#email").val() || '',
    username = $("#username").val() || '';

  var result = [],
    i;

  for (i = 0; i < data.length; i++) {
    if ((skills !== '' && data[i]["skills"].toUpperCase().indexOf(skills.toUpperCase()) !== -1) || (data[i]["email"].toUpperCase() === email.toUpperCase()) || (
        data[i]["username"].toUpperCase() === username.toUpperCase())) {
      result.push(data[i]);
    }
  }

  return result;
};

$('#submit').click(function onClick() {
  var output = getResult();
  var html = '';
  $.each(output,function(key,value){
      html +='<tr>';
      html +='<td>'+ value.username + '</td>';
      html +='<td>'+ value.email + '</td>';
      html +='<td>'+ value.skills + '</td>';
      html +='</tr>';
  });
$('table tbody').html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="skills" type="text" placeholder="skills">
<input id="email" type="email" placeholder="mail id">
<input id="username" type="text" placeholder="username">
<input id="submit" type="submit" value="submit">

<br>

<table>
  <thead>
    <tr>
      <th>Username</th>
      <th>Email ID</th>
      <th>Core Skills</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 2

You can use Data-table jQuery plugin to generate table from jsondirectly like

$('#tableId').DataTable({
    data: jsonData,
    columns: [
        { data: 'username',title:'Username'},
        { data: 'emailId',title:'EmailId'}, 
        { data: 'skils',title:'Core Skills'}
    ],
    "search": {
      "caseInsensitive": false
    }
});

For More detail follow Data-table jQuery Plugin.