json file loading with jquery

Question

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 ?

bluewingholidays.com was created using joomla and it is slow now .so i want to use json fetch data to create an extension.. — sami
– sami, Commented Dec 10, 2012 at 19:26
@sami: That doesn't answer my question. Is this code running on that site, or not? — gen_Eric
– gen_Eric, Commented Dec 10, 2012 at 19:33

aziz punjani · Accepted Answer · 2012-12-10 22:18:22Z

3

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(){...

edited Dec 10, 2012 at 22:18

answered Dec 10, 2012 at 19:13

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gen_Eric Over a year ago

@sami: You can't just load arbitrary URLs with jQuery. That's against the same origin policy.

aziz punjani Over a year ago

Sami, the console reveals why

XMLHttpRequest cannot load http://bluewingholidays.com/results.json. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

Samuel Caillerie · Accepted Answer · 2012-12-10 19:43:14Z

1

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);

edited Dec 10, 2012 at 19:43

answered Dec 10, 2012 at 19:21

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

2 Comments

Samuel Caillerie Over a year ago

I agree for a valid HTML fragment but not for some partial code. You can try with : jsfiddle.net/qmkrY/1 (on firefox, the source code of the updated table does not contain the first </td>).

gen_Eric Over a year ago

I realized what was really going on and removed my comment :P

gen_Eric · Accepted Answer · 2012-12-10 19:46:59Z

1

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>");
    });
});

edited Dec 10, 2012 at 19:46

answered Dec 10, 2012 at 19:31

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

2 Comments

Samuel Caillerie Over a year ago

Yes, good summary! But be careful : 1. this is .html("<table></table>") (with a / before the 2nd "table"), 2. div-my-table seems to be already a table in the OP code, so no need to create a new table, 3. I think that this code will be DOM expensive if a lot of elements are appended...

gen_Eric Over a year ago

@SamuelCaillerie: The lack of / was just a typo. Ah, you're right about the OP's HTML. Let me fix that.

Mark Schultheiss · Accepted Answer · 2012-12-10 20:12:50Z

0

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>");
});

answered Dec 10, 2012 at 20:12

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Collectives™ on Stack Overflow

json file loading with jquery

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related