CODEWITHSUNDEEP
javascriptjqueryjson
P4tR
P4tR

Reputation: 114

JSON data won't be displayed via jQuerys getJSON()

The following code should display the id out of the JSON-object, which I got from a server. I cant find the mistake, could somebody help me? Thank you in advance!

The JSON-object which is returned when http://localhost:8387/nscalemc/rest/mon/resourcestatus.json is called:

{
    "groupStatus": [
        {
            "id": "Application Layer Configuration-ApplicationLayer",
            "time": 1332755316976,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        },
        {
            "id": "Application Layer-ApplicationLayer:nscalealinst2",
            "time": 1333431531046,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        },
        {
            "id": "Application Layer-ApplicationLayer:nscalealinst1",
            "time": 1333431531046,
            "level": 1,
            "warningIds": [
                "documentarea.locked"
            ],
            "errorIds": []
        },
        {
            "id": "Storage Layer-StorageLayerInstance1",
            "time": 1331208543687,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        }
    ]
}

My HTML file gadget.html:

<html>
<head>
    <title>Monitor</title>
    <link href="css/gadget.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/gadget.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

My JavaScript file "gadget.js":

fetch_JSON();

function fetch_JSON() {
    var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";

    $.getJSON(url+'?callback=?', function(data) {
        $(data.groupStatus).each(function() {
            $('#content').append('<p>ID: ' + $(this).id+ '</p>');
        });
    });
}

EDIT: Thank you for your solutions! I debugged via Firebug and found out, that the getJSON-call ends with status "401 unauthorized"..

Upvotes: 2

Views: 1092

Answers (3)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

You should do

    $('#content').append('<p>ID: ' + this.id+ '</p>');

fiddle here http://jsfiddle.net/JaxpC/

EDIT - of course you should use the ready handler to make sure thatthe dom is present (i don't think that's your case because there i an ajax call involved, but better be sure

$(function() {
   var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";

    $.getJSON(url+'?callback=?', function(data) {
        $(data.groupStatus).each(function() {
            $('#content').append('<p>ID: ' + this.id+ '</p>');
        });
    });
});

Upvotes: 5

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

$(document).ready(function(){

fetch_JSON();

function fetch_JSON() {
    var url = "http://localhost:8387/nscalemc/rest/mon/resourcestatus.json";

    $.getJSON(url+'?callback=?', function(data) {
        $(data.groupStatus).each(function() {
            $('#content').append('<p>ID: ' + this.id+ '</p>');
        });
    });
}
});

Upvotes: 1

Quentin
Quentin

Reputation: 943193

You are running the script immediately and have placed it before the div. #content doesn't exist when you try to append data to it.

Move the script to just before </body>.

Upvotes: 3

Related Questions