Отображается только в строке из ответа jquery ajax

Question

Я написал две разные функции, используя jquery, первая функция (таблица ()) l oop через объект из JSON ответа в jquery ajax успеха. Затем вызываем вторую функцию (column ()) с именем column с параметром элемента массива из объекта l oop. для краткости я ожидаю, что результатом будут строки со столбцами данных из базы данных.

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>

Ниже приведен вывод (не обращайте внимания на надпись на заголовках таблицы)

ЭТО ТО, ЧТО МОЯ КОНСОЛЬ. ВЫХОД ИЗ ЛОГАЛА Из следующего кода.

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

Результат

Answer 1

Вот как мне удалось исправить эту ошибку. ШАГ 1 1. Я попытался выяснить, где произошла логическая ошибка, пытаясь отобразить счетчик циклов в первой таблице функций, и она работает правильно, что означает, что ошибка находится в функции column () 2. Я попытался сделать то же самое во втором столбце функции (), и понял, что он повторяется только один раз. это означает, что я сосредоточен. Тем не менее, он не показывает никакой синтаксической ошибки.

ШАГ 2 Я начал подозревать проблемы с областями видимости, я решил скопировать скрипт в функцию column () и вставить его в таблицу () в пределах l oop. Таким образом, я выполняю код напрямую, но вы заметили, что внешний l oop и внутренний l oop имеют переменную-указатель с таким же объявлением (i), что вызовет синтаксическую ошибку. я изменил объявление внутреннего указателя l oop на (j) он начал работать правильно. Ошибка, с которой я боролся, была ошибка определения области. в отличие от JAVA и PHP, которые я знаю, я считаю, что js имеет самые сложные логические ошибки, поэтому следите. ЗАКЛЮЧЕНИЕ В JavaScript существует два типа области: 1. Локальная область 1. Глобальная область

Согласно https://www.w3schools.com/js/js_scope.asp Локальная JavaScript Переменные

Переменные, объявленные в функции JavaScript, становятся ЛОКАЛЬНЫМИ для этой функции.

Локальные переменные имеют область действия функции: доступ к ним возможен только из функции. Пример

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";

  // code here CAN use carName

}

Поскольку локальные переменные распознаются только внутри их функций, переменные с одинаковыми именами могут использоваться в разных функциях.

Локальные переменные создаются, когда функция запускается и удаляется после завершения функции.

Global JavaScript Переменные

Переменная, объявленная вне функции, становится GLOBAL.

Глобальная переменная имеет глобальный охват: все скрипты и функции на веб-странице могут получить к нему доступ. Пример

var carName = "Volvo";

// code here can use carName

function myFunction() {

  // code here can also use carName

}

Я ДОЛЖЕН ИЗМЕНИТЬ ФОРМУ ПЕРЕМЕННОГО ИМЕНИ POI i to 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;
}

ПРАВИЛЬНЫЙ ВЫХОД

ЗАКЛЮЧЕНИЕ Когда вы звоните вторая функция из функции, убедитесь, что при объявлении переменной вы даете ей уникальное имя или объявите ее с помощью var (явно), иначе вы столкнетесь с логической ошибкой.