hoe krijg ik XML cdata naar div in html?

[de.professor]

hoi ik wil xml info met cdata overhalen naar een javascript var.
dit is het xml bestand dat ik gebruik. ik wil dit aan in een div weergeven in html pagina en verversen wanneer dit bestand wordt vervangen.

XML: nowplaying.xml

<Current>
<track>
<artistName>
<![CDATA[ Ludacris ]]>
</artistName>
<songName>
<![CDATA[
What's Your Fantasy (remix) (feat. Trina, Shawna & Foxy Brown)
]]>
</songName>
<AlbumCover>
<![CDATA[
ludacris-backforthefirsttime.jpg
]]>
</AlbumCover>
</track>
</Current> 

Ik heb het geprobeerd met google zelf op te lossen, maar zonder succes. Kan iemand mij op weg helpen?

[CH4OS]

Ik zou als je een XML-bestand hebt, lekker een XSLT-bestand aanmaken en met XHTML gaan werken.

Mocht dat niet kunnen wat je wilt (al kan ik geen reden bedenken waarom niet), dan is het wellicht handiger om de XML-output te vervangen voor JSON?

Als tussen oplossing kun je middels een PHP-script de XML afvangen en die omzetten naar JSON.

[ Voor 62% gewijzigd door CH4OS op 16-02-2016 16:29 ]

[Marber]

is HTML Encoding van je XML string geen optie?

[CH4OS]

Marber schreef op dinsdag 16 februari 2016 @ 17:04:
is HTML Encoding van je XML string geen optie?

En hoe had je dat in gedachten? XML is juist een manier om je eigen tags en dergelijken te defineren. Geen idee hoe je dat in een HTML-jasje wil gieten, daarom is XHTML gekomen, zodat je via een XSLT stylesheet de XML kan omzetten naar XHTML.

Of je moet het om gaan zetten, hetzij met Javascript, hetzij met scriptlanguages zoals PHP.

[de.professor]

ik kan de xml file niet veranderen omdat deze ook voor andere doeleinden gebruikt wordt. Daarvoor is deze opmaak noodzakelijk.

[NMe]

Dat verandert niks aan het antwoord: je zal ofwel met XSLT aan de slag moeten, ofwel met PHP of een andere serverside-taal. En daarna heb je eventueel nog een stukje javascript nodig om het divje om de zoveel tijd te verversen.

[DJMaze]

Ik weet het, W3Schools is een website die je nooit moet gebruiken.
Het was wel het snelste wat ik kon vinden.
http://www.w3schools.com/...lename=try_dom_loadxmldoc

[CH4OS]

Om de basics te leren is er toch niks mis met w3schools? Heb ik zelf jaren geleden ook gedaan (10+ jaar geleden intussen).

Overigens zou ik het dan zelf met jQuery doen, dan heb je ook nog eens de jquery.parsexml() functie die wellicht uitkomst biedt?

[ Voor 42% gewijzigd door CH4OS op 16-02-2016 17:28 ]

[DJMaze]

w3schools heeft veel slechte programmeer voorbeelden, gelukkig hebben ze de boel wel wat opgeschoont.
Je kan alleen zo moeilijk bij elke pagina vermelden wat wel/niet goed is gedocumenteerd.
In het gegeven voorbeeld wordt er bijvoorbeeld geen rekening gehouden met fouten (half bestand, 404, etc.).

jQuery kan ook, maar is best zinloos als de website in kwestie jQuery helemaal niet gebruikt.
Om dan een library van 100kb (34kb compressed) te gebruiken voor zo iets simpels is overkill.

[ Voor 45% gewijzigd door DJMaze op 16-02-2016 17:32 ]

[Verwijderd]

DOMParser doet toch gewoon XML? http://stackoverflow.com/...arse-xml-using-javascript Zo niet: regular expression (normaal zou ik dat niet typen maar voor zo'n mini-documentje...)

[RobIII]

