Using javascript to loop through PHP response

Question

I have the following code to store the search results, but at the moment it rewrites the variables each time the loop is run, I need to some how pass to my javascript the data in rows so I can show a table on the html page with the results in.

$num = mysql_num_rows($sql);


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

    $json['success'] = TRUE;
    while ($row = mysql_fetch_array($sql)){  


      $json['data']['name'] = $row['name'];
      $json['data']['barcode'] = $row['barcode'];
      $json['data']['serial'] = $row['serial'];

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

echo json_encode($json);

Javascript

               $.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();

                      var name = response.data.name;
                      var barcode = response.data.barcode;
                      var serial = response.data.serial;

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

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

               });

Parag Tyagi · Accepted Answer · 2014-04-17 14:15:22Z

1

Try changing the while loop with below -

 $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++;
}

JS -

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

   for(field in response.data)
   {
       var name = field.name;
       var barcode = field.barcode;
       var serial = field.serial;

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

edited Apr 17, 2014 at 14:15

answered Apr 17, 2014 at 14:02

Parag Tyagi

9,0003 gold badges45 silver badges50 bronze badges

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

5 Comments

user1636522 Over a year ago

Or $json['data' . $i] ^^

Dave Chen Over a year ago

Or $json[] = array('data' => $row); ^^

user1738017 Over a year ago

Thank you, it sends the correct response, however the javascript (which I've added to the question) now doesn't correspond

Dave Chen Over a year ago

@user1738017 Please post your entire request. If you are using $.ajax, the datatype should be JSON, you may also decide to use $.getJSON instead.

user1738017 Over a year ago

My aim is to add a new row to my table for each result row. as it stands, the fields in the first row of the table have the id of #searchname etc

PleaseStand · Accepted Answer · 2014-04-17 14:44:35Z

On the PHP side:

// Keep only the desired columns
$jsonRow = array();
foreach (array('name', 'barcode', 'serial') as $column) {
    $jsonRow[$column] = $row[$column];
}

// Add the row to the JSON response
$json['data'][] = $jsonRow;

The output will look like this:

{
    "success": true,
    "data": [
        {
            "name": "NAME1",
            "barcode": "BARCODE1",
            "serial": "SERIAL1"
        },
        {
            "name": "NAME2",
            "barcode": "BARCODE2",
            "serial": "SERIAL2"
        }
    ]
}

Then on the JavaScript side, iterate over the array response.data and build the table:

var $table, $tbody, i, row;

$table = $('<table>');
$table.append('<thead><tr><th>Name</th><th>Barcode</th><th>Serial</th></tr></thead>');

$tbody = $('<tbody>').appendTo($table);
for (i = 0; i < response.data.length; ++i) {
    row = response.data[i];
    // Then generate the HTML elements for this row using the strings
    // row.name, row.barcode, row.serial and add them to the table
    $('<tr>')
        .append($('<td>').text(row.name))
        .append($('<td>').text(row.barcode))
        .append($('<td>').text(row.serial))
        .appendTo($tbody);
}

$('body').append($table);

Collectives™ on Stack Overflow

Using javascript to loop through PHP response

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related