Remplir une liste en js

Version imprimable

Bonjour,

Je souhaiterais ajouter chaque titre que je vais chercher en js, dans un <li>.

Voici ce que j'ai fais me je ne trouve pas le bon code pour quqe chaque titre soit dans un <li>.
En gros je veux:

Code:

<ul id="ticker01"><li>tit1re</li><li>titre2</li><li>etc</li></ul>

Pour l'instant voila ce que j'ai fais:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
	<head>
		<title>Test feed rss</title>
		<link rel="stylesheet" type="text/css" href="li-scroller.css" />
 
	</head>
	<body>
	<div class="tickercontainer0">
		<div class="logo"><img src="ca_toulouse.png"/></div>
	<div class="tickercontainer">
<div class="mask">
 
		<ul id="ticker01"><li><a href="#"><div id="banner"></div></a></li></ul>
		</div>
		</div>
		</div>
	</body>
	<!-- jquery -->
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
	<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
	<script>
	$(function(){
    $("ul#ticker01").liScroll();
});	
	'use strict';
	$.Feed = {};
 
    // c'est des params pour avoir un feeder ça fais peur mais ça marche a priori
	$.options = {
		ssl: false,
		host: 'www.feedrapp.info', // don't touch
		limit: null,
		key: null,
		tokens: {},
		outputMode: 'json',
		dateFormat: 'dddd MMM Do',
		effect: 'show',
		offsetStart: false,
		offsetEnd: false,
		error: function () {
			console.log('jQuery RSS: url doesn\'t link to RSS-Feed');
		},
		onData: function () {},
		success: function () {}
    };
 
	// initialise
	var initialise = function(){
		crossDomain('http://www.neoscreen.fr/meteo/rss/france.xml', function(result){
			if(result.responseStatus == 200){
				$.Feed = result.responseData.feed;
				bind();
			}else{
				console.error(result.responseDetail);
			}
		});
	};
 
	 /**
	  * bind
	  */
	  var bind = function(){
		 var banner = $('#banner');
		 _.forEach($.Feed.entries, function(article){
			 banner.append(article.title+"&nbsp;&nbsp;");
		 }); 
	  };
	/**
    * crossDomain
	*/
	var crossDomain = function (url ,callback) {
		var apiProtocol = 'http' + ($.options.ssl ? 's' : '');
		var apiHost     = apiProtocol + '://' + $.options.host;
		var apiUrl      = apiHost + '?callback=?&q=' + encodeURIComponent(url);
		// set limit to offsetEnd if offset has been set
		$.options.limit = 20;
 
		if ($.options.offsetStart && $.options.offsetEnd) {
		  $.options.limit = $.options.offsetEnd;
		}
		if ($.options.limit !== null) {
		  apiUrl += '&num=' + $.options.limit;
		}
		if ($.options.key !== null) {
		  apiUrl += '&key=' + $.options.key;
		}
		$.getJSON(apiUrl, callback);
  };
 
	$(document).ready(initialise);
 
	</script>
</html>

02/12/2015, 15h00
SpaceFrog

https://jsfiddle.net/23ogLov8/
02/12/2015, 15h02
chris52
C'est une bonne piste SpaceFrog, mais ma liste comme tu peux le voir, c'est 20 titre que je récupère avec
Code:

1 2 3 4 5 6 var bind = function(){ var banner = $('#banner'); _.forEach($.Feed.entries, function(article){ banner.append(article.title+"  "); }); };
Donc du coup mes20 titres sont contenu (sans etre séparé) dans <div id="banner">
02/12/2015, 15h12
SpaceFrog

Ils viennent d'où ces titres ?
Tu les récupères comment ?

c'est quoi ça : :koi:

Code:

<ul id="ticker01"><li><a href="#"><div id="banner"></div></a></li></ul>

Les titres viennent d'un xml: http://www.neoscreen.fr/meteo/rss/france.xml'

Je les récupère comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
'use strict';
	$.Feed = {};
 
    // c'est des params pour avoir un feeder ça fais peur mais ça marche a priori
	$.options = {
		ssl: false,
		host: 'www.feedrapp.info', // don't touch
		limit: null,
		key: null,
		tokens: {},
		outputMode: 'json',
		dateFormat: 'dddd MMM Do',
		effect: 'show',
		offsetStart: false,
		offsetEnd: false,
		error: function () {
			console.log('jQuery RSS: url doesn\'t link to RSS-Feed');
		},
		onData: function () {},
		success: function () {}
    };
 
	// initialise
	var initialise = function(){
		crossDomain('http://www.neoscreen.fr/meteo/rss/france.xml', function(result){
			if(result.responseStatus == 200){
				$.Feed = result.responseData.feed;
				bind();
			}else{
				console.error(result.responseDetail);
			}
		});
	};
 
	 /**
	  * bind
	  */
	  var bind = function(){
		 var banner = $('#banner');
		 _.forEach($.Feed.entries, function(article){
			 banner.append(article.title+"&nbsp;&nbsp;");
		 }); 
	  };
	$(document).ready(initialise);

et ceci

Code:

<ul id="ticker01"><li><a href="#"><div id="banner"></div></a></li></ul>

est un essai mdr

J'ai fais ceci en parallèle:
Code:

1 2 3 4 5 6 var bind = function(){ var banner = $('#ticker01'); _.forEach($.Feed.entries, function(article){ banner.append('<li>'+article.title+'</li>'); }); };
Mais le soucis c'est que mes 20 titres sont dans un seul li et pas 1 titre par li 20 fois comme je le souhaite

02/12/2015, 15h43
SpaceFrog

Code:

_.forEach($.Feed.entries,

:koi:
kézako ?

Code:

1
2
3
4
5
6
7
8
  var bind = function(){
		 var banner = $('#ticker01');
		 _.forEach($.Feed.entries, function(article){
        var $link=$('<a/>').attr('href',"#").html(article.title);
        var $line= $('<li/>').append($link) 
			 banner.append($line);
		 }); 
	  };

http://fiddle.jshell.net/b4npckty/

sachant que chaque article est constitué ainsi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
author
 
	"FRANCE 24"
categories
 
	[Object { name="FRANCE"}]
content
 
	"Deux personnes interpell...placées en garde à vue."
contentSnippet
 
	"Deux personnes interpell...copé l'une de trois moi"
link
 
	"http://www.france24.com/...ions-interdite-casseurs"
publishedDate
 
	"2015-12-02T06:52:58.000Z"
title
 
	"France : premières conda... place de la République"

02/12/2015, 16h10
SpaceFrog

Ce qui peut mener à faire un truc dans ce genre là
http://fiddle.jshell.net/b4npckty/1/