Verwijderd schreef op dinsdag 16 februari 2016 @ 17:36:
Zo niet: regular expression (normaal zou ik dat niet typen maar voor zo'n mini-documentje...)

NEEN

Verder zie ik 't hele probleem niet zo, noch waarom hier XSLT aan te pas zou komen (hooguit XPath). Ik gebruik hier even jQuery die de ajax-request voor me afhandelt (en via de /echo/xml van jsfiddle een pre-defined result geeft), maar wat is dan precies 't probleem?

https://jsfiddle.net/p25s6fms/

Als je zorgt dat je een XMLDocument hebt (als dat niet al zo is) kun je met diens methods (again: ik gebruik hier even jQuery's find() omdat makkelijk) prima de juiste node values uitlezen en in je document zetten.

Edit: de "iets-minder jQuery" versie:

https://jsfiddle.net/p25s6fms/1/

[ Voor 7% gewijzigd door RobIII op 16-02-2016 17:52 ]

[DJMaze]

Inderdaad kan dat met DOMParser, echter....

de.professor schreef op dinsdag 16 februari 2016 @ 16:23:
en verversen wanneer dit bestand wordt vervangen.

Dan is het voorbeeld met een XMLHttpRequest beter omdat hij dan via een interval bijvoorbeeld elke seconde de XML kan verversen zonder de hele pagina.

[Verwijderd]

@DJMaze, klopt. Ik reageerde voornamelijk op de server-side en xslt suggesties. Had de andere reacties nog niet gezien.
@RobIII, tnx voor de reminder om niet op techfora te posten.

[Marber]

CptChaos schreef op dinsdag 16 februari 2016 @ 17:13:
[...]
En hoe had je dat in gedachten? XML is juist een manier om je eigen tags en dergelijken te defineren. Geen idee hoe je dat in een HTML-jasje wil gieten, daarom is XHTML gekomen, zodat je via een XSLT stylesheet de XML kan omzetten naar XHTML.

Of je moet het om gaan zetten, hetzij met Javascript, hetzij met scriptlanguages zoals PHP.

Zoals ik hem las wil de topicstarter de XML weergeven als xml in de browser, dan is HTML encoding een weg om te gaan. Maar waarschijnlijk heb ik de topicstarter verkeerd begrepen

[de.professor]

wat ik wil bereiken is dat de data uit de xml een div geeft met daarin de afbeelding van een track met daarnaast artiest - titel.

[NMe]

de.professor schreef op woensdag 17 februari 2016 @ 12:44:
wat ik wil bereiken is dat de data uit de xml een div geeft met daarin de afbeelding van een track met daarnaast artiest - titel.

....maar ga je intussen ook nog aan de slag met de reacties die je hebt gehad of blijf je oneliners posten?

[de.professor]

HTML:

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "nowplaying.xml", true);
xhttp.send();

function myFunction(xml) {
    var artist, i, xmlDoc, txtnp, urlnp;
    xmlDoc = xml.responseXML;
    txt = "";
    artist = xmlDoc.getElementsByTagName("artistName");
    song = xmlDoc.getElementsByTagName("songName");
    cover =xmlDoc.getElementsByTagName("AlbumCover");
    for (i = 0; i < artist.length; i++) { 
        txtnp += artist[i].childNodes[0].data + "<br>" + song[i].childNodes[0].data + "<br>";
        urlnp += cover[i].childNodes[0].data;
    }        
    document.getElementById("NP").innerHTML = txtnp;
    document.getElementById("image").src = urlnp; 
}
</script>

Ik krijg bijna wat ik hebben wil met dit script. maar op de pagina wordt "undefined" voor de tekst/afbeeldings url. Hoe krijg ik dat weg?

[Marber]

Als je je xml-data doorneemt zie je dat het ArtistName geen childs heeft. Ik vermoed dat als je in je forloop het Track element doorneemt het wellicht wel goed gaat.

[RobIII]

de.professor schreef op vrijdag 19 februari 2016 @ 12:02:
Ik krijg bijna wat ik hebben wil met dit script. maar op de pagina wordt "undefined" voor de tekst/afbeeldings url. Hoe krijg ik dat weg?

Als je nou gewoon eens debugged: Debuggen: Hoe doe ik dat?

[de.professor]

sorry, maar de uitkomst blijft gelijk

[Marber]

Het leukste is, er staan al werkende voorbeelden hierboven in de JSFiddles...

[CH4OS]

de.professor schreef op vrijdag 19 februari 2016 @ 13:38:
sorry, maar de uitkomst blijft gelijk

Undefined betekend meestal dat een variabele leeg is of een functie die niet bestaat. Debugging dus, want je code doet niet wat je wilt. Tip: gebruik console.log() bijvoorbeeld als je wat output wilt zien tussendoor, of gooi het in een alert (al is dat minder goed leesbaar).

@hieronder, thnx

[ Voor 10% gewijzigd door CH4OS op 19-02-2016 13:51 ]

[xleeuwx]

CptChaos schreef op vrijdag 19 februari 2016 @ 13:42:
[...]
Undefined betekend meestal dat een variabele leeg is of een functie die niet bestaat. Debugging dus, want je code doet niet wat je wilt. Tip: gebruik log.console.log() bijvoorbeeld als je wat output wilt zien tussendoor, of gooi het in een alert (al is dat minder goed leesbaar).

FTFY

[NMe]

de.professor schreef op vrijdag 19 februari 2016 @ 13:38:
sorry, maar de uitkomst blijft gelijk

Sorry, maar ga nou eens fatsoenlijk in op de reacties die je krijgt. Er zijn hier genoeg mensen die proberen je te helpen maar je reageert op vrijwel niemand en áls je dan post dan doe je het met simpele oneliners die meer vragen oproepen dan ze beantwoorden. Jij bent degene met een probleem, niet wij. Als je hulp wil, zorg dan dat je gewoon zelf ook actief meedenkt. Op deze manier heeft je topic geen zin en als dit de manier is waarop je wil praten dan gaat dit topic gewoon op slot...

[RobIII]

de.professor schreef op vrijdag 19 februari 2016 @ 13:38:
sorry, maar de uitkomst blijft gelijk

Doet me denken aan:

Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

Als je niet aangeeft wat je geprobeerd / veranderd hebt (aangenomen dat dat zo is), hoe moeten wij je dan in vredesnaam helpen

[de.professor]

het is gelukt. in de var ontbrak textnp en urlnp op naar de volgende stap. het script herhalen als de xml wordt gewijzigd.

[CH4OS]

Waarom niet gewoon jQuery gebruikt trouwens? Dat had je denk ik ook veel tijd gescheeld. Maar mooi dat het werkt!

[DJMaze]

de.professor schreef op vrijdag 19 februari 2016 @ 16:39:
het is gelukt. in de var ontbrak textnp en urlnp op naar de volgende stap. het script herhalen als de xml wordt gewijzigd.

Als je had gelezen dan zei ik iets:

DJMaze schreef op dinsdag 16 februari 2016 @ 17:43:
.... omdat hij dan via een interval bijvoorbeeld elke seconde de XML kan verversen zonder de hele pagina.....

Google is your friend https://www.google.nl/sea...cript+interval+-w3schools

[de.professor]

dat had ik gezien en ook dat werkt nu. scrip refresht elke 5 seconde.

DJMaze schreef op vrijdag 19 februari 2016 @ 21:49:
[...]

Als je had gelezen dan zei ik iets:

[...]

Google is your friend https://www.google.nl/sea...cript+interval+-w3schools