How can I put JSON data in html data?

Question

1.00/5 (3 votes)

See more:

<pre lang="xml"> <script type="text/javascript">
        $(document).ready(function () {

function dataToTable($table, obj, collectionName) {
                //var obj= objj.d
                //Load the properties as headings.
                $thead = $table.find('thead');
                $tr = $('<tr />');
                //get property names and add a th for each property
                for (property in obj[collectionName][0]) {
                    $th = $('<th />');
                    $th.html(property);
                    $tr.append($th);
                }
                //append header row to thead
                $thead.append($tr);

                //load the data from the routes to the tbody.
                $tbody = $table.find('tbody');

                $.each(obj[collectionName], function () {
                    //create row per record
                    $tr = $('<tr />');
                    //dynamically get values by property name and load to a td
                    for (property in this) {
                        $td = $('<td />');
                        $td.html(this[property]);
                        $tr.append($td);
                    }
                    //append row to tbody
                    $tbody.append($tr);
                });

            }

$.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default2.aspx/GetLiveTrainStatus",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    alert(data.route[0].status);
                    dataToTable($('#routes'), JSON.stringify(data), 'route');

                },
                error: function (result) {
                    alert("Error");
                }
            });


        });


</script>

</pre>

while success function return data as below format.

JavaScript

var data = {
    "position": "Train Arrived at Barauni Jn. (BJU) at 05:45 PM",
    "train_number": "12554",
    "response_code": 200,
    "error": "",
    "total": 21,
    "route": [{
        "status": "No Delay",
        "actdep": "07:50 PM",
        "scharr": "Source",
        "schdep": "07:50 PM",
        "actarr": "12:00 AM",
        "station": "New Delhi (NDLS)",
        "no": 1
    }, {
        "status": "4 Minutes Before",
        "actdep": "08:28 PM",
        "scharr": "08:30 PM",
        "schdep": "08:32 PM",
        "actarr": "08:26 PM",
        "station": "Ghaziabad (GZB)",
        "no": 2
    }, {
        "status": "43 Minutes Late",
        "actdep": "10:42 PM",
        "scharr": "09:54 PM",
        "schdep": "09:59 PM",
        "actarr": "10:37 PM",
        "station": "Aligarh Jn (ALJN)",
        "no": 3
    }, {
        "status": "30 Minutes Late",
        "actdep": "11:40 PM",
        "scharr": "11:05 PM",
        "schdep": "11:10 PM",
        "actarr": "11:35 PM",
        "station": "Tundla Jn (TDL)",
        "no": 4
    }, {
        "status": "43 Minutes Late",
        "actdep": "12:53 PM",
        "scharr": "12:08 AM",
        "schdep": "12:10 AM",
        "actarr": "12:51 AM",
        "station": "Etawah (ETW)",
        "no": 5
    }, {
        "status": "40 Minutes Late",
        "actdep": "03:05 AM",
        "scharr": "02:20 AM",
        "schdep": "02:25 AM",
        "actarr": "03:00 AM",
        "station": "Kanpur Central (CNB)",
        "no": 6
    }, {
        "status": "43 Minutes Late",
        "actdep": "04:48 AM",
        "scharr": "03:45 AM",
        "schdep": "04:05 AM",
        "actarr": "04:28 AM",
        "station": "Lucknow Ne (LJN)",
        "no": 7
    }, {
        "status": "54 Minutes Late",
        "actdep": "05:51 AM",
        "scharr": "04:55 AM",
        "schdep": "04:57 AM",
        "actarr": "05:49 AM",
        "station": "Barabanki Jn (BBK)",
        "no": 8
    }, {
        "status": "68 Minutes Late",
        "actdep": "07:33 AM",
        "scharr": "06:20 AM",
        "schdep": "06:25 AM",
        "actarr": "07:28 AM",
        "station": "Gonda Jn (GD)",
        "no": 9
    }, {
        "status": "65 Minutes Late",
        "actdep": "08:45 AM",
        "scharr": "07:35 AM",
        "schdep": "07:40 AM",
        "actarr": "08:40 AM",
        "station": "Basti (BST)",
        "no": 10
    }, {
        "status": "65 Minutes Late",
        "actdep": "09:10 AM",
        "scharr": "08:03 AM",
        "schdep": "08:05 AM",
        "actarr": "09:10 AM",
        "station": "Khalilabad (KLD)",
        "no": 11
    }, {
        "status": "50 Minutes Late",
        "actdep": "10:05 AM",
        "scharr": "09:00 AM",
        "schdep": "09:15 AM",
        "actarr": "09:50 AM",
        "station": "Gorakhpur Jn (GKP)",
        "no": 12
    }, {
        "status": "60 Minutes Late",
        "actdep": "10:55 AM",
        "scharr": "09:53 AM",
        "schdep": "09:55 AM",
        "actarr": "10:55 AM",
        "station": "Deoria Sadar (DEOS)",
        "no": 13
    }, {
        "status": "67 Minutes Late",
        "actdep": "12:12 PM",
        "scharr": "11:00 AM",
        "schdep": "11:05 AM",
        "actarr": "12:07 PM",
        "station": "Siwan Jn (SV)",
        "no": 14
    }, {
        "status": "40 Minutes Late",
        "actdep": "01:05 PM",
        "scharr": "12:20 PM",
        "schdep": "12:25 PM",
        "actarr": "01:00 PM",
        "station": "Chhapra (CPR)",
        "no": 15
    }, {
        "status": "35 Minutes Late",
        "actdep": "02:05 PM",
        "scharr": "01:25 PM",
        "schdep": "01:30 PM",
        "actarr": "02:00 PM",
        "station": "Sonpur Jn (SEE)",
        "no": 16
    }, {
        "status": "33 Minutes Late",
        "actdep": "02:18 PM",
        "scharr": "01:43 PM",
        "schdep": "01:45 PM",
        "actarr": "02:15 PM",
        "station": "Hajipur Jn (HJP)",
        "no": 17
    }, {
        "status": "40 Minutes Late",
        "actdep": "03:33 PM",
        "scharr": "02:48 PM",
        "schdep": "02:53 PM",
        "actarr": "03:28 PM",
        "station": "Muzaffarpur Jn (MFP)",
        "no": 18
    }, {
        "status": "45 Minutes Late",
        "actdep": "04:45 PM",
        "scharr": "03:55 PM",
        "schdep": "04:00 PM",
        "actarr": "04:40 PM",
        "station": "Samastipur Jn (SPJ)",
        "no": 19
    }, {
        "status": "51 Minutes Late",
        "actdep": "05:13 PM",
        "scharr": "04:20 PM",
        "schdep": "04:22 PM",
        "actarr": "05:11 PM",
        "station": "Dalsingh Sarai (DSS)",
        "no": 20
    }, {
        "status": "30 Minutes Late",
        "actdep": "N/A",
        "scharr": "05:15 PM",
        "schdep": "Destination",
        "actarr": "05:45 PM",
        "station": "Barauni Jn (BJU)",
        "no": 21
    }]
};

