数据表仅显示来自 jquery ajax 响应的行

Question

I wrote two different functions using jquery, the first function(table()) loop through an object from JSON response in jquery ajax success. 然后调用第二个函数（column()），在第一个循环中使用参数从 object 中的数组元素调用列。 简而言之，我希望结果是行，其中包含数据库中的数据列。

 search(); function search(query){ $.ajax({ type:'GET', url:'/getmsg', data:{ "_token":"{{ csrf_token() }}", query:query, }, success:function(response){ table = row(response); $("#content").html(table); console.log(response); }, }); } //ROWS function row(response){ // LOOP TROUGH THE OBJECTS // DISPLAY THE ROWS columns = ""; for(i = 0; i<response.length; i++){ //columns = "<tr>"; object = response[i]; columns += column(object); } console.log(columns); return columns; } //COLUMN function column(object){ // return object["id"]; // output = "<td>"+object['id']+"</td><td>"+object['name']+"</td><td>"+object['email']+"</td>"; obj = Object.values(object); output = "<tr>"; for(i=0; i<obj.length; i++){ output +="<td>"+obj[i]+"</td>"; } output += "</tr>"; return output; }

这是 HTML 中的表格

 <table class="table table-bordered" id="transaction-table"> <input type="text" onkeyup="search(this.value)"> <thead> <tr> <th>Ref Id</th> <th>Desc</th> <th>Amount</th> <th>Status</th> <th>Date</th> </tr> </thead> <tbody id="content"> </tbody> <tfoot> <tr> <th>Ref Id</th> <th>Desc</th> <th>Amount</th> <th>Status</th> <th>Date</th> </tr> </tfoot> </table>

下面是 Output（不要介意表头上的 label）

这是我的 CONSOLE.LOG从以下代码中输出的内容。

 success:function(response){ table = row(response); $("#content").html(table); console.log(response); },

结果

Answer 1

这就是我能够修复此错误的方法。 第1步 1. 我试图通过显示第一个 function 表中的循环计数来找出逻辑错误发生的位置，它工作正常，这意味着错误在 column() function 内 2. 我尝试了同样的方法在第二个 function column() 中，我发现它只循环一次。 这意味着我的注意力集中。 不过，它没有显示任何语法错误。

第 2步我开始怀疑范围问题我决定复制 column() function 中的脚本并将其粘贴到 table() 中并使用循环。 这样我直接执行代码，但是您注意到外循环和内循环具有具有相同声明（ i ）的指针变量，这将导致语法错误。 我将内部循环指针声明更改为 (j)它开始正常工作。 我一直在与之斗争的错误是范围错误。 与我知道的 JAVA 和 PHP 不同，我相信 js 有最复杂的范围逻辑错误，所以要小心。 结论在 JavaScript 中有两种类型的 scope： 1. 本地 scope 1. 全局 Z31A1ZFD1410BEA4BEF25D18

根据https://www.w3schools.com/js/js_scope.asp本地 JavaScript 变量

在 JavaScript function 中声明的变量变为 function 的本地变量。

局部变量有 Function scope：它们只能从 function 内部访问。 例子

 // code here can NOT use carName function myFunction() { var carName = "Volvo"; // code here CAN use carName }

由于局部变量只在其函数内部被识别，同名变量可以在不同的函数中使用。

局部变量在 function 启动时创建，在 function 完成时删除。

全局 JavaScript 变量

在 function 之外声明的变量变为 GLOBAL。

全局变量具有全局 scope：web 页面上的所有脚本和函数都可以访问它。 例子

 var carName = "Volvo"; // code here can use carName function myFunction() { // code here can also use carName }

我不得不将 POING 变量名称从 i 更改为 j，下面是我的代码在调试后的样子

 search(); function search(query){ $.ajax({ type:'GET', url:'/getmsg', data:{ "_token":"{{ csrf_token() }}", query:query, }, success:function(response){ table = row(response); $("#content").html(table); console.log(response); }, }); } //ROWS function row(response){ // LOOP TROUGH THE OBJECTS // DISPLAY THE ROWS columns = ""; for(i = 0; i<response.length; i++){ //columns = "<tr>"; object = response[i]; columns += column(object); } console.log(columns); return columns; } //COLUMN function column(object){ // return object["id"]; // output = "<td>"+object['id']+"</td><td>"+object['name']+"</td><td>"+object['email']+"</td>"; obj = Object.values(object); output = "<tr>"; for(j=0; j<obj.length; j++){ output +="<td>"+obj[j]+"</td>"; } output += "</tr>"; return output; }

正确的 OUTPUT

结论当您从 function 调用第二个 function 时，请确保在声明变量时给它一个唯一的名称，或者使用 var（显式）声明它，否则您将面临逻辑错误。