XML till array, jQuery?

Har en XML-fil med data, uppbyggd såhär:

<?xml version="1.0" encoding="utf-8"?>
<flights>
<flight id="000001">
  <flight-name>Stockholm-Malmö</flight-name>
  <depdate>2010-04-20</depdate>
  <deptime>12:00</deptime>
</flight>
<flight id="000002">
  <flight-name>Stockholm-Östersund</flight-name>
  <depdate>2010-04-21</depdate>
  <deptime>14:00</deptime>
</flight>
</flights>

Vill hämta varje flight-name, depdate och deptime, baka ihop det till en sträng och lägga in varje sträng i en array. Och jag tänkte försöka lösa detta med jQuery, men hittar bara exempel på lösningar som hämtar XML för att uppdatera DOM-element, med typ .append() eller .html().

Så här långt har jag "kommit":

$(document).ready(function() {
$.ajax({
	type: "GET",
	url: "../data/flights.xml",
	dataType: "xml",
	success: function(xml) {
		$(xml).find("flight").each(function(){
			//???
		});
	});
});

"//???" är förstås det jag behöver lite hjälp med. ;)

Hilfe, bitte!

Omslut innehållet i Xml:n med ett rootelement (t.ex. <flights>), annars är det inte well-formed Xml. Och är det inte well-formed Xml är det inte Xml. ;)

success: function(xml) {
	var flights = []; //initiera en tom array. Samma sak som new Array();
	
	$(xml).find("flight").each(function() {
		var node = $(this);
		var id = node.attr("id");
		var departureDate = node.find("depdate").text();
		
		var flight = id + "|" + departureDate + "|" //formatera strängen hur du vill.
		flights.push(flight); //lägg till ny post i arrayen
	});
}

Sen är det bara att lägga till i en array precis som vanligt. Eller jaha, vad det det som var frågan kanske?
Kodexemplet är uppdaterat.

MDC har bra dokumentation kring bl.a. Javascript.

Thanks man, ska kika närmare på lösningen strax.

Att XML-filen ska ha rootnode är jag helt med på, blev en miss i pejsten bara när jag tänkte korta ner den så mycket som möjligt i inlägget... ;)

Okej så här ser det ut just nu:

// Blandade variabler och strängar:
// --------------------------------
var myarray = [];

// Hämtar XML-fil med flygresor och fyller en array: (jQuery)
// ----------------------------------------------------------

    $(document).ready(function(){
      $.ajax({
	type: "GET",
	url: "flights.xml",
	dataType: "xml",
	success: function(xml) {
		
		$(xml).find("flight").each(function() {
			var node = $(this);
			var departureDate = node.find("depdate").text();
			var departureTime = node.find("deptime").text();
			var departureString = node.find("flight-name").text();
				
			var flight = departureString + " (" + departureDate + ") " + departureTime;
			myarray.push(flight);
			});
		}
		
	});

	$("#selectflight").autocomplete(myarray);
});

Använder alltså autocomplete-pluginen för att låta användaren söka efter sin "resa". När jag "kommenterar bort" filhämtningen, för att testa så att autocomplete funkar, så är det inga problem med:

// Blandade variabler och strängar:
// --------------------------------
	
var myarray = [];

// Hämtar XML-fil med flygresor och fyller en array: (jQuery)
// ----------------------------------------------------------

    $(document).ready(function(){
      /*$.ajax({
	type: "GET",
	url: "flights.xml",
	dataType: "xml",
	success: function(xml) {
		
		$(xml).find("flight").each(function() {
			var node = $(this);
			var departureDate = node.find("depdate").text();
			var departureTime = node.find("deptime").text();
			var departureString = node.find("flight-name").text();
				
			var flight = departureString + " (" + departureDate + ") " + departureTime;
			myarray.push(flight);
			});
		}
		
	});*/

        myarray.push("Teststräng");
	$("#selectflight").autocomplete(myarray);
});

Och för att minimera skitfel som t.ex fel sökväg har jag också placerat en kopia av flights.xml i samma katalog. Ändå blir det något fel med filhämtningen, eftersom inga förslag ges när man skriver.

I HTML-filen inkluderar jag jquery.js och jquery.autocomplete.js innan jag inkluderar min "basicfunction.js", där koden ovan är hämtad ifrån.

du fyller din array först OM den hittar en AJAX response, dvs din funktion (autocomplete) kan redan har körts när AJAX sidan väl svara.

rent spontant så kör autocomplete också först vid en success AJAX call

voigtann1 skrev:

du fyller din array först OM den hittar en AJAX response, dvs din funktion (autocomplete) kan redan har körts när AJAX sidan väl svara.

rent spontant så kör autocomplete också först vid en success AJAX call

Det har du rätt i. Men jag vet inte, det här funkade inte heller (flyttade autocomplete in i funktionen som triggas vid success):

$(document).ready(function(){
  $.ajax({
	type: "GET",
	url: "flights.xml",
	dataType: "xml",
	success: function(xml) {
		
		$(xml).find("flight").each(function() {
			var node = $(this);
			var departureDate = node.find("depdate").text();
			var departureTime = node.find("deptime").text();
			var departureString = node.find("flight-name").text();
				
			var flight = departureString + " (" + departureDate + ") " + departureTime;
			myarray.push(flight);
			})
			
		$("#selectflight").autocomplete(myarray);
		}
	});
});

Väntar du till du har fått en success?

sätt en css() eller liknande så att du ser att du har fått en success:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "flights.xml",
		dataType: "xml",
		success: function(xml) {
			$(xml).find("flight").each(function() {
				var node = $(this);
				var departureDate = node.find("depdate").text();
				var departureTime = node.find("deptime").text();
				var departureString = node.find("flight-name").text();
				
				var flight = departureString + " (" + departureDate + ") " + departureTime;
				myarray.push(flight);
			});
			
			$("#selectflight").css("background", "#f00").autocomplete(myarray);
		}
	});
});

kör en console.log() (om du kör firefox) och kontrollera vad myarray innehåller.

voigtann1 skrev:

Väntar du till du har fått en success?

sätt en css() eller liknande så att du ser att du har fått en success:

kör en console.log() (om du kör firefox) och kontrollera vad myarray innehåller.

Fan bra tips där! Jag hade varit och petat lite i Firebug för att försöka hitta nån form av debug sen jag började programmera lite mer JavaScript, men hade inte blivit visare. Efter att ha kört console.log() visade sig dock felet ligga i sån slarvgrej - sökvägen till XML-filen är ju relativ till sidan där scriptet körs, inte min jscript-katalog! Doh! ;)

Funkar ypperligt nu. Thanks a million! Både du och dAEk!