使用 AJAX 响应将 JSON 对象解析并转换为 html table

Question

我正在使用 SYMFONY 3，我想使用 Ajax 解析从控制器接收到的 JSON，问题是 JSON 无法正确读取 returns undefined 这是我下面的代码：

控制器：

 $em = $this->getDoctrine()->getManager();

            $RAW_QUERY = 'SELECT id,DO_Date,DL_Design,DL_Qte,DL_MontantHT,DL_MontantTTC FROM `facture_ligne` WHERE facture_id=:id';

            $statement = $em->getConnection()->prepare($RAW_QUERY);
            // Set parameters
            $statement->bindValue('id', $id);
            $statement->execute();

            $facture = $statement->fetchAll();

            $serializer = $this->container->get('jms_serializer');
            $reports = $serializer->serialize($facture,'json');
            return new Response($reports);

我的脚本在 twig 文件中：

function detailfacture{{ fact.id }} (id) {

    var z= new XMLHttpRequest();
    z.open("get","{{ path('Ajaxonify',{'id':fact.id}) }})",true);
    z.send()
    z.onreadystatechange = function result () {
        var json=z.responseText;
        if(json!="")
        {
            alert(json);

            var tr;
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[1].DL_MontantHT + "</td>");
                tr.append("<td>" + json[1].DO_Date + "</td>");
                tr.append("<td>" + json[1].DL_Qte + "</td>");
                $('#tb').append(tr);
            }  
        }
        else alert("helo");    
    }
}

这是一些结果的屏幕截图：

我刚刚用静态 JSON 进行了测试，它工作正常

这就是

console.log(data);
console.log(json);

returns

Answer 1

如果你只是想阅读 JSON，有很多像 JSON Formatter 这样的插件。要使用它，只需输出JSON，插件将识别并激活，格式化JSON以便于阅读。

另一个答案很漂亮 JSON:

PHP: $echo "<pre>".json_encode($data, JSON_PRETTY_PRINT)."</pre>";

JS: document.write(JSON.stringify(data, null,4));

Answer 2

使用前需要将JSON解析为JavaScript对象，如下所示：

var json = JSON.parse(json);

在 alert(json) 之后但在 for 循环之前插入这一行，因此您的脚本如下所示：

function detailfacture{{ fact.id }} (id) {

    var z= new XMLHttpRequest();
    z.open("get","{{ path('Ajaxonify',{'id':fact.id}) }})",true);
    z.send()
    z.onreadystatechange = function result () {
        var json=z.responseText;
        if(json!="")
        {
            alert(json);
            json = JSON.parse(json);

            var tr;
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].DL_MontantHT + "</td>");
                tr.append("<td>" + json[i].DO_Date + "</td>");
                tr.append("<td>" + json[i].DL_Qte + "</td>");
                $('#tb').append(tr);
            }  
        }
        else alert("helo");    
    }
}

使用 AJAX 响应将 JSON 对象解析并转换为 html table

Parse and transform JSON Objects to an html table using AJAX Response

javascript

ajax

json

symfony

symfony-3.3