CODEWITHSUNDEEP
jqueryhtmljson
sami
sami

Reputation: 1362

json file loading with jquery

This is my jquery code 

$("document").ready(function() {
        $.getJSON("http://bluewingholidays.com/results.json", function(data) {
            $("#div-my-table").text("<table>");
            $.each(data, function(i, item) {
                $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
            });
            $("#div-my-table").append("</table>");
        });
    });

i want to display data into the web using html table 

<table id="div-my-table">
    <tr><td></td></tr>
     <tr><td></td></tr>
     <tr><td></td></tr>
</table>

but nothing happened ?

Upvotes: 0

Views: 221

Answers (4)

aziz punjani
aziz punjani

Reputation: 25786

One problem i see right off the bat is you need to change $("document") to $(document). You want to pass the document object not a selector. 

$(document).ready(function(){...

Upvotes: 3

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

I make the assumption your table already exists, so this should work:

<table id="div-my-table">    </table>

and in your script process the returned JSON:

$.each(data.Properties, function(i, item) {
    $("#div-my-table").append("<tr><td>" + item.id + ":" + item.title +  "</td><td>" + item.price + "</td></tr>");
});

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227310

There are a bunch of different issues here.

First, $("document").ready( should be $(document).ready(. Lose the quotes. You want to pass the document object, not a selector.

Second, this code won't work if this code is not running on bluewingholidays.com. That's called the same origin policy.

Third, that's not how you append elements in jQuery. (Note: .text is for changing the text of an element, if you send it HTML, it will be escaped.)

When you append HTML in jQuery, you don't first append the open tag, then the close tag. jQuery expects you to send complete HTML, not fragments.

$(document).ready(function() {
    // This will only work if this code is on bluewingholidays.com
    $.getJSON("http://bluewingholidays.com/results.json", function(data) {
        $("#div-my-table").empty(); // this is already a table, so let's empty it
        $.each(data, function(i, item) {
            // You're appending HTML elements to other HTML elements
            // You are not appending text in the way you think
            $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
        });
        // You append HTML elements, not strings, so you don't need this line
        //$("#div-my-table").append("</table>");
    });
});

Upvotes: 1

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

append does not append some arbitrary text (and in particular not </table>) in jQuery! It appends an element... You should rather use such code : 

// Content will contain the HTML code of your new table
var content = "";

$.each(data, function(i, item) {
    content += "<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>";
});   

// Set the HTML of your table to this new content
$("#div-my-table").html(content);

Upvotes: 1

Related Questions