如何使用 javascript 循环 JSON 响应

Question

我正在使用以下 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");
                    }
                 },

               }); 

我正在尝试遍历从 php 返回的行，并将每一行作为一行放在我的 html 表中。我从 php 得到正确的响应，但我的循环没有显示任何内容的HTML。

HTML 表格

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

Answer 1

您可以使用 jquery .each()。迭代数组，并使用 jquery .append() 添加表行：

如果数据是对象数组：

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

如果是数组数组：

$.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/

编辑你的 php 创建奇怪的 json，因此你的问题。修复它：

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