How to populate html table with json object contents

up vote
0
down vote

favorite

I am returning a list in a ajax call the success function is written below.
My json has contents like {"1","ayesha","cs","Lahore"}.

 function ShowData(data) {

         var data = data.d;



        var html = "";

        if (data.length > 0) {

            JObject = data;

            console.log(JObject);

            html = "<table id='tbl' class='TableGrid'  width='100%' >";

            html += "<thead><tr><th>StdId</th><th>Name</th><th>feild</th><th>City</th></thead><tbody> ";

            for (var i = 0; i < JObject.length; i++) {

                html += '<tr>';

                html += ' <td align="left" >' + JObject[i] + '</td>';

                html += '</tr>';

            }

            html += "</tbody> </table>";



        }

How should i display the contents?

asked Nov 8 at 9:27

Ayesha1234

add a comment |

up vote
0
down vote

favorite

I am returning a list in a ajax call the success function is written below.
My json has contents like {"1","ayesha","cs","Lahore"}.

 function ShowData(data) {

         var data = data.d;



        var html = "";

        if (data.length > 0) {

            JObject = data;

            console.log(JObject);

            html = "<table id='tbl' class='TableGrid'  width='100%' >";

            html += "<thead><tr><th>StdId</th><th>Name</th><th>feild</th><th>City</th></thead><tbody> ";

            for (var i = 0; i < JObject.length; i++) {

                html += '<tr>';

                html += ' <td align="left" >' + JObject[i] + '</td>';

                html += '</tr>';

            }

            html += "</tbody> </table>";



        }

How should i display the contents?

asked Nov 8 at 9:27

Ayesha1234

add a comment |

up vote
0
down vote

favorite

I am returning a list in a ajax call the success function is written below.
My json has contents like {"1","ayesha","cs","Lahore"}.

 function ShowData(data) {

         var data = data.d;



        var html = "";

        if (data.length > 0) {

            JObject = data;

            console.log(JObject);

            html = "<table id='tbl' class='TableGrid'  width='100%' >";

            html += "<thead><tr><th>StdId</th><th>Name</th><th>feild</th><th>City</th></thead><tbody> ";

            for (var i = 0; i < JObject.length; i++) {

                html += '<tr>';

                html += ' <td align="left" >' + JObject[i] + '</td>';

                html += '</tr>';

            }

            html += "</tbody> </table>";



        }

How should i display the contents?

asked Nov 8 at 9:27

Ayesha1234

I am returning a list in a ajax call the success function is written below.
My json has contents like {"1","ayesha","cs","Lahore"}.

 function ShowData(data) {

         var data = data.d;



        var html = "";

        if (data.length > 0) {

            JObject = data;

            console.log(JObject);

            html = "<table id='tbl' class='TableGrid'  width='100%' >";

            html += "<thead><tr><th>StdId</th><th>Name</th><th>feild</th><th>City</th></thead><tbody> ";

            for (var i = 0; i < JObject.length; i++) {

                html += '<tr>';

                html += ' <td align="left" >' + JObject[i] + '</td>';

                html += '</tr>';

            }

            html += "</tbody> </table>";



        }

How should i display the contents?

asp.net json ajax html-table

asked Nov 8 at 9:27

Ayesha1234

asked Nov 8 at 9:27

Ayesha1234

asked Nov 8 at 9:27

Ayesha1234

asked Nov 8 at 9:27

Ayesha1234

asked Nov 8 at 9:27

Ayesha1234

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

Use bellow script can help to create table

var table = document.createElement("table");

var thead = document.createElement("thead");

var tr = document.createElement("tr");

var th = document.createElement("th");

var td = document.createElement("td");

table.appendChild(thread).appendChild(th);

table.appendChild(tr).appendChild(td)

answered Nov 8 at 9:35

He Shuang

New contributor

add a comment |

up vote
0
down vote

Use the .innerHTML to insert your table inside your template.

DOCS: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

answered Nov 8 at 9:36

Leonardo Minati

136111

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53204804%2fhow-to-populate-html-table-with-json-object-contents%23new-answer', 'question_page');
}
);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

Use bellow script can help to create table

var table = document.createElement("table");

var thead = document.createElement("thead");

var tr = document.createElement("tr");

var th = document.createElement("th");

var td = document.createElement("td");

table.appendChild(thread).appendChild(th);

table.appendChild(tr).appendChild(td)

answered Nov 8 at 9:35

He Shuang

New contributor

add a comment |

up vote
0
down vote

Use bellow script can help to create table

var table = document.createElement("table");

var thead = document.createElement("thead");

var tr = document.createElement("tr");

var th = document.createElement("th");

var td = document.createElement("td");

table.appendChild(thread).appendChild(th);

table.appendChild(tr).appendChild(td)

answered Nov 8 at 9:35

He Shuang

New contributor

add a comment |

up vote
0
down vote

Use bellow script can help to create table

var table = document.createElement("table");

var thead = document.createElement("thead");

var tr = document.createElement("tr");

var th = document.createElement("th");

var td = document.createElement("td");

table.appendChild(thread).appendChild(th);

table.appendChild(tr).appendChild(td)

answered Nov 8 at 9:35

He Shuang

New contributor

Use bellow script can help to create table

var table = document.createElement("table");

var thead = document.createElement("thead");

var tr = document.createElement("tr");

var th = document.createElement("th");

var td = document.createElement("td");

table.appendChild(thread).appendChild(th);

table.appendChild(tr).appendChild(td)

answered Nov 8 at 9:35

He Shuang

New contributor

answered Nov 8 at 9:35

He Shuang

New contributor

answered Nov 8 at 9:35

He Shuang

answered Nov 8 at 9:35

He Shuang

New contributor

He Shuang is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

up vote
0
down vote

Use the .innerHTML to insert your table inside your template.

DOCS: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

answered Nov 8 at 9:36

Leonardo Minati

136111

add a comment |

up vote
0
down vote

Use the .innerHTML to insert your table inside your template.

DOCS: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

answered Nov 8 at 9:36

Leonardo Minati

136111

add a comment |

up vote
0
down vote

Use the .innerHTML to insert your table inside your template.

DOCS: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

answered Nov 8 at 9:36

Leonardo Minati

136111

Use the .innerHTML to insert your table inside your template.

DOCS: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

answered Nov 8 at 9:36

Leonardo Minati

136111

answered Nov 8 at 9:36

Leonardo Minati

136111

answered Nov 8 at 9:36

Leonardo Minati

136111

answered Nov 8 at 9:36

Leonardo Minati

136111

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk