Plocka data från xml via JQuery

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005

Plocka data från xml via JQuery

God kväll kära Sweclockare

Har inte hållt på med någon form av kod på alldeles för länge så kommer tametusan inte ihåg längre.
Efter mer googlande än jag vågar erkänna så tänkte jag att jag frågar experterna här.

Jag försöker som rubriken säger plocka ur data från SL's xml respons för att egentligen hålla rätt på avgångar via buss, tunnelbana, pendel och ja allt och visa på min egna hemsida.

<script>
$(function(){
var xml = $.parseXML(<?php echo $slUrl; ?>);
var xmlDoc = $.parseXML(xmlDoc);
var $xml = $($xmlDoc);

var $responseData = $xml.find("Bus");
$bus.each(function(){
var linenumber = $(this).find('LineNumber').text(),
destination = $(this).find('Destination').text();

$("#Trafik" ).append('<li>' +linenumber+ ' - ' +destination+ '</li>');
})
})
</script>
<ul id="Trafik">

</ul>

Ett utdrag från XML filen jag vill ta information från är som följande (dock saxat då det är rätt mycket information)
<ResponseOfDepartures xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<StatusCode>0</StatusCode>
<ExecutionTime>159</ExecutionTime>
<ResponseData>
<LatestUpdate xmlns="http://sl.se/Departures.xsd">2017-08-12T19:05:20</LatestUpdate>
<DataAge xmlns="http://sl.se/Departures.xsd">5</DataAge>
<Metros xmlns="http://sl.se/Departures.xsd"/>
<Buses xmlns="http://sl.se/Departures.xsd">
<Bus>
<TransportMode>BUS</TransportMode>
<LineNumber>176</LineNumber>
<Destination>Stenhamra</Destination>
<JourneyDirection>2</JourneyDirection>
<GroupOfLine>blåbuss</GroupOfLine>
<StopAreaName>Solna station</StopAreaName>
<StopAreaNumber>50146</StopAreaNumber>
<StopPointNumber>50352</StopPointNumber>
<StopPointDesignation>A</StopPointDesignation>
<TimeTabledDateTime>2017-08-12T19:04:00</TimeTabledDateTime>
<ExpectedDateTime>2017-08-12T19:05:24</ExpectedDateTime>
<DisplayTime>Nu</DisplayTime>
<JourneyNumber>10321</JourneyNumber>
</Bus>
<Bus>
<TransportMode>BUS</TransportMode>
<LineNumber>67</LineNumber>
<Destination>Skansen</Destination>
<JourneyDirection>1</JourneyDirection>
<StopAreaName>Solna station</StopAreaName>
<StopAreaNumber>50146</StopAreaNumber>
<StopPointNumber>50352</StopPointNumber>
<StopPointDesignation>A</StopPointDesignation>
<TimeTabledDateTime>2017-08-12T19:06:17</TimeTabledDateTime>
<ExpectedDateTime>2017-08-12T19:07:07</ExpectedDateTime>
<DisplayTime>1 min</DisplayTime>
<JourneyNumber>2996</JourneyNumber>
</Bus>

Håller för övrigt på att knacka ihop en smart spegel där jag kan via spegeln kan se tid, SL-avgångar samt väder

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD

Trädvy Permalänk
Medlem
Registrerad
Okt 2011
Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005

Precis det jag är ute efter men den hämtar ingen data dessvärre.
Kan JQuery vara kinkigt pga att jag lägger in diverse parametrar i url:en till xml filen kanske?

Ser ut såhär (utan api nyckeln):
http://api.sl.se/api2/realtimedeparturesV4.xml?key=härärapike...

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD

Trädvy Permalänk
Medlem
Registrerad
Jun 2017

Utgår man från koden du postade så skriver du:

var xml = $.parseXML(<?php echo $slUrl; ?>);

