使用jQuery在HTML表格中显示JSON数据

Question

如何使用jQuery在HTML表格中显示JSON数据？如何在搜索结果时不区分大小写？

期望输出: 我该如何将结果显示在表格中？如何实现这一点？

var data = [{
    "username": "John Doe",
    "email": "[e-mail]",
    "skills": "java,c,html,css"
  },
  {
    "username": "Jane Smith",
    "email": "[e-mail]",
    "skills": "java,sql"
  },
  {
    "username": "Chuck Berry",
    "email": "[e-mail]",
    "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">

- Manoj Mvvs

---

要进行不区分大小写的匹配，请比较 str1.toUpperCase() == str2.toUpperCase()。您已经尝试过以表格形式显示结果了吗？可以尝试使用 jqueryObject.append() 开始。 - Ruzihm

为什么要在数据中创建循环？如果技能写成C，电子邮件写成[e-mail]，你的代码将返回第一个数据！！你的目标是什么？ - barzin.A

@barzin.A 这是高级搜索。比如说，如果我搜索 c ，它就应该显示具有 C 技能的用户。就像你可以使用任何一个字段进行搜索一样。在显示的结果中，您将拥有另一个搜索选项，可以根据需求过滤数据。是的，我注意到了你提出的问题。需要找出解决方案。在那种情况下，它应该显示错误消息。 - Manoj Mvvs

Answer 1

您需要创建一个表格，并使用以下代码将即将到来的数据附加到该表格：

$('#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);
});

要进行不区分大小写的比较，请使用.toUpperCase()。

示例代码：

var data = [{
    "username": "John Doe",
    "email": "[e-mail]",
    "skills": "java,c,html,css"
  },
  {
    "username": "Jane Smith",
    "email": "[e-mail]",
    "skills": "java,sql"
  },
  {
    "username": "Chuck Berry",
    "email": "[e-mail]",
    "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>

- Alive to die - Anant

---

谢谢，但是如何在搜索数据时忽略大小写？ - Manoj Mvvs

我对搜索还有更多的疑问，例如如果我按照一个输入进行搜索，它会显示结果，比如我输入1作为c和用户名为Chuck Berry，它会将第一个输入用于搜索。实际上，Chuck Berry并没有c的技能，因此应该显示错误，即未找到结果。我该如何解决这个问题？ - Manoj Mvvs

Answer 2

您可以使用Data-table jQuery插件直接从json生成表格，例如：

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

要获取更多详细信息，请关注Data-table jQuery插件。

- DHARMENDRA SINGH

Answer 3

这里是代码

var data = [{
        "username": "John Doe",
        "email": "[e-mail]",
        "skills": "java,c,html,css"
    },
    {
        "username": "Jane Smith",
        "email": "[e-mail]",
        "skills": "java,sql"
    },
    {
        "username": "Chuck Berry",
        "email": "[e-mail]",
        "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>

- Sourabh Somani