PHP jQuery正确获取数组并显示

时间:2017-04-08 12:08:52

标签: php jquery arrays ajax

我的index.php中有一个AJAX请求到另一个文件(get_code.php)查询数据库并将json_encode d数组返回index.php,它被转换为JSON_stringify的字符串。

这样可以正常工作,但事实是它出现在页面上的情况如下:

[{"code":"GG500","desc":"Desc 1","price1":"9.35","price2":"8.25","price3":"7.75","avg":"7.994198","lwcm":"7.9568","cost":"4.63"},
{"code":"GGC4","desc":"Desc 2","price1":"","price2":"","price3":"","avg":"504.666666","lwcm":"387.5","cost":"260.61"}]

问题:

如何获取此字符串并将其转换为普通数组或我可以在index.php的HTML表格中显示的内容?

当前代码:

index.php jQuery

if (!data.result) {
   $('#modal2').modal('show');
   $('.msgs').text(data.error);
   $('#cdnf').text(data.code);
   $('#tarray').text(JSON.stringify(data.tarray));
}

index.php HTML

<p id="tarray"></p><!-- needs to be a table -->

get_code.php PHP

$taq = mysql_query("SELECT * FROM variants")or die(mysql_error());
if($taq){
    $tarray = array();
    while($row = mysql_fetch_assoc($taq)){
            $tarray[] = array(
     'code' => $row['va_code'],
     'desc' => $row['va_description'],
     'price1' => $row['price_1'],
     'price2' => $row['price_2'],
     'price3' => $row['price_3'],
     'avg' => $row['average_price'],
     'lwcm' => $row['lwcm'],            
     'cost' => $row['cost']  
);
    }
};
die(json_encode(['tarray' => $tarray]));

2 个答案:

答案 0 :(得分:1)

这符合OP的需要。我只是在这里展示一个正确的JSON示例以及如何以表格的形式进行迭代

正确的JSON对象如下所示:

[{"code":"ABC123","desc":"Example description","price1":"3.00"},
  {"code":"BDC234","desc":"Example description2","price1":"3.50"}]

JSON进入表:

&#13;
&#13;
var obj=[{"code":"ABC123","desc":"Example description","price1":"3.00"},{
  "code":"BDC234","desc":"Example description2","price1":"3.50"}]
    var tbl=$("<table/>").attr("id","mytable");
    $("#div1").append(tbl);
    for(var i=0;i<obj.length;i++)
    {
        var tr="<tr>";
        var td1="<td>"+obj[i]["code"]+"</td>";
        var td2="<td>"+obj[i]["desc"]+"</td>";
        var td3="<td>"+obj[i]["price1"]+"</td></tr>";

       $("#mytable").append(tr+td1+td2+td3); 

    }
&#13;
#mytable{
 padding:0px;
}
tr,td{
border: 1px solid black;
padding:5px
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

而不是:

$('#tarray').text(JSON.stringify(data.tarray));

循环数据并创建一个表:

$('#tarray').html('').append(
    $('<table>').append(
        $('<tr>').append(
            $.map(data.tarray[0] || [], function (_, key) {
                return $('<th>').text(key);
            })
        ),
        data.tarray.map(function (row) {
            return $('<tr>').append(
                $.map(row, function (cell) {
                    return $('<td>').text(cell);
                })
            );
        })
    )
);

&#13;
&#13;
// Sample data
var data = {
    tarray: [{"code":"GG500","desc":"Desc 1","price1":"9.35","price2":"8.25","price3":"7.75","avg":"7.994198","lwcm":"7.9568","cost":"4.63"},
{"code":"GGC4","desc":"Desc 2","price1":"","price2":"","price3":"","avg":"504.666666","lwcm":"387.5","cost":"260.61"}]
};

$('#tarray').html('').append(
    $('<table>').append(
        $('<tr>').append(
            $.map(data.tarray[0] || [], function (_, key) {
                return $('<th>').text(key);
            })
        ),
        data.tarray.map(function (row) {
            return $('<tr>').append(
                $.map(row, function (cell) {
                    return $('<td>').text(cell);
                })
            );
        })
    )
);
&#13;
th, td { border: 1px solid }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tarray"></div>
&#13;
&#13;
&#13;