CODEWITHSUNDEEP
jquery
cristiano veloz
cristiano veloz

Reputation: 49

<li> tag is created only the first item

I do not know what I'm doing wrong but all the items should be within the tag <li> item </li> but only the first item is, what can be?

javascript:

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {

    var titles = data.query.results.channel.item.map(function(item) {
    return item.title;

    });

    $(".container-list-podcast ul").append('<li>' + titles.join('</li>'));

});

jsfiddle

Upvotes: 0

Views: 59

Answers (6)

kamil
kamil

Reputation: 1

this is the modified code http://jsfiddle.net/Cf5QU/2/ for the solution. 

 $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {

    var titles = data.query.results.channel.item.map(function(item) {
    return item.title;

    });

    $(".container-list-podcast ul").html('<li>' + titles.join('</li>' + '<br>' + '<li>'));

});

you have to add break line and new li

Upvotes: 0

kalley
kalley

Reputation: 18462

This line needs to be:

 $(".container-list-podcast ul").append('<li>' + titles.join('<li>'));

Edited to match T.J Crowder's suggestion below.

Upvotes: 4

Deepak Biswal
Deepak Biswal

Reputation: 4320

Here is the working DEMO

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {

    var titles = data.query.results.channel.item.map(function(item) {
    return item.title;

    });

    $(".container-list-podcast ul").append('<li>' + titles.join('</li><li>'));

});

Upvotes: 0

BentOnCoding
BentOnCoding

Reputation: 28208

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {

    var titles = data.query.results.channel.item.map(function(item) {
    return item.title;

    });

    $.each(titles, function(key, value){
        $(".container-list-podcast ul").append('<li>' + value + '</li>');
    });                

});

Upvotes: 0

twinlakes
twinlakes

Reputation: 10248

Updated code http://jsfiddle.net/m627u/:

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {

    var titles = data.query.results.channel.item.map(function(item) {
    return '<li>'+item.title+'</li>';

    });
    $(".container-list-podcast ul").append(titles);
});

You were putting the collective string into the <li>, not each title.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074989

You have no subsequent opening <li> tags. You probably meant:

$(".container-list-podcast ul").append('<li>' + titles.join('</li><li>') + '</li>');
// This opens the first item (only) ----^                    ^    ^         ^
// This closes each item except the last --------------------+    |         |
// This opens the second one onward ------------------------------+         |
// This closes the last one ------------------------------------------------+

Or if you want to rely on the fact that closing </li> tags are optional, it could be:

$(".container-list-podcast ul").append('<li>' + titles.join('<li>'));

Upvotes: 3

Related Questions