Uit elkaar halen van RSS reader

[RichardvHees]

Hoi allen

Ik ben al even bezig met een RSS reader.
Mijn opleiding wil dat ik gebruik maak van een localstorage. Dat is op zich geen probleem, maar het probleem is dat ik niet helemaal snap hoe onderstaande code werkt:

var listEntries = function(json) {
  if (!json.responseData.feed.entries) return false;

  $('#widgetTitle').text(json.responseData.feed.title);
  var articleLength =json.responseData.feed.entries.length;
  articleLength = (articleLength > maxLength) ? maxLength : articleLength;
  for (var i = 1; i <= articleLength ; i++) {
    var entry = json.responseData.feed.entries[i-1];
    $('#link' + i).text(entry.title);
    $('#articleHeader' + i).text(entry.title);
    $('#openButton' + i).attr('href', entry.link);
    $('#articleContent' + i).append(entry.content);
    $('#date' + i).append(entry.publishedDate);
  }

Het gaat mij erom dat ik de entry.title, entry.link, enz, enz, in een variabele kan zetten.
Dus zoiets dat lijkt op:

var title = text(entry.title);

Maar natuurlijk moeten wel alle artikelen van elkaar gescheiden blijven. In dit geval zal hij dus steeds opnieuw title overschrijven, tot de laatste klaar is.

Hoe doe ik dit??

groetjes
Richard

 

[RichardvHees]

Weet niemand hier iets van?

Voor mensen die regelmatig met JavaScript bezig zijn, lijkt mij het een vrij simpele vraag. Probleem is gewoon dat ik niet helemaal zie wat er nou gebeurt in een regel zoals deze:

$('#articleHeader' + i).text(entry.title);

 

[That Guy]

Hoi,

De JS die je hebt gepost staat helemaal onder de jQuery. Nu heb ik zelf een beetje een haat/liefde relatie met jQuery, maargoed.

Allereerst: de ene regel die je poste:

[js]$('#articleHeader' + i).text(entry.title);[/js]

doet het volgende:

1. maak 1 string van '#articleHeader' en de variabele i. Dit wordt dus (omdat je in een loop zit) iets van '#articleHeader0', '#articleHeader1', '#articleHeader2', et cetera
2. gebruik jQuery's $-functie om het element op te halen uit de HTML. In dit geval is dit dus hetzelfde als document.getElementById('articleHeader' + i);.
3. jQuery's .text() functie zet de text in het element (articleHeader%) naar een bepaalde waarde;
4. entry.title is de title-property van het 'entry' object

kortweg: voor elk item, zoek in de HTML de header op en gooi de titel van het item erin.


Nu, om je hoofdvraag te beantwoorden, de volgende dingen vragen:

• met welke data begin je en waar haal je het vandaan
• wat moet er precies gebreuren met deze data?
• wat voor uitvoer moet het hebben.

met de functie die je gaf kan ik niet zo veel. Het vult wat elementen op in je HTML, maar deze worden niet aangemaakt dus ze moeten al bestaan. Apart. En welk JSON object wordt er in gegooid? Waar komt deze vandaan? Wat wil je nu uiteindelijk met je script!?

 

[RichardvHees]

Edit: Ik heb de app inmiddels zó aangepast, dat onderstaande eigenschap later toegevoegd zal worden. Het is nu dus functioneel (en met opmaak), alleen nog niet zoals ik het graag zou zien.


Hey, bedankt voor je antwoord!
Ik was er uiteindelijk zelf uitgekomen. Ik had wel veel aan je uitleg over die regel!

Ik heb wel een ander probleem nu, dat is namelijk dat ik mijn opmaak kwijtraak, om de een of andere reden.

Hieronder is de code te vinden en daarbij hoort deze uitleg:
de functie viewNews() wordt aangeroepen in een andere functie, refresh(), die op zijn beurt wordt aangeroepen door het drukken op een knop (knop is ook in code te zien)
Het onderste gedeelte wordt daardoor dus eigenlijk als eerste gedaan. Voordat de functie viewNews() wordt aangeroepen, ziet het er allemaal goed uit, maar zodra die wordt uitgevoerd, raak ik dus alle opmaak kwijt. Ik denk dat het te maken heeft met replaceWith(), maar dat weet ik niet zeker. Het lijkt erop dat de css niet meer aangeroepen wordt als dat is gebeurd.

Mocht het handig zijn, het staat ook online,cdan kan je duidelijk zien wat er is:
http://eduweb.hhs.nl/~07062079/app/
Rechtsboven zit de refresh-knop.

function viewNews(){
	$('#newsPage').replaceWith('<div data-role="content" id="newsPage"><ul data-role="listview" data-filter="true" id="articleList"><li></li></ul></div>');
	
	for(var i = 2; i<=maxLength; i++) {
		$('#articleList li:last').after('<li id="list' + i + '"><a style="font-size: x-small" href="#article' + i + '">'+ storedTitles[i] +'</a></li>');
	}
}



//======= NEWS OVERVIEW PAGE ========
document.write(
  '	<div data-role="page" id="news">' +
  '		<div data-role="header" data-position="fixed">' +
  "			<h1>What's on Xiamen</h1>" +
  '			<a data-role="button" data-icon="refresh" class="ui-btn-right" data-iconpos="notext" onClick="refresh()">Refresh</a>' +
  '		</div>' +
  '		<div data-role="content" id="newsPage">' +
  '			<ul data-role="listview" data-filter="true" id="articleList">'
);
for(var i=1; i<=maxLength; i++){
 document.write(
  '				<li id="list' + i + '"><a style="font-size: x-small" href="#article' + i + '">'+ storedTitles[i] +'</a></li>'
  );
}
document.write(
  '    		</ul>' +
  '  	</div>' +
  '		<div data-role="footer" data-id="foo1" data-position="fixed">' +
  '		<div data-role="navbar">' +
  '		 <ul>' +
  '			<li><a href="#news" data-back="true" class="ui-btn-active ui-state-persist">News</a></li>' +
  '			<li><a href="#profile" >Profile</a></li>' +
  '			<li><a href="#friends" >Friends</a></li>' +
  '			<li><a href="#settings" >Settings</a></li>' +
  '		 </ul>' +
  '		</div>' +
  '		</div>' + 
  '	</div>'
);