Antar att den där PHP-variabeln är URL:en till xml-datan utifrån namngivelsen. Således verkar du skicka fel typ av innehåll, då parseXML verkar enligt spec ta en sträng med XML-data (https://api.jquery.com/jQuery.parseXML/)

Inte nog med det så verkar du tilldela variabler till varandra innan de har ett värde, exempelvis
var xmlDoc = $.parseXML(xmlDoc);
Här har xmlDoc inget värde.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005
Skrivet av MrDoggo:

Utgår man från koden du postade så skriver du:

var xml = $.parseXML(<?php echo $slUrl; ?>);

Antar att den där PHP-variabeln är URL:en till xml-datan utifrån namngivelsen. Således verkar du skicka fel typ av innehåll, då parseXML verkar enligt spec ta en sträng med XML-data (https://api.jquery.com/jQuery.parseXML/)

Inte nog med det så verkar du tilldela variabler till varandra innan de har ett värde, exempelvis
var xmlDoc = $.parseXML(xmlDoc);
Här har xmlDoc inget värde.

Ja precis, php variabeln innehåller en länk till SLs api samt en key och hur ofta jag hämtar data (120 sekunder).
Ber om ursäkt, men är väldigt rostig på allt vad kod heter då jag inte gjort på flera år, men hur plockar man värden från XML dokumentet (http://api.sl.se/api2/realtimedeparturesV4.xml?key=här är api key&siteid=9509&timewindow=120) och kan göra något vettigt med det?
Går att plocka via PHP men får ut ett helt XML träd då och inte det jag är ute efter.

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD

Trädvy Permalänk
Medlem
Registrerad
Sep 2003
Skrivet av Fjanterifjant:

Precis det jag är ute efter men den hämtar ingen data dessvärre.
Kan JQuery vara kinkigt pga att jag lägger in diverse parametrar i url:en till xml filen kanske?

Ser ut såhär (utan api nyckeln):
http://api.sl.se/api2/realtimedeparturesV4.xml?key=härärapike...

Det gör den, om du byter ut "sl.xml" till en sl-url istället.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005
Skrivet av reinholdsson:

Det gör den, om du byter ut "sl.xml" till en sl-url istället.

Hur menar du?

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD

Trädvy Permalänk
Medlem
Registrerad
Okt 2011
Skrivet av Fjanterifjant:

Precis det jag är ute efter men den hämtar ingen data dessvärre.
Kan JQuery vara kinkigt pga att jag lägger in diverse parametrar i url:en till xml filen kanske?

Ser ut såhär (utan api nyckeln):
http://api.sl.se/api2/realtimedeparturesV4.xml?key=härärapike...

Hämtar ingen data? Du såg väl att bussnr skrivs ut?

Jag fick intrycket att problemet var att parsa xml:en för att få ut information, vilket jag gav exempel på. Visserligen från en statisk xmlfil som exempel men du får ju utgå från mitt exempel för att hämta data från din egna källa, alltså sl:s api.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005
Skrivet av Hubbee:

Hämtar ingen data? Du såg väl att bussnr skrivs ut?

Jag fick intrycket att problemet var att parsa xml:en för att få ut information, vilket jag gav exempel på. Visserligen från en statisk xmlfil som exempel men du får ju utgå från mitt exempel för att hämta data från din egna källa, alltså sl:s api.

Kör koden jag fick av dig med undantaget på xml url:en

<script> $(document).ready(function() { $.get("http://api.sl.se/api2/realtimedeparturesV4.xml?key=keyhär&sit...", function(data) { var xmlDoc = $(data); xmlDoc.find('Bus').toArray().forEach(function(bus) { var lineNumber = $(bus).find('LineNumber'); $("#bussar").append('<li>' + lineNumber.text() + '</li>') }); }); }); </script> <h2>SL SUXXX</h2> <ul id="bussar"></ul> </div>

här är output efter det är kört:

<script> $(document).ready(function() { $.get("http://api.sl.se/api2/realtimedeparturesV4.xml?key=1fd8881c5a...", function(data) { var xmlDoc = $(data); xmlDoc.find('Bus').toArray().forEach(function(bus) { var lineNumber = $(bus).find('LineNumber'); $("#bussar").append('<li>' + lineNumber.text() + '</li>') }); }); }); </script> <h2>SL SUXXX</h2> <ul id="bussar"></ul>

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD

Trädvy Permalänk
Medlem
Registrerad
Jun 2017
Skrivet av Fjanterifjant:

Ja precis, php variabeln innehåller en länk till SLs api samt en key och hur ofta jag hämtar data (120 sekunder).
Ber om ursäkt, men är väldigt rostig på allt vad kod heter då jag inte gjort på flera år, men hur plockar man värden från XML dokumentet (http://api.sl.se/api2/realtimedeparturesV4.xml?key=här är api key&siteid=9509&timewindow=120) och kan göra något vettigt med det?
Går att plocka via PHP men får ut ett helt XML träd då och inte det jag är ute efter.

Ingen fara, ville bara peka ut vad som kunde orsaka problemen så du kommer närmare lösning.

Exemplet som tidigare skribent postade som använder (https://api.jquery.com/jquery.get/) eller $.ajax kan du använda för att hämta XML-dokumentet.

Trädvy Permalänk
Medlem
Registrerad
Aug 2017

Jag tänker mig att jQuery kan man använda för att hämta xml-dokumentent, medan sedan för att parse:a så tar man ett annat verktyg. Det här ser ju till ytan lovande ut:
https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_an...

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005
Skrivet av Tommy Derngren:

Jag tänker mig att jQuery kan man använda för att hämta xml-dokumentent, medan sedan för att parse:a så tar man ett annat verktyg. Det här ser ju till ytan lovande ut:
https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_an...

Underbart, tack!
Ska genast prova!

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Skrivet av Fjanterifjant:

Precis det jag är ute efter men den hämtar ingen data dessvärre.
Kan JQuery vara kinkigt pga att jag lägger in diverse parametrar i url:en till xml filen kanske?

Ser ut såhär (utan api nyckeln):
http://api.sl.se/api2/realtimedeparturesV4.xml?key=härärapike...

Att jobba med XML är lärorikt, finns många ställen där det används.
Men SLs API har stöd för JSON vilket är otroligt mycket smidigare att använda. Speciellt med Javascript (jQuery).

Ex JSON:
http://api.sl.se/api2/realtimedeparturesV4.json?key=h%C3%A4r%...

Med det sagt så slipper man hålla på och köra "find" och "arrayifiera" resultat då allt redan kan parsas som ett Javascript objekt.
Exempelvis: https://plnkr.co/edit/ZlEWL6MmyyKhxxbTXnMJ

Edit: Byggde vidare på lösningen som @Hubbee visade. Credit where credit is due.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jan 2005
Skrivet av Leedow:

Att jobba med XML är lärorikt, finns många ställen där det används.
Men SLs API har stöd för JSON vilket är otroligt mycket smidigare att använda. Speciellt med Javascript (jQuery).

Ex JSON:
http://api.sl.se/api2/realtimedeparturesV4.json?key=h%C3%A4r%...

Med det sagt så slipper man hålla på och köra "find" och "arrayifiera" resultat då allt redan kan parsas som ett Javascript objekt.
Exempelvis: https://plnkr.co/edit/ZlEWL6MmyyKhxxbTXnMJ

Edit: Byggde vidare på lösningen som @Hubbee visade. Credit where credit is due.

Tack så jättemycket för tipset, ska gå lös på det direkt imorgon.
Kom hem från semestern precis och ska börja gå lös på min spegel igen nu efter semester börjar nå sitt slut.

MAIN: i7 6700k | 16gb DDR4 | Asus Z170-A | EVGA GeForce GTX 1080 FTW | 1,5tb HDD | 256gb M.2 SSD
SERVER: i7 3930k | Asus P9X79-Pro | 16GB PC12800 | 10TB (RAID5) | 2TB VirtOS | 256GB SSD