Jquery $ .each петля счетчик

Question

я бег этого кода, когда данные набран в вводе текста:

$("input#search").live("keyup", function(e) {  
     var search_string = $(this).val(); 
     var i = 0; 
     var trHTML = ''; 
     if(search_string !== '') { 
      $.ajax({ 
       type: "POST", 
       dataType: "json", 
       url: "/section/search_go", 
       data: { query: search_string }, 
       cache: false, 
       success: function(response) { 
        $.each(response, function(i, item) { 


         trHTML += '<tr>'; 
         trHTML += '<td>' + item.accountnumber + '</td>'; 
         trHTML += '<td>' + item.company + '</td>'; 
         trHTML += '<td>' + item.phone + '</td>'; 
         trHTML += '<td>' + item.postcode + '</td>'; 
         trHTML += '</tr>'; 
        }); 
        $('#customers').html(trHTML); 
       } 
      }); 
      console.log(i); 
     } 

     /*if(counter === 0 || search_string == '') { 
      $('#customers').html('<tr><td colspan="4">No Results</td></tr>'); 
     }*/ 
    }); 

я пытаюсь получить количество записей в цикле $.each, но я не могу показаться, чтобы сделать это ,

я попытался с помощью i, который находится в функции и я также пытался добавить counter переменные и для каждого цикла я добавил counter++ но до сих пор разве работает

Answer 1

Я надеюсь, что, если вам нужно получить несколько раз петли пробега ,

Просто сделайте response.length. оба будут одинаковыми.

$("input#search").live("keyup", function(e) {  
     var search_string = $(this).val(); 
     var resultLength; //Declare variable 
     var i = 0; 
     var trHTML = ''; 
     if(search_string !== '') { 
      $.ajax({ 
       type: "POST", 
       dataType: "json", 
       url: "/section/search_go", 
       data: { query: search_string }, 
       cache: false, 
       success: function(response) { 
        resultLength = response.length; //assign the length 
        $.each(response, function(i, item) { 


         trHTML += '<tr>'; 
         trHTML += '<td>' + item.accountnumber + '</td>'; 
         trHTML += '<td>' + item.company + '</td>'; 
         trHTML += '<td>' + item.phone + '</td>'; 
         trHTML += '<td>' + item.postcode + '</td>'; 
         trHTML += '</tr>'; 
        }); 
        $('#customers').html(trHTML); 
       } 
      }); 
      console.log(i); 
     } 

     /*if(resultLength === 0 || search_string == '') { //access here 
      $('#customers').html('<tr><td colspan="4">No Results</td></tr>'); 
     }*/ 
    }); 

Answer 2

console.log (i) должен быть внутри каждой функции.

success: function(response) { 
       $.each(response, function(i, item) { 


        trHTML += '<tr>'; 
        trHTML += '<td>' + item.accountnumber + '</td>'; 
        trHTML += '<td>' + item.company + '</td>'; 
        trHTML += '<td>' + item.phone + '</td>'; 
        trHTML += '<td>' + item.postcode + '</td>'; 
        trHTML += '</tr>'; 
        console.log(i); // this "i" from here function(i, item) 
       }); 

Answer 3

Основная проблема с подхода заключается в том, что $.ajax() звонки асинхронные [1]. Это очень важная часть веб-разработки: запросы AJAX (и HTTP-запросы в целом) могут занимать много времени (иногда порядка 30 секунд или дольше), а если ваш код JavaScript заблокирован, ожидая его завершения, весь браузер закроется. (См связанной статьи статьи MDN для получения более подробной информации по этому вопросу.)

Что это означает для вас, что любой код, который опирается на результатах от вашего $.ajax() запроса должен быть вызван из функции success обратного вызова, запускаемая когда HTTP-запрос успешно возвращает данные.

Еще один комментарий к вашему коду, не связанный с вашим вопросом: вы в настоящее время делаете HTTP-запрос на каждое событие keyup. Это будет действительно замедляет вашу страницу, это может привести к перегрузке вашего сервера, и это может привести к условиям гонки и другим типам ошибок, если все идет не так, как надо (помните, что HTTP несколько непредсказуем). Вы должны отменить свой обработчик событий keyup. Используйте что-то вроде плагина jQuery для дросселя/debounce от Ben Alman [2], чтобы отменить ваш обработчик (см. Пример ниже). (Возможно, вы захотите также изменить его на событие keypress, хотя это не так необходимо: объект событий keypress содержит только некоторую дополнительную информацию, которая иногда может быть полезной.)

Я бы рекомендовал что-то вроде этого (при условии, что вы включены некоторые JQuery плагин, чтобы дать вам $.debounce()):

$("input#search").live(
    "keypress", // changed keyup to keypress; not necessary, but often preferred 
    $.debounce(
     250, // debounced by 250ms; might want longer, but I wouldn't go any less 
     function(e) { 
      var search_string = $(this).val(), 
       no_results_str = '<tr><td colspan="4">No Results</td></tr>'; 
      if (search_string === '') { 
       $('#customers').html(no_results_str); 
      } 
      else { 
       if(search_string !== '') { 
        $.ajax({ 
         type: "POST", 
         dataType: "json", 
         url: "/section/search_go", 
         data: { query: search_string }, 
         cache: false, 
         success: function(response) { 
          console.log('Got '+response.length+' results'); 
          if(response.length === 0) { 
           $('#customers').html(no_results_str); 
          } 
          else { 
           var trHTML = ''; 
           $.each(response, function(i, item) { 

            trHTML += '<tr>'; 
            trHTML += '<td>' + item.accountnumber + '</td>'; 
            trHTML += '<td>' + item.company + '</td>'; 
            trHTML += '<td>' + item.phone + '</td>'; 
            trHTML += '<td>' + item.postcode + '</td>'; 
            trHTML += '</tr>'; 
           }); 
           $('#customers').html(trHTML); 
          } 
         } 
        }); 
       } 
      } 
     } 
    ) 
); 

Ссылки:

1. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
2. http://benalman.com/projects/jquery-throttle-debounce-plugin/