PHP jQuery 获取数组并正确显示

Question

我的index.php 中有一个 AJAX 请求到另一个文件 (get_code.php)，该文件查询数据库并将 json_encoded 数组返回到 index.php，在那里它被转换为带有 @987654325 的字符串@。

这很好用，但事实上它会像这样出现在页面上：

[{"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]));

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

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

th, td { border: 1px solid }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tarray"></div>

Answer 2

这是根据 OP 的需要。我只是在这里展示一个正确的 JSON 示例以及如何迭代以表格形式获取它

正确的 JSON 对象如下所示：

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

---

JSON 成表格：

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

    }

#mytable{
 padding:0px;
}
tr,td{
border: 1px solid black;
padding:5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'></div>