Utiliser javascript pour boucler la réponse PHP

Question

J'ai le code suivant pour stocker les résultats de la recherche, mais au moment où il réécrit les variables chaque fois que la boucle est exécutée, j'ai besoin de comment passer à mon javascript les données en lignes afin Je peux montrer une table sur la page html avec les résultats dans

$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"); 
        } 
       }, 

       }); 

Answer 1

Essayez de changer la boucle avec while ci-dessous -.

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

Answer 2

Du côté de PHP:

// 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; 

La sortie ressemblera à ceci:

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

Puis sur le côté JavaScript, itérer sur le tableau response.data et construire la 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);