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=".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">

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

• javascript
• jquery

• To do case-insensitive matches, pare str1.toUpperCase() == str2.toUpperCase(). What have you already tried to display your results as a table? Try starting with jqueryObject.append() – Ruzihm Commented Sep 19, 2018 at 6:03
• 1 why are your creating loop in data? if in skill write C and in Email write [email protected] , your code return first data !! what's your goal ? – barzin.A Commented Sep 19, 2018 at 6:13
• @barzin.A It's advance search.Suppose if I search for c it should display the users with skill set of C. It's like you can search using any one field. In the displayed result you will be having another search option where you can filter the data according to requirement. Yeah i have noticed the issue which you have raised. need to figure it out with the solution. In that case it should display error message – Manoj Mvvs Commented Sep 19, 2018 at 6:27

3 Answers 3

You need to create a table and need to append ing 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 parison 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./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>

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.

Here is the code

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"
    }
];

function BindDataToTable(d,obj){
  var keys=Object.keys(d[0]);
  var table=document.createElement("table");
  var trHead=document.createElement("tr");
  jQuery(keys).each((index,item)=>{
    var th=document.createElement("th");
    th.innerHTML=item;
    trHead.appendChild(th)
  })
   table.appendChild(trHead)
   for(var i=0;i<d.length;i++){
   var tr=document.createElement("tr");
  jQuery(keys).each((index,item)=>{
    var td=document.createElement("td");
    td.innerHTML=d[i][item];
    tr.appendChild(td)
  })
   table.appendChild(tr)
   }
   
   jQuery(obj).append(table);
}
BindDataToTable(data,"#tableElement")

<script src="https://ajax.googleapis./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">

<div id="tableElement">
</div>