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

我使用的是SYMFONY 3，我想使用Ajax解析从controller收到的JSON，问题是JSON无法正确读取并返回未定义的JSON。下面是我的代码：

控制器：

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

我在细枝文件中的脚本：

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，有很多类似的插件。要使用它，只需输出JSON，插件就会识别并激活，格式化JSON以便于阅读

另一个答案是pretty print JSON：

PHP:

$echo'.json_encode（$data，json_PRETTY_PRINT）。“”

var json = JSON.parse(json);

JS:
document.write（JSON.stringify（data，null，4））
如果您只想阅读JSON，有很多类似的插件。要使用它，只需输出JSON，插件就会识别并激活，格式化JSON以便于阅读

另一个答案是pretty print JSON：

PHP:
$echo'.json_encode（$data，json_PRETTY_PRINT）。“”

var json = JSON.parse(json);

JS:
document.write（JSON.stringify（data，null，4））
在使用JSON之前，需要将其解析为JavaScript对象，如下所示：

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

在
警报（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");    
    }
}

函数detailfacture{{fact.id}（id）{
var z=新的XMLHttpRequest（）；
z、 open（“get”、“{{path（'Ajaxonify'，{'id'：fact.id}}}）”，true）；
z、 发送（）
z、 onreadystatechange=函数结果（）{
var json=z.responseText；
如果（json！=“”）
{
警报（json）；
json=json.parse（json）；
var-tr；
for（var i=0；i
在使用JSON之前，需要将其解析为JavaScript对象，如下所示：

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

在
警报（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");    
    }
}

函数detailfacture{{fact.id}（id）{
var z=新的XMLHttpRequest（）；
z、 open（“get”、“{{path（'Ajaxonify'，{'id'：fact.id}}}）”，true）；
z、 发送（）
z、 onreadystatechange=函数结果（）{
var json=z.responseText；
如果（json！=“”）
{
警报（json）；
json=json.parse（json）；
var-tr；
for（var i=0；i
我可以阅读它看屏幕截图，我只想将其转换为html表格问题是表格有一个模式（Col，Cel），json可以是一个类似XML的数据树。只知道输出它的JSON响应。我的回答让你以一种有组织的方式阅读它，我知道它，但不知道它返回未定义的原因：看看这个例子，我遵循它是未定义的，因为它是一个字符串，而不是一个JS对象，你需要执行
var json=json.parse（z.responseText）
the json.parse retruns[object][object]json已经在controlleri中解析了我可以读取它看屏幕截图，我只想将它转换成html表格问题是表格有一个模式（Col，Cel），json可以是类似XML的数据树。只知道输出它的JSON响应。我的回答让你以一种有组织的方式阅读它，我知道它，但不知道它返回未定义的原因：看看这个例子，我遵循它是未定义的，因为它是一个字符串，而不是一个JS对象，你需要执行
var json=json.parse（z.responseText）
the json.parse retruns[object][object]该json已在控制器中解析该警报返回我刚才测试过的[object][object]，该json已在控制器中解析我用完整示例更新了我的答案。如果
警报
显示JSON文本，则JSON尚未被解析，并且不是对象。另外，请注意，我使用
tr.append（）更新了行
调用使用
i
变量而不是硬编码的
1
。不是那么容易问题不在于i或json解析，我只是在发布之前测试了这一点。我不确定“json已经在控制器中解析”是什么意思。我可以从你的截图中看到，在for循环开始之前，JSON还没有被解析。请再次测试我的完整示例。警报返回我刚才测试的[object][object]，json已经在controllerI中解析。我用完整示例更新了我的答案。如果
警报
显示JSON文本，则JSON尚未被解析，并且不是对象。另外，请注意，我使用
tr.append（）更新了行
调用使用
i
变量而不是硬编码的
1
。不是那么容易问题不在于i或json解析，我只是在发布之前测试了这一点。我不确定“json已经在控制器中解析”是什么意思。我可以从你的截图中看到，在for循环开始之前，JSON还没有被解析。请再次测试我的完整示例。