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

To do case-insensitive matches, compare str1.toUpperCase() == str2.toUpperCase(). What have you already tried to display your results as a table? Try starting with jqueryObject.append() — Ruzihm
– Ruzihm, Commented Sep 19, 2018 at 6:03
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
– 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
– Manoj Mvvs, Commented Sep 19, 2018 at 6:27

Death-is-the-real-truth · Accepted Answer · 2018-09-19 06:17:07Z

2

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>

edited Sep 19, 2018 at 6:17

answered Sep 19, 2018 at 6:12

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manoj Mvvs Over a year ago

Thanks, but how to remove case sensitive while searching the data?

Manoj Mvvs Over a year ago

I have more doubt regarding the search, like if i search according to one input it's showing the result, like if i enter input 1 as c and username as Chuck Berry, it's taking the first input to search. Actually the Chuck Berry doesn't have skill of c, so it should display error no results found. How can i fix that?

Death-is-the-real-truth · Accepted Answer · 2018-09-19 06:20:28Z

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.

edited Sep 19, 2018 at 6:20

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Sep 19, 2018 at 6:16

DHARMENDRA SINGH

6155 silver badges21 bronze badges

Comments

Sourabh Somani · Accepted Answer · 2018-09-19 06:12:54Z

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

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

Collectives™ on Stack Overflow

Display json data in html table using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related