Hiii have a json data If i click get button it should be populate in html tablehow to populate html table if click button with json data using jquery ajax ltscript type34textjavascript34gt documentready function alert34134 var data 34employee34val alert34234 ajax url 39httplocalhost8080onlinefect

Hi ManjuNagaCheck this example Now please take its reference and correct your codeHTMLltdivgt ltspan class34inputgroupbtn34gt ltbutton class34btn btndefault34 type34button34 id34employee34gt Get Recordltbuttongt ltspangt lttable id34content34gt lttheadgt lttrgt ltthgt Id ltthgt ltthgt question ltthgt ltthgt course ltthgt ltthgt AnswerId ltthgt ltthgt Ans ltthgt ltthgt status ltthgt lttrgt lttheadgt lttbody id34emp34gt lttbodygt lttablegtltdivgtltscript ty

Populate HTML table with JSON data using jQuery AJAX

ManjuNag...

SOLVED CLOSED ACTIVE ANSWERED
User: ManjuNaga
Posted: on Apr 27, 2018 01:15 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 36334
Sample Code: Download

Hii

i have a json data If i click get button it should be populate in html table

how to populate html table if click button with json data using jquery ajax

        <script type="text/javascript">
            $(document).ready(
                function() {
                    alert("1");
                    var data = $("#employee").val();
                    alert("2");
                    $.ajax({

                        url : 'http://localhost:8080/online/fecthcourse',
                        type : 'GET',
                        dataType : 'JSON',
                        success : function(data) {
                            alert("3");
                            $(data).each(
                                    function() {
                                        $('#tbody').append(
                                                '<tr><td>' + this.id
                                                        + '</td><td>'
                                                        + this.question
                                                        + '</td><td>'
                                                        + this.course
                                                        + '</td><td>'
                                                        + this.answerEntities
                                                        + '</td><td>'
                                                        + this.ans
                                                        + '</td><td>'
                                                        + this.status
                                                        + '</td></tr>')
                                    });
                        },
                        error : function(data) {
                            alert("4");
                        }

                    });
                });
            </script>

HTML CODE

                                                    <span class="input-group-btn">
                                                        <button class="btn btn-default" type="button" id="employee">Get Record</button>
                                                    </span>
                                                     <table id="content" border="2">
                                                        <thead>
                                                            <tr>
                                                                <th>Id</th>
                                                                <th>question</th>
                                                                <th>course</th>
                                                                <th>answerEntities</th>
                                                                <th>AnswerId</th>
                                                                <th>Ans</th>
                                                                <th>status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="emp">
                                                        </tbody>
                                                    </table>

This is my json Data

[
    {
        "id": 1,
        "question": "What is JDBC.?",
        "course": "J2EE",
        "answerEntities": [
            {
                "id": 1,
                "ans": "B",
                "status": false
            },
            {
                "id": 2,
                "ans": "D",
                "status": false
            },
            {
                "id": 3,
                "ans": "C",
                "status": false
            },
            {
                "id": 4,
                "ans": "J",
                "status": true
            }
        ]
    },
    {
        "id": 2,
        "question": "What is java..?",
        "course": "Java",
        "answerEntities": [
            {
                "id": 5,
                "ans": "Easy to understand",
                "status": false
            },
            {
                "id": 6,
                "ans": "Platform independent",
                "status": false
            },
            {
                "id": 7,
                "ans": "Rebust",
                "status": true
            },
            {
                "id": 8,
                "ans": "Secure",
                "status": false
            }
        ]
    }
]

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Apr 30, 2018 02:14 AM
Report

Hi ManjuNaga,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="employee">
            Get Record</button>
    </span>
    <table id="content">
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    question
                </th>
                <th>
                    course
                </th>
                <th>
                    AnswerId
                </th>
                <th>
                    Ans
                </th>
                <th>
                    status
                </th>
            </tr>
        </thead>
        <tbody id="emp">
        </tbody>
    </table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#employee").on("click", function () {
            $.ajax({
                url: 'CS.aspx/fecthcourse',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var json = JSON.parse(data.d);
                    $(json).each(function (index, item) {
                        var questionId = json[index].id;
                        var question = json[index].question;
                        var course = json[index].course;
                        for (var option = 0; option < json[index].answerEntities.length; option++) {
                            var ans = json[index].answerEntities[option].ans;
                            var ansId = json[index].answerEntities[option].id;
                            var ansStatus = json[index].answerEntities[option].status;
                            $('tbody#emp').append(
                            '<tr><td>'
                            + questionId
                            + '</td><td>'
                            + question
                            + '</td><td>'
                            + course
                            + '</td><td>'
                            + ansId
                            + '</td><td>'
                            + ans
                            + '</td><td>'
                            + ansStatus
                            + '</td></tr>')
                        }
                    });
                },
                error: function (data) { alert(data.responseText); }
            });
        });
    });
</script>

Code

[System.Web.Services.WebMethod]
public static string fecthcourse()
{
    return System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/JsonData.json"));
}

VB.Net

<System.Web.Services.WebMethod>
Public Shared Function fecthcourse() As String
    Return System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath("~/JsonData.json"))
End Function

JsonData.json

[
    {
        "id": 1,
        "question": "What is JDBC.?",
        "course": "J2EE",
        "answerEntities": [
            {
                "id": 1,
                "ans": "B",
                "status": false
            },
            {
                "id": 2,
                "ans": "D",
                "status": false
            },
            {
                "id": 3,
                "ans": "C",
                "status": false
            },
            {
                "id": 4,
                "ans": "J",
                "status": true
            }
        ]
    },
    {
        "id": 2,
        "question": "What is java..?",
        "course": "Java",
        "answerEntities": [
            {
                "id": 5,
                "ans": "Easy to understand",
                "status": false
            },
            {
                "id": 6,
                "ans": "Platform independent",
                "status": false
            },
            {
                "id": 7,
                "ans": "Rebust",
                "status": true
            },
            {
                "id": 8,
                "ans": "Secure",
                "status": false
            }
        ]
    }
]

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate HTML table with JSON data using jQuery AJAX

Company

Explore

Follow us

Contact Us