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

Question

I am using SYMFONY 3 and i want to parse a received JSON from controller using Ajax , the issue there that the JSON can't be read properly and returns undefined this is my code below :

Controller :

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

My script in a the twig file :

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

And this some screen shots of the results :

I just tested with a static JSON and it works fine

This is what

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

returns

Jason Smith · Accepted Answer · 2017-08-30 14:03:03Z

1

You need to parse the JSON into a JavaScript object before using it, like this:

var json = JSON.parse(json);

Insert this line after alert(json) but before the for loop, so your script looks like this:

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

edited Aug 30, 2017 at 14:03

answered Aug 30, 2017 at 13:46

Jason Smith

1,2098 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Malek Zarkouna Over a year ago

the alert returns [object][object] i just tested before , the json is already parsed in controller

Jason Smith Over a year ago

I updated my answer with the full example. If the alert show JSON text, the JSON hasn't been parsed yet and is not an object.

Jason Smith Over a year ago

Also, please note that I updated the lines with tr.append() calls to use the i variable instead of a hardcoded 1.

Malek Zarkouna Over a year ago

Is not that easy the problem is not with the i or with the json parse i just have tested this before posting

Jason Smith Over a year ago

I'm not sure what you mean by "the json is already parsed in the controller". I can see by your screenshots that immediately before the for loop starts, the JSON has not yet been parsed. Please test my full example again.

|

Maxwell s.c · Accepted Answer · 2017-08-30 13:46:09Z

1

If you just want to read the JSON, there is a lot of plugins Like JSON Formatter. To use it, just output the JSON and the plugin will identify and activate, formatting JSON for easy reading.

Another answer is pretty print JSON:

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

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

edited Aug 30, 2017 at 13:46

answered Aug 30, 2017 at 13:42

Maxwell s.c

1,69816 silver badges31 bronze badges

9 Comments

Malek Zarkouna Over a year ago

i can read it look to the screen shot, i just want to transform it into an html table

Maxwell s.c Over a year ago

The problem is Tables have an patern (Col, Cel) and json can be an data tree like XML. Only knowing the JSON response to output it. My answer let you read it in a organized way

Malek Zarkouna Over a year ago

I know it but just did not know why it returns undefined : take a look to this example that i follow it jsfiddle.net/8kkg3

Maxwell s.c Over a year ago

Is undefined because it is a string, not an JS object, you need to do var json = JSON.parse(z.responseText);

Malek Zarkouna Over a year ago

the json.parse retruns [object][object] the json is already parsed in the controller

|

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related