jQuery each loop on json response after ajax in laravel

• Append data to div using foreach loop in jQuery on json response after ajax call in laravel

  //code inside controller's method
  $users = User::select('name', 'id')->where('name',  'like', '%' . $request->name . '%')->get();
  return response()->json(['data' => $users]);
  

  //script 
  $('#eventSpeaker').keyup(function(){
      var input = $(this).val();
      
      $.ajax({
          url: "/get-users",
          method: "POST",
          data:{
              name: input,
          },
          success:function(response){
              html = "";
              html += '<ul class="list-unstyled">';
              $.each(response.data, function( index, value ) {
                  html += '<li class="my-2 text-capitalize" style="cursor:pointer" data-id="'+ value.id +'">' + value.name +'</li>';
              });
              html += '</ul>';
              $('#speakerResponse').empty('').append(html);
              console.log(html);
          },
          error: function (xhr, ajaxOptions, thrownError) {
              console.log(xhr.status);
              console.log(thrownError);
          }
      });
  });
  

  You can easily append data to div after each method in jQuery. This code snippet helps you to get the record with name using search input and after that you can use jQuery each method to get the value and append data to the html element.

• What is the use of each () method?

  The each() method specifies a function to run for each matched element.

• How do you iterate through an element in jQuery?

  The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0.

• What does the each () function do?

  The each() function returns the current element key and value, and moves the internal pointer forward. Note: The each() function is deprecated in PHP 7.2. This element key and value is returned in an array with four elements.

• Can we use foreach in jQuery?

  Learn how to loop through elements, arrays and objects with jQuery using the $.each() function, jQuery's foreach equivalent. jQuery's foreach equivalent can be very useful for many situations. These examples will get you started and teach you how you can loop through arrays, objects and all kinds of HTML elements.

• How do you iterate through an array in jQuery?

  The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time.

• How do I iterate HTML table rows in jQuery?

  $('table > tbody > tr').each(function(index, tr) {
    console.log(index);
    console.log(tr);
  });
  

• How to loop over JSON result after AJAX Success?

  You can convert it to a JSON object by manually using the parseJSON command or simply adding the dataType: 'json' property to your ajax call.

  $.each(data, function( index, value ) {
    alert( index + ": " + value );
  });
  

• Can we use forEach loop in jQuery?

  forEach() methods. There are also libraries like foreach which let you iterate over the key value pairs of either an array-like object or a dictionary-like object. Remember: $.each() and $(selector).

Related Queries

• Laravel csrf token mismatch for ajax POST Request

Back to code snippet queries related laravel