数据表仅显示来自 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. Then call the second function(column()) called column with a parameter an element of the array from the object in the first loop. to make it short i expect the result to be rows, with columns of data from the database.

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

This is the Table from the 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>

Below is the Output (Don't mind the label on the table headers)

THIS IS WHAT MY CONSOLE.LOG IS OUTPUTING From the following code.

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

Result

Answer 1

This is how I was able to fix this error. STEP 1 1. I tried for figure out the where the logical error occurred by trying to display count for of loops in the first function table and it works correctly, which means the error is within the column() function 2. I tried the same way in the second function column() and I figured out it only loops once. this means I point of concentration. Still, it doesn't show any syntax error.

STEP 2 I started suspecting scoping issues I decided to copy the script in the column() function and paste it in the table() withing the loop. This way i'm exacuting the code directly, but you notice the outer loop and the inner loop are having a pointer variable with the same declaration ( i ) which will cause a syntax error. i changed the inner loop pointer declaration to ( j ) IT STARTED WORKING PROPERLY. The error i have been battling with was scoping error. unlike JAVA and PHP that i know, i believe js has the most complicated scoping logical errors, so watch out. CONCLUTION In JavaScript there are two types of scope: 1. Local scope 1. Global scope

According to https://www.w3schools.com/js/js_scope.asp Local JavaScript Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables have Function scope: They can only be accessed from within the function. Example

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

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts and deleted when the function is completed.

Global JavaScript Variables

A variable declared outside a function becomes GLOBAL.

A global variable has the global scope: All scripts and functions on a web page can access it. Example

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

I HAD TO CHANGE THE POING VARIABLE NAME FORM i TO j, BELOW IS WHAT MY CODE LOOKS LIKE AFTER DEBUGGING

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

THE CORRECT OUTPUT

CONCLUSION When you call a second function from a function, make sure when declaring a variable you give it a unique name, or declare it with var(explicitly), else you will face a logical error.