How to loop over JSON response with javascript

Question

I'm using the following ajax:

       $.ajax({ 
                 type: 'POST', 
                 url: '/search/search.php', 
                 crossDomain: true,
                 data:  {data: data},
                 dataType: 'json', 
                 async: false,

                 success: function (response){ 
                    if (response.success) 
                        {
                           $('#search-results').show();

                           for(field in response.data){

                           error = response.field_errors[field];           

                               var name = field.name;
                               var barcode = field.barcode;
                               var serial = field.serial;

                               $("#searchname").html(name);
                               $("#searchbarcode").html(barcode);
                               $("#searchserial").html(serial);


                           }
                        } 
                    else {
                        console.log("fail");
                    }
                 },

               });

I'm trying to loop through the rows returned from the php, and put each row as a row in the table of my html.. I get the correct response from the php, but my loop doesn't show anything in the html.

HTML Table

        <table class="table" id="search-results" style="display:none;">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Serial</th>
              <th>Barcode</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td id="searchname"></td>
              <td id="searchbarcode"></td>
              <td id="searchserial"></td>
            </tr>
          </tbody>
        </table>

PHP

    $json = array();
    if($num > 0)
    {

        $json['success'] = TRUE;
        $i = 0;
 while ($row = mysql_fetch_array($sql))
 {
    $json[$i]['data']['name'] = $row['name'];
    $json[$i]['data']['barcode'] = $row['barcode'];
    $json[$i]['data']['serial'] = $row['serial'];

    $i++;
}
    }
    else
    {
        $json['success'] = FALSE;
    }

    echo json_encode($json);

What is wrong ? What do you expect it to do ? What does it do instead ? Please ask a real question. — blue112
– blue112, Commented Apr 17, 2014 at 14:39
I'm trying to add a row to my html table for each row in the php response. It currently doesn't show anything on the html but gives me the correct json response from the php — user1738017
– user1738017, Commented Apr 17, 2014 at 14:40
Why are you using a loop? As ID's are unique, you will only overwrite your values with each row. And what does console.log(field); give you in the loop? — jeroen
– jeroen, Commented Apr 17, 2014 at 14:45
I don't want to overwrite my values, I've updated my question with the code of my table. is there a way to generate html for each row? — user1738017
– user1738017, Commented Apr 17, 2014 at 14:46
Also var name = field.name; in for..in doesn't make sense. You probably need var name = response.data[field].name;. And the same for barcode and serial. — Teemu
– Teemu, Commented Apr 17, 2014 at 14:49

Steve · Accepted Answer · 2014-04-17 15:20:11Z

3

You can use jquery .each(). to itterate the array, and jquerys .append() to add the table rows:

If the data is an array of objects:

$.each(response.data, function( index, item ) {
    $('#search-results').append('<tr><td>' + item.name + '</td><td>' + item.barcode + '</td><td>' + item.serial + '</td><td></tr>');
});

If its an array of arrays:

$.each(response.data, function( index, item ) {
    $('#search-results').append('<tr><td>' + item['name'] + '</td><td>' + item['barcode'] + '</td><td>' + item['serial'] + '</td><td></tr>');
});

https://api.jquery.com/jQuery.each/

EDIT you php creates odd json, hence your problems. Fix it up:

$json = array();
if($num > 0)
{

    $json['success'] = TRUE;

    while ($row = mysql_fetch_array($sql))
    {
          $json['data'][]=array('name'=>$row['name'], 'barcode'=>$row['barcode'], 'serial'=>$row['serial']);
    }
}
else
{
    $json['success'] = FALSE;
}

echo json_encode($json);

edited Apr 17, 2014 at 15:20

answered Apr 17, 2014 at 14:42

Steve

20.5k5 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1738017 Over a year ago

I get TypeError: object is undefined length = object.length

Steve Over a year ago

@user1738017 please edit your question to show me the contents of response.data, eg with console.log(response.data); or just show the php code that creates it in the 1st place.

user1738017 Over a year ago

the full response is

{"success":true,"0":{"data":{"name":"carla","barcode":null,"serial":"test"}},"1":{"data":{"name":"test","barcode":null,"serial":"test"}}}

Steve Over a year ago

@user1738017 your json is messed up. I have edited my answer to fix it for you.

user1738017 Over a year ago

I've changed it but now I see this error ` Notice: Use of undefined constant serial - assumed 'serial' in /Applications/XAMPP/xamppfiles/htdocs/search/search.php on line 22 Notice: Use of undefined constant serial - assumed 'serial' in /Applications/XAMPP/xamppfiles/htdocs/search/search.php on line 22 {"success":true,"data":[{"name":"carla","barcode":null,"serial":"test"},{"name":"test","barcode":null,"serial":"test"}]}`

|

Collectives™ on Stack Overflow

How to loop over JSON response with javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related