Consuming JSON array in JQuery

Question

I have a restful web service at http:// localhost:8080/CRUDWebAppMavenized/persons that outputs a json array. I am using AJAX in jquery and i want to display the json array in my HTML table. I cannot get this to display in html table though. I will post html, javascript code, and json array code.

index3.html The HTML file. For displaying student information in the browser.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="engine.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <table id="blogTable">
            <tr>
                <th>studentId</th>
                <th>firstname</th>
                <th>lastname</th>
                <th>yearLevel</th>
            </tr>
        </table>
    </body>
</html>

engine.js (with Jquery) AJAX call and then place code in table tag of html file.

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost:8080/CRUDWebAppMavenized/persons',
        type: 'GET',
        dataType: 'json',
        success: function (result) {
            var insert = '';
            $.each(result, function (index, item) {
                insert += '<tr><td>' + item.studentId + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.yearLevel + '</td></tr>';
            });
            $('#blogTable tr:last').after(insert);
        }
    });
});

JSON array A JSON array from the web service URL. This was generated by a web application.

[
    {
        "studentId": 5,
        "firstname": "bro",
        "lastname": "oy",
        "yearLevel": 0
    },   
    {
        "studentId": 6,
        "firstname": "lol",
        "lastname": "keke",
        "yearLevel": 0 
    },
    {
        "studentId": 8,
        "firstname": "omg",
        "lastname": "yo",
        "yearLevel":0
    }
]

What do you mean by *I cannot get this to display in html table*? — Liam, Apr 03 '14 at 08:44
possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Apr 03 '14 at 08:45
Have you checked your browser's console/developer tools for any errors? Also worth putting an `error` function in the AJAX call to report any issues with that, read the documentation for the arguments it can take. — Anthony Grist, Apr 03 '14 at 08:45
ok i switched jquery and the dependentin javascript. still not working. to help clear things up. i have a loop that goes through the json array and is suppose to place json elements in the html table "blogTable". i did test the web service URL and it works. i received a 200 code with GET. — user3492837, Apr 03 '14 at 08:57

score 5 · Answer 1 · answered Apr 03 '14 at 08:45

5

First jquery then your jquery dependent js like

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="engine.js"></script>

answered Apr 03 '14 at 08:45

Rohan Kumar

40,431
11
76
106

Consuming JSON array in JQuery

1 Answers1