Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用jQuery将数据从API排序到表_Javascript_Html_Jquery_Json_Ajax - Fatal编程技术网

Javascript 使用jQuery将数据从API排序到表

Javascript 使用jQuery将数据从API排序到表,javascript,html,jquery,json,ajax,Javascript,Html,Jquery,Json,Ajax,我正在尝试学习jquery,因为我是新手。在这里,我向这个示例API发出了一个请求,并得到了一个必须在表中列出的对象数组。然而,我一直在思考如何在表格中排序?请帮帮我 我有我的html <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Sal

我正在尝试学习jquery,因为我是新手。在这里,我向这个示例API发出了一个请求,并得到了一个必须在表中列出的对象数组。然而,我一直在思考如何在表格中排序?请帮帮我

我有我的html

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="ID" id="_id"></td>
      <td data-column="Name" id="_name"></td>
      <td data-column="Age" id="_age"></td>
      <td data-column="Salay" id="_salay"></td>
    </tr>
  </tbody>
</table>
这里我得到一个错误如下:

未捕获的语法错误:JSON中位置1处的意外标记o 在Function.parse[as parseJSON]()

$。每个(列表数据、函数(键、值){
变量trrow=''+值[“ID”]+''+值[“名称”]+''+值[“年龄”]+''+值[“薪水”]+'
';
$(“tbody”)。追加(trrow);
});
$。每个(列表数据、函数(键、值){
变量trrow=''+值[“ID”]+''+值[“名称”]+''+值[“年龄”]+''+值[“薪水”]+'
';
$(“tbody”)。追加(trrow);

});基本上,您再次解析从API返回的JSON数组。 您的API正在返回以下数据

var data={"status":"success","data":[{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61","profile_image":""},{"id":"2","employee_name":"Garrett Winters","employee_salary":"170750","employee_age":"63","profile_image":""},{"id":"3","employee_name":"Ashton Cox","employee_salary":"86000","employee_age":"66","profile_image":""},{"id":"4","employee_name":"Cedric Kelly","employee_salary":"433060","employee_age":"22","profile_image":""},{"id":"5","employee_name":"Airi Satou","employee_salary":"162700","employee_age":"33","profile_image":""},{"id":"6","employee_name":"Brielle Williamson","employee_salary":"372000","employee_age":"61","profile_image":""},{"id":"7","employee_name":"Herrod Chandler","employee_salary":"137500","employee_age":"59","profile_image":""},{"id":"8","employee_name":"Rhona Davidson","employee_salary":"327900","employee_age":"55","profile_image":""},{"id":"9","employee_name":"Colleen Hurst","employee_salary":"205500","employee_age":"39","profile_image":""},{"id":"10","employee_name":"Sonya Frost","employee_salary":"103600","employee_age":"23","profile_image":""},{"id":"11","employee_name":"Jena Gaines","employee_salary":"90560","employee_age":"30","profile_image":""},{"id":"12","employee_name":"Quinn Flynn","employee_salary":"342000","employee_age":"22","profile_image":""},{"id":"13","employee_name":"Charde Marshall","employee_salary":"470600","employee_age":"36","profile_image":""},{"id":"14","employee_name":"Haley Kennedy","employee_salary":"313500","employee_age":"43","profile_image":""},{"id":"15","employee_name":"Tatyana Fitzpatrick","employee_salary":"385750","employee_age":"19","profile_image":""},{"id":"16","employee_name":"Michael Silva","employee_salary":"198500","employee_age":"66","profile_image":""},{"id":"17","employee_name":"Paul Byrd","employee_salary":"725000","employee_age":"64","profile_image":""},{"id":"18","employee_name":"Gloria Little","employee_salary":"237500","employee_age":"59","profile_image":""},{"id":"19","employee_name":"Bradley Greer","employee_salary":"132000","employee_age":"41","profile_image":""},{"id":"20","employee_name":"Dai Rios","employee_salary":"217500","employee_age":"35","profile_image":""},{"id":"21","employee_name":"Jenette Caldwell","employee_salary":"345000","employee_age":"30","profile_image":""},{"id":"22","employee_name":"Yuri Berry","employee_salary":"675000","employee_age":"40","profile_image":""},{"id":"23","employee_name":"Caesar Vance","employee_salary":"106450","employee_age":"21","profile_image":""},{"id":"24","employee_name":"Doris Wilder","employee_salary":"85600","employee_age":"23","profile_image":""}]};

 let listData = JSON.parse(data.data) // replace this line
 let listData=data.data;// its already JSON Array
比如说

var a=[{name:"John"},{name:"DOE"}]
JSON.parse(a) // it will give you same error which is mentioned in a question.

基本上,您再次解析从API返回的JSON数组。 您的API正在返回以下数据

var data={"status":"success","data":[{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61","profile_image":""},{"id":"2","employee_name":"Garrett Winters","employee_salary":"170750","employee_age":"63","profile_image":""},{"id":"3","employee_name":"Ashton Cox","employee_salary":"86000","employee_age":"66","profile_image":""},{"id":"4","employee_name":"Cedric Kelly","employee_salary":"433060","employee_age":"22","profile_image":""},{"id":"5","employee_name":"Airi Satou","employee_salary":"162700","employee_age":"33","profile_image":""},{"id":"6","employee_name":"Brielle Williamson","employee_salary":"372000","employee_age":"61","profile_image":""},{"id":"7","employee_name":"Herrod Chandler","employee_salary":"137500","employee_age":"59","profile_image":""},{"id":"8","employee_name":"Rhona Davidson","employee_salary":"327900","employee_age":"55","profile_image":""},{"id":"9","employee_name":"Colleen Hurst","employee_salary":"205500","employee_age":"39","profile_image":""},{"id":"10","employee_name":"Sonya Frost","employee_salary":"103600","employee_age":"23","profile_image":""},{"id":"11","employee_name":"Jena Gaines","employee_salary":"90560","employee_age":"30","profile_image":""},{"id":"12","employee_name":"Quinn Flynn","employee_salary":"342000","employee_age":"22","profile_image":""},{"id":"13","employee_name":"Charde Marshall","employee_salary":"470600","employee_age":"36","profile_image":""},{"id":"14","employee_name":"Haley Kennedy","employee_salary":"313500","employee_age":"43","profile_image":""},{"id":"15","employee_name":"Tatyana Fitzpatrick","employee_salary":"385750","employee_age":"19","profile_image":""},{"id":"16","employee_name":"Michael Silva","employee_salary":"198500","employee_age":"66","profile_image":""},{"id":"17","employee_name":"Paul Byrd","employee_salary":"725000","employee_age":"64","profile_image":""},{"id":"18","employee_name":"Gloria Little","employee_salary":"237500","employee_age":"59","profile_image":""},{"id":"19","employee_name":"Bradley Greer","employee_salary":"132000","employee_age":"41","profile_image":""},{"id":"20","employee_name":"Dai Rios","employee_salary":"217500","employee_age":"35","profile_image":""},{"id":"21","employee_name":"Jenette Caldwell","employee_salary":"345000","employee_age":"30","profile_image":""},{"id":"22","employee_name":"Yuri Berry","employee_salary":"675000","employee_age":"40","profile_image":""},{"id":"23","employee_name":"Caesar Vance","employee_salary":"106450","employee_age":"21","profile_image":""},{"id":"24","employee_name":"Doris Wilder","employee_salary":"85600","employee_age":"23","profile_image":""}]};

 let listData = JSON.parse(data.data) // replace this line
 let listData=data.data;// its already JSON Array
比如说

var a=[{name:"John"},{name:"DOE"}]
JSON.parse(a) // it will give you same error which is mentioned in a question.

您是如何创建表行的?您是否使用表的库?如果您将其分解为步骤,那么已经有很多关于它的问题和教程了。例如,和。你对哪一部分有意见?@brk不,这是纯html和一些css样式。没有图书馆all@RoryMcCrossan谢谢,我会看一看console.log的结果是什么?您可以分享吗?您是如何创建表行的?您是否使用表的任何库?如果您将此分解为步骤,那么已经有很多关于它的问题和教程。例如,和。你对哪一部分有意见?@brk不,这是纯html和一些css样式。没有图书馆all@RoryMcCrossan谢谢,我会看一看console.log的结果是什么?你能分享一下吗?