JavaScript Daten mit jquery aus einer XML-Datei abrufen und in einem Array speichern

[sverebom]

Hallo,

ich bastele gerade eine Portfolio-Webseite für eine Freundin. Die Gallerie soll dabei aus aus einer XML-Datei konstruiert werden, in der Informationen wie Titel und Beschreibung hinterlegt sind. Die XML-Datei sind so aus:

<gallery>
	<websites>
		<item>
			<code>chains</code>
			<title>Chains of Honor for 'Joomla'</title>
			<desc>Some sample text to explain what's going on</desc>
			<items>2</items>
		</item>
		<item>
			<code>agar</code>
			<title>Agar Teryn - Book of Tales</title>
			<desc>Some sample text to explain what's going on</desc>
			<items>2</items>
		</item>
		<item>
			<code>minifolio</code>
			<title>Minifolio for 'The Secretary'</title>
			<desc>Some sample text to explain what's going on</desc>
			<items>2</items>
		</item>
		<item>
			<code>mirogreen</code>
			<title>Mirogreen for 'Wordpress'</title>
			<desc>Some sample text to explain what's going on</desc>
			<items>2</items>
		</item>
		<item>
			<code>ardhon</code>
			<title>Lain Ardhon for 'phpBB3'</title>
			<desc>Some sample text to explain what's going on</desc>
			<items>3</items>
		</item>
	</websites>
</gallery>

Ich erspare es euch, meine Bemühungen in jquery zu zeigen. Ich habe in den letzten Stunden alle Blogs und Tutorials durchgeackert, in denen geschwärmt wird, wie toll und einfach all das mit jquery ist, aber ich kriege nicht einmal einen "alert" aus dem Mist heraus gequetscht, weil ich wohl nicht einmal bis zum "success" komme. Ich habe mittlerweile den Überblick verloren und schildere euch daher lieber mal meinen Plan mit der Bitte mir zu helfen, den Code von Grund auf zu entwickeln:

1 - Bei Auswahl eines Objekts in der Galerie werden die Kategorie des Objekts aus dem übergeordneten Container sowie der Index des Objekts innerhalb der Kategorie ermittelt und global gespeichert. Funktioniert auch tadellos.
2 - Mit diesen Informationen möchte ich nun auf die XML-Datei zugreifen und bspw. alle Datensätze des dritten Objekts in der Kategorie "Webseiten" abrufen und in einem globalen Array speichern.
3 - Aus dem Datensatz möchte ich schließlich die Detailseite generieren. Dafür ist der Datensatz "code" gedacht, aus dem ich alle Links auf das verfügbare Bildmaterial generieren möchte.

Nach allem, was ich bisher verstanden habe, sollte es mit ".find(Kategorie)" und ".eq(Index)" ein Leichtes sein, das gewünschte Objekt zu finden. Anschließend würde ich mit einer Schleife durch die Datensätze rotieren und alles Resultate in ein Array (currentContent) pushen bzw. mit .find(Referenz) jeden Datensatz in eine Variable laden.

Wahrscheinlich werde ich Letzteres machen. Der Ansatz, die Datensätze in einem Array zu speichern, sieht zwar eleganter aus, da ich aber die einzelnen Datensätze an zahlreichen Stellen (unabhängig voneinander) benötige, arbeite ich doch lieber mit eindeutigen Variablen, anstatt auf Positionen in einem Array zu verweisen.

Vielen Dank im Voraus. Ich spielen jetzt erst einmal ein Killerspiel.

 

[SymA]

Du machst ein simples .load bzw einen get request von jquery auf die XML Datei: http://stackoverflow.com/questions/16417211/load-xml-file-content-into-div-using-jquery
Abgesehen davon, dass man XML eher für Konfiguration und in Java benutzt arbeitet man wenn immer möglich mit JSON-Datenstrukturen und spart sich somit unnötigen Overhead. Auch ist das parsen von XML Dateien im Browser nicht gerade performant - sollte hier jedoch nicht gewaltig ins Auge springen....
Wenn du die Möglichkeit hast es als JSON zu behandeln, dann mach das und du ersparst dir unnötige Kopfschmerzen und kannst dein Vorhaben recht schnell umsetzen...

 

[sverebom]

Okay, ich schaue es mir mal an bzw. hebe mir das für die Zukunft auf. An dem kleinen Projekt möchte ich mich an solche Inhalte heran tasten und das Fernziel ist natürlich, alles nach gängigen Anforderungen an Performance und Usability umzusetzen.

Ich habe mir deinen Link angeschaut, und alles, was da steht, habe ich bereits in allerlei Variationen ausprobiert, stets ohne Erfolg. Hier mein aktueller jquery-code:

$(window).load(function() {

	// Global variables
	var global = {};
		global.currentItem;

		global.currentCode;
		global.currentTitle;
		global.currentDesc;
		global.currentAmount;

		global.currentCategory;

	// Retrieve data of the selected object
	function getContent(currentCategory, currentItem) {
		$.ajax({
			type: "GET",
			url: "../repository.xml",
			dataType: "xml",
			success: function (xml) {
		
				console.log('success');
			}
		});
	};

	// Scroll to selected category
	$('#nav_main a[href^=#]').click( function(e){
		targetPosition = $(this).attr('href');

		$('html, body').animate({ scrollTop:$(targetPosition).offset().top},'800');
			e.preventDefault();
	});	
	
	// Get current category and index of the current item
	$('#websites a, #flash a, #newsletter a').click ( function() {
		global.currentCategory = $(this).parents('div:first').attr('id');
		global.currentItem = $('#websites a, #flash a, #newsletter a').index(this);	
		
		getContent(global.currentCategory, global.currentItem);
	});

});

Ich habe jetzt nicht einmal versucht, irgendwelche Datensätze aus der XML-Datei zu laden. Ich wäre schon glücklich, wenn nach Aufruf der XML-Datei eine Erfolgsmeldung zurück käme. Ich glaube, von dem Punkt aus würde ich dann auch alleine zurecht kommen.

Ich habe natürlich alles möglich versucht. Den Verweis zur XML-Datei überprüft, die XML-Datei in den gleichen Ordner gelegt, den ganzen Quatsch bei $(document).ready aufgerufen. Stets ohne Erfolg (der Aufruf der Funktion selber funktioniert).

Nachtrag: Ich habe werde es nun mit JSON lösen. Das sieht wirklich um Längen sinnvoller aus. Ich melde mich wieder.

 

[romschny]

Dein JS Code wird so nie funktionieren.

Nutze zum initialisieren des Codes die .ready() Funktion (http://api.jquery.com/ready/), die .load() wird dafür nicht mehr verwendet.

mfg Kyrill

 

[sverebom]

Oh Schreck, da sollte natürlich $(document).ready stehen.

So, jetzt arbeite ich mit JSON. Und hey, klappt auf Anhieb.

{
	"websites": [
		{
			"title": "Chains of Honor for 'Joomla'",
			"code": "chains",
			"desc": "Some sample text to explain what's going on",
			"items": "2"
		},
		{
			"title": "Agar Teryn - Book of Tales",
			"code": "agar",
			"desc": "Some sample text to explain what's going on",
			"items": "2"
		},
		{
			"title": "Minifolio for 'The Secretary'",
			"code": "minifolio",
			"desc": "Some sample text to explain what's going on",
			"items": "2"
		},
		{
			"title": "Mirogreen for 'Wordpress'",
			"code": "mirogreen",
			"desc": "Some sample text to explain what's going on",
			"items": "2"
		},
		{
			"title": "Lain Ardhon for 'phpBB3'",
			"code": "ardhon",
			"desc": "Some sample text to explain what's going on",
			"items": "3"
		}
	]
}

Aber wie komme ich jetzt den "indexten" Datensatz in der Kategorie "Websites" heran? Was ich bisher an Informationen gefunden habe, ist wenig aufschlussreich.

 

[palace4d]

Nach der Umwandlung in ein JS Objekt ist websites ein Array. Also websites[0] für das erste.

 

[sverebom]

Okay, allerdings gibt es da ein Problem:

function getContent(currentContent,currentItem,currentCategory) {
	$.getJSON('repository.json', function(data) {
		currentContent = data.websites[currentItem];
		
		console.log(currentCategory,currentContent);
	});
};

Es hängt von der Wahl des Nutzers ab, welche Daten abgerufen werden. Das ist das eben nicht immer die Kategorie "websites". Der Zugriff muss daher dynamicsch sein. Aber wenn ich an Stelle von 'websites' die Variable verwende, in der die aktuelle Kategorie gespeichert ist (currentCategory), sagt der Code gar nichts mehr.

 

[palace4d]

deinObjekt[Object.keys(deinObjekt)][0];

 

[sverebom]

Tut mir leid, ich kann damit leider nicht viel anfangen bzw. ich verstehe nicht, wie ich das anwenden soll.

Ich habe eine Variable "currentCategory", in der die aktuelle Kategorie hinterlegt ist, und eine Variable "currentItem", in der das aktuell ausgewählte Objekt hinterlegt ist. Mit diesen Variablen möchte ich nun erst einmal jquery sagen "Hey, schau doch mal in "repository.json" in der Kategorie "currentCategory" nach, welche Daten für "currentItem" hinterlegt sind und speichere die Daten in dem array "currentContent!"

Ich könnte natürlich einfach sofort mein DOM mit den gefunden Daten füllen, aber da ich die Daten an verschiedenden Stellen auf der Website benötige, möchte ich die Daten erst einmal in einem Array speichern und dann überall dort, wo ich einzelne Datensätze benötige, auf die entsprechende Position im Array "currentContent" verweisen.

Ich habe mir natürlich jede Menge Tutorials angeschaut, aber entweder bleiben diese Tutorials auf dem Niveau von "Hello World!" stehen, oder verlieren sich nach wenigen Schritten in Inhalten, die ich noch nicht verstehe. Ich weiß einfach nicht, wie ich irgendwas davon auf mein Problem übertragen. Wahrscheinlich sehe ich mittlerweile vor lauter Bäumen den Wald nicht mehr bzw. bin einfach zu frustriert, ium noch irgendwas aufnehmen zu können.

 

[sverebom]

	function getContent(currentItem,currentCategory,currentContent) {

		$.getJSON('repository.json', function(data) {
			currentContent = 'data.' + currentCategory + '[' + currentItem + ']';
			
			console.log(currentCategory,eval(currentContent));
		});
	};

Es ist simpel. Jetzt muss ich das Objekt nur noch in ein Array umwandeln bzw. transferieren.

Aber mal ehrlich, ist das nicht ein wenig so als würde man mit einem Holzhammer auf das Problem drauf hauen? Das geht doch auch ein wenig eleganter, oder nicht? Ich komme mir gerade ein wenig wie jemand vor, der nicht weiß, wie man DIV-Container händelt und frustriert zu Tabellen zurück kehrt.

Nochmal, es geht darum, über zwei dynamische Variablen (die Werte wie "websites", "logotypes" oder "1", "2") auf JSON-Datensätze zuzugreifen. Für den Moment reicht mir diese Lösung, damit ich endlich mal voran komme, aber irgendwann schaue ich mir das nochmal an.