But It is not working.
while html table is like

XML

<table id="routes" class="table">
    <thead></thead>
    <tbody></tbody>
</table>

Posted 21-Oct-15 22:44pm

SUJEET KR SINGH

Updated 22-Oct-15 0:08am

jaket-cp

v4

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 22-Oct-15 9:51am

Where is the issue exactly?

Richard Deeming 22-Oct-15 11:03am

"Not working" is not enough information for anyone to help you. Use the "Improve question" button to update your question with a detailed explanation of the problem.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Krunal Rohit · Answer 1 · 2015-10-22T02:35:00

you can do something like,

JavaScript

success: function(data)
{
    var body = "";
    for(var i=0; i<data.length;>    {
        body += "<table><tbody><tr><td>"+data[i].position+"</td>"+
                        "<td>"+data[i].train_number+"</td>"+
                        // rest of your properties from json
                        "</tr></tbody></table>";
    }
    $("#routes tbody").empty().append(body);
}

-KR

jaket-cp · Answer 2 · 2015-10-22T04:38:00

Solution 2

Looking at the code the function dataToTable appears to be good.

The issue you may have is in the calling of the dataToTable function.

JavaScript

dataToTable($('#routes'), JSON.stringify(data), 'route');

//change to 
dataToTable($('#routes'), data, 'route');

//or to if a string is begin returned - update from comments
dataToTable($('#routes'), jQuery.parseJSON(data), 'route');

Also no need to place dataToTable in the document.ready part.

Additionally using the append multiple times is not optimal.

Have a look at solution 1, the MarkupString is generated within the loop and then a single append is used.

Just created a quick fiddle,
http://jsfiddle.net/mkuf6a5a/[^]
and yes it is probably the calling of the dataToTable which is an issue.

Posted 22-Oct-15 4:38am

jaket-cp

Updated 22-Oct-15 5:35am

v3

Comments

SUJEET KR SINGH 22-Oct-15 10:50am

not working. I have already done following these step.

jaket-cp 22-Oct-15 10:53am

oh well, it is time to debug.
Try a console.log(data) and see what you get.

SUJEET KR SINGH 22-Oct-15 10:57am

I can't resolve this issues. can You resolve this issues using any way.

jaket-cp 22-Oct-15 11:02am

As you can see from the fiddle the dataToTable is working as expected when the data is sent in correctly.
I assume the ajax call is returning something different from what is expected.
It may be getting it back as an xml object or even a string.
Or it could be sending back a json object wrapped in a d.
Hard to tell as I cannot debut the code.
You will need to debug and figure out what the you are getting in the response data.

But try saying that, try
dataToTable($('#routes'), data.d, 'route');
see if that works

SUJEET KR SINGH 22-Oct-15 11:07am

dataToTable($('#routes'), data.d, 'route');

I have already use above line.
when I use data.d in alert(data.);, then below string found.

{
"position": "Train Arrived at Barauni Jn. (BJU) at 05:45 PM",
"train_number": "12554",
"response_code": 200,
"error": "",
"total": 21,
"route": [{
"status": "No Delay",
"actdep": "07:50 PM",
"scharr": "Source",
"schdep": "07:50 PM",
"actarr": "12:00 AM",
"station": "New Delhi (NDLS)",
"no": 1
}, {
"status": "4 Minutes Before",
"actdep": "08:28 PM",
"scharr": "08:30 PM",
"schdep": "08:32 PM",
"actarr": "08:26 PM",
"station": "Ghaziabad (GZB)",
"no": 2
}, {
"status": "43 Minutes Late",
"actdep": "10:42 PM",
"scharr": "09:54 PM",
"schdep": "09:59 PM",
"actarr": "10:37 PM",
"station": "Aligarh Jn (ALJN)",
"no": 3
}, {
"status": "30 Minutes Late",
"actdep": "11:40 PM",
"scharr": "11:05 PM",
"schdep": "11:10 PM",
"actarr": "11:35 PM",
"station": "Tundla Jn (TDL)",
"no": 4
}, {
"status": "43 Minutes Late",
"actdep": "12:53 PM",
"scharr": "12:08 AM",
"schdep": "12:10 AM",
"actarr": "12:51 AM",
"station": "Etawah (ETW)",
"no": 5
}, {
"status": "40 Minutes Late",
"actdep": "03:05 AM",
"scharr": "02:20 AM",
"schdep": "02:25 AM",
"actarr": "03:00 AM",
"station": "Kanpur Central (CNB)",
"no": 6
}, {
"status": "43 Minutes Late",
"actdep": "04:48 AM",
"scharr": "03:45 AM",
"schdep": "04:05 AM",
"actarr": "04:28 AM",
"station": "Lucknow Ne (LJN)",
"no": 7
}, {
"status": "54 Minutes Late",
"actdep": "05:51 AM",
"scharr": "04:55 AM",
"schdep": "04:57 AM",
"actarr": "05:49 AM",
"station": "Barabanki Jn (BBK)",
"no": 8
}, {
"status": "68 Minutes Late",
"actdep": "07:33 AM",
"scharr": "06:20 AM",
"schdep": "06:25 AM",
"actarr": "07:28 AM",
"station": "Gonda Jn (GD)",
"no": 9
}, {
"status": "65 Minutes Late",
"actdep": "08:45 AM",
"scharr": "07:35 AM",
"schdep": "07:40 AM",
"actarr": "08:40 AM",
"station": "Basti (BST)",
"no": 10
}, {
"status": "65 Minutes Late",
"actdep": "09:10 AM",
"scharr": "08:03 AM",
"schdep": "08:05 AM",
"actarr": "09:10 AM",
"station": "Khalilabad (KLD)",
"no": 11
}, {
"status": "50 Minutes Late",
"actdep": "10:05 AM",
"scharr": "09:00 AM",
"schdep": "09:15 AM",
"actarr": "09:50 AM",
"station": "Gorakhpur Jn (GKP)",
"no": 12
}, {
"status": "60 Minutes Late",
"actdep": "10:55 AM",
"scharr": "09:53 AM",
"schdep": "09:55 AM",
"actarr": "10:55 AM",
"station": "Deoria Sadar (DEOS)",
"no": 13
}, {
"status": "67 Minutes Late",
"actdep": "12:12 PM",
"scharr": "11:00 AM",
"schdep": "11:05 AM",
"actarr": "12:07 PM",
"station": "Siwan Jn (SV)",
"no": 14
}, {
"status": "40 Minutes Late",
"actdep": "01:05 PM",
"scharr": "12:20 PM",
"schdep": "12:25 PM",
"actarr": "01:00 PM",
"station": "Chhapra (CPR)",
"no": 15
}, {
"status": "35 Minutes Late",
"actdep": "02:05 PM",
"scharr": "01:25 PM",
"schdep": "01:30 PM",
"actarr": "02:00 PM",
"station": "Sonpur Jn (SEE)",
"no": 16
}, {
"status": "33 Minutes Late",
"actdep": "02:18 PM",
"scharr": "01:43 PM",
"schdep": "01:45 PM",
"actarr": "02:15 PM",

jaket-cp 22-Oct-15 11:24am

okay
so alert(data) gets you that, it is probably a string

so try
dataToTable($('#routes'), jQuery.parseJSON(data), 'route');

SUJEET KR SINGH 22-Oct-15 11:33am

Thanks. Its works now.

So many many many many many many many many thanks.

jaket-cp 22-Oct-15 11:34am

okay that is good - learn to debug and happy coding :)

jaket-cp 22-Oct-15 11:36am

please also mark as solved

SUJEET KR SINGH 22-Oct-15 11:51am

how to get position data in alert();
I am using alert(data.d[0].position) is not working.

jaket-cp 22-Oct-15 11:55am

this is a different question.
But what are you trying to alert?

jaket-cp 22-Oct-15 11:57am

you have everything you need to figure it out.
okay - try this
alert(jQuery.parseJSON(data).position);

SUJEET KR SINGH 22-Oct-15 11:57am

I want to try position data in alert.

SUJEET KR SINGH 22-Oct-15 11:59am

Thanks.

SUJEET KR SINGH 22-Oct-15 12:00pm

How can I marked it as solved.
Unable to see it on above column.

jaket-cp 22-Oct-15 12:02pm

not sure, never done that before :)
maybe hover over the solution and it may show up extra links/buttons etc

How can I put JSON data in html data?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us