Json into HTML Uncaught Error

Question

I'm trying to use a Json database to read a large amount of data into a html document using jQuery. The code I'm using now is as follows:

$(document).ready(function($) {
    $.getJSON("http://mtgjson.com/json/BNG.json",
        function(data){
            console.log(data);
                $.each(data.cards, function(i,card){
                    content += '<p>' + card.name + '</p>';
                    content += '<p>' + card.rarity + '</p>';
                    content += '<p>' + card.manaCost + '</p>';
                    content += '<p>' + card.type + '</p>';
                    content += '<br/>';
                $(content).appendTo("#content");
                });
            });
});

The code seems to work because it returns the data I requested (name, rarity, manacost and type) it doesn't show it in the div named #content. It shows the data only in an error message in the DOM.

Uncaught Error: Syntax error, unrecognized expression: [object HTMLDivElement]<p>Acolyte's Reward</p><p>Uncommon</p><p>{1}{W}</p><p>Instant</p><br/>

I think it has something to do with appending the $(content) to ("#content"), but I'm really new to Json so I can't for the life of me figure it out.

And yes, I have a div named #content in my html before someone asks. Thanks in advance.

Edit: Console log data as requested:

Object {name: "Born of the Gods", code: "BNG", releaseDate: "2014-02-07", border: "black", type: "expansion"…}
block: "Theros"
booster: Array[16]
border: "black"
cards: Array[165]
code: "BNG"
name: "Born of the Gods"
releaseDate: "2014-02-07"
type: "expansion"
__proto__: Object

Added. The array in wich the needed data is stored is 'cards'. — Jefferson
– Jefferson, Commented Mar 5, 2014 at 8:19
is the error message shown in web page or in console? if in console, which line of your code is indicated to have error? — rhgb
– rhgb, Commented Mar 5, 2014 at 8:21

Arun P Johny · Accepted Answer · 2014-03-05 08:19:19Z

3

You need to create a local variable, looks like content is referring to some element

$(document).ready(function ($) {
    $.getJSON("http://mtgjson.com/json/BNG.json",    function (data) {
        console.log(data);
        $.each(data.cards, function (i, card) {
            var content = '<p>' + card.name + '</p>';
            content += '<p>' + card.rarity + '</p>';
            content += '<p>' + card.manaCost + '</p>';
            content += '<p>' + card.type + '</p>';
            content += '<br/>';
            $(content).appendTo("#content");
        });
    });
});

Demo: Fiddle

In your case you have an object with id content, so the global variable content refers to that dom element. This causes the string concatenation to result in wrong value

answered Mar 5, 2014 at 8:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Arun P Johny Over a year ago

@RGraham yes it is... look at the element to which it is appended

Collectives™ on Stack Overflow

Json into HTML Uncaught Error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related