jQuery loop over JSON result from AJAX Success

Question

On the jQuery AJAX success callback I want to loop over the results of the object      This is an example of how the response looks in Firebug        TEST1  45  TEST2  23  TEST3   DATA1       TEST1  46  TEST2  24  TEST3   DATA2       TEST1  47  TEST2  25  TEST3   DATA3       How can I loop over the results so that I would have access to each of the elements  I have tried something like below but this does not seem to be working   jQuery each data  function index  itemData         itemData TEST1      itemData TEST2      itemData TEST3

User · Accepted Answer

you can remove the outer loop and replace this with data.data:

$.each(data.data, function(k, v) {
    /// do stuff
});

You were close:

$.each(data, function() {
  $.each(this, function(k, v) {
    /// do stuff
  });
});

You have an array of objects/maps so the outer loop iterates over those. The inner loop iterates over the properties on each object element.

User · Answer

each will work   Another option is jQuery Ajax Callback for array result  function displayResultForLog result      if  result hasOwnProperty  d          result   result d        if  result     undefined  amp  amp  result    null        if  result hasOwnProperty  length            if  result length  gt   1            for  i   0  i  lt  result length  i                var sentDate   result i                     else             requiredTable  append  Length is 0                  else           requiredTable  append  Length is not available                else         requiredTable  append  Result is null

User · Answer

I use  map for foreach  For example  success  function data      let dataItems   JSON parse data    dataItems   dataItems map  item    gt        return     lt article gt                   lt h2 gt   item post title  lt  h2 gt                   lt p gt   item post excerpt  lt  p gt                 lt  article gt

User · Answer

You can also use the getJSON function         getJSON   your script php   function data              each data  function index                alert data index  TEST1               alert data index  TEST2                         This is really just a rewording of ifesdjeen s answer  but I thought it might be helpful to people

User · Answer

This is what I came up with to easily view all data values    x000D   x000D  var dataItems       x000D    each data  function  index  itemData    x000D      dataItems    index          itemData     n   x000D      x000D  console log dataItems   x000D   x000D   x000D

User · Answer

Try jQuery map function  works pretty well with maps    x000D   x000D  var mapArray     x000D     lastName    Last Name cannot be null    x000D     email    Email cannot be null    x000D     firstName    First Name cannot be null   x000D     x000D   x000D    map mapArray  function val  key    x000D    alert  Value is      val   x000D    alert  key is      key   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I am partial to ES2015 arrow function for finding values in an array  const result   data find x  gt  x TEST1      46      Checkout Array prototype find   HERE

User · Answer

if you don t want alert  that is u want html  then do this            each data  function index                pr result   append data index  dbcolumn                 NOTE  use  append  not  html  else the last result is what you will be seeing on your html view  then your html code should look like this       lt div id  pr result  gt  lt  div gt        You can also style  add class  the div in the jquery before it renders as html

User · Answer

If you use Fire Fox  just open up a console  use F12 key  and try out this   var a        TEST1  45  TEST2  23  TEST3   DATA1       TEST1  46  TEST2  24  TEST3   DATA2       TEST1  47  TEST2  25  TEST3   DATA3         each  a  function  bb        console log  bb       console log  a bb        console log  a bb  TEST1         hope it helps

User · Answer

For anyone else stuck with this  it s probably not working because the ajax call is interpreting your returned data as text - i e  it s not yet a JSON object   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  e g   jQuery ajax       type   POST       url    lt  php echo admin url  admin-ajax php      gt        data  data       dataType   json         ensure you add this line        success  function data            jQuery each data  function index  item                  now you can access properties using dot notation                        error  function XMLHttpRequest  textStatus  errorThrown            alert  some error

User · Answer

If you are using the short method of JQuery ajax call function as shown below  the returned data needs to be interpreted as a json object for you to be able to loop through      get  url   function data  statusText  xheader       your code within the success callback   var data     parseJSON data       each data  function i            console log data i

User · Answer

Access the json array like you would any other array   for var i  0 i  lt  itemData length-1 i        var item   itemData i     alert item Test1   item Test2   item Test3

[jquery] jQuery loop over JSON result from AJAX Success?

Examples related to jquery

Examples related to ajax

Examples related to json