Create menu from UL List with JQuery and JSON external file

Question

I have a problem with creating menu using UL LI List and JQuery with JSON. Here is my JFiddle:

    $.getJSON('http://www.speedyshare.com/zr6HF/download/doc22.json', function (data) {

    //$("body div#content").html(makeUL(data.menu[0]));
    $("body .menu ").html(makeUL(data.menu));

});
//$("body div#content").html("</li></ul>");

function makeUL(lst) {
    var html = [];
    //html.push("<div class=sub"+count+">");
    html.push("<ul>");
    count++;
    $(lst).each(function () {
        html.push(makeLI(this));
    });
    html.push("</ul>");
    //html.push("</div>");
    return html.join("\n");

}

function makeLI(elem) {
    var html = [];

    html.push("<li >");

    //html.push(elem.name);
    if (elem.link)
    //html.push("<div class=item"+count2+">");
    html.push("<a>" + elem.link + "</a>");
    //html.push("</div>");
    count2++;

    if (elem.sub) html.push(makeUL(elem.sub));
    html.push("</li>");
        //
        return html.join("\n");

}

In $.getJSON currently is direct link to JSON file, but he isn't working in JSFiddle(I don't know why), with external file on hard disk , works good.

Ok, I would like to do similar menu such as in this JSFiddle:

http://jsfiddle.net/65R8q/31/ ,but with data from my JSON file. I tried around div's in many ways, but still not working. :-/

someone know where I do make mistake?

Same origin policy !

adeneo
– adeneo

2013-05-26 23:14:59 +00:00
Commented May 26, 2013 at 23:14 — adeneo
– adeneo, Commented May 26, 2013 at 23:14

jammykam · Accepted Answer · 2013-05-26 23:37:08Z

1

As adeneo commented, it's due to Same Origin Policy. You need to use JSONP when making the Ajax code. Add callback=? parameter to the calling URL:

$.getJSON('http://www.speedyshare.com/zr6HF/download/doc22.json?callback=?', function (data) {

    //$("body div#content").html(makeUL(data.menu[0]));
    $("body .menu ").html(makeUL(data.menu));

});

http://jsfiddle.net/TqcEs/1/

But the page you are requesting is HTML, not JSON data so a syntax/JavaScript error thrown.

answered May 26, 2013 at 23:37

jammykam

17k2 gold badges39 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

Create menu from UL List with JQuery and JSON external file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related