CODEWITHSUNDEEP
jqueryjsonjsonp
sami
sami

Reputation: 1362

Fetch jsonp data

HTML markup:

<ul>
    <li class="entries"></li>
</ul>

jQuery code:

$(function () {
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql",
        dataType: "jsonp",
        success: function (data) {
            console.log(data.query.results.json);
            $.each(data.query.results.json.entries, function (i, v) {
                $('#entries').append(data.query.results.json.entries[i].content + '<br />');
            });
        }, data: {
            q: 'select * from json where url="https://www.facebook.com/feeds/page.php?id=397319800348866&format=json"',
            format: "json"
        }
    });
});

FIDDLE

I want to see the output as a menu.when click on the title it will show the content and image also. How will I do this with jQuery and html?

Upvotes: 0

Views: 452

Answers (1)

Guffa
Guffa

Reputation: 700730

Create a title and content element for each entry, and toggle the visibility of the content element when you click on the title:

Javascript:

$(function () {
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql",
        dataType: "jsonp",
        success: function (data) {
            console.log(data.query.results.json);
            $.each(data.query.results.json.entries, function (i, v) {
                $('#entries').append(
                    $('<div>').addClass('header')
                    .html(data.query.results.json.entries[i].title)
                    .append(
                        $('<div>').addClass('content')
                        .html(data.query.results.json.entries[i].content)
                    )
                );
            });
        }, data: {
            q: 'select * from json where url="https://www.facebook.com/feeds/page.php?id=397319800348866&format=json"',
            format: "json"
        }
    });

    $('#entries').on('click', '.header', function(){
        $('.content', this).toggle();
    });
});

CSS:

.header { margin: 5px; background: #eee; padding: 5px; }
.content { display: none; }

Demo: http://jsfiddle.net/DtNxb/5/

Upvotes: 2

Related Questions