Einzelne Werte einer XML-Datei auslesen und in HTML-Seite einbinden?

[BachManiac]

Hallo zusammen!

Ich habe zuhause eine Netzwerk-Wetterstation, welche auf einer Netzwerkadresse eine XML-Datei bereitstellt.

Dies ist der Inhalt der Datei:

Code:

<root>
<sns id="1" name="Sensor A" type="1" status="0" unit="0" val="25.0" w-min="" w-max="" type2="2" status2="0" unit2="0" val2="44.1" w-min2="" w-max2="" type3="3" status3="0" unit3="0" val3="11.9" w-min3="" w-max3=""/>
<sns id="2" name="Sensor B" type="1" status="0" unit="0" val="21.0" w-min="" w-max="" type2="2" status2="0" unit2="0" val2="54.3" w-min2="" w-max2="" type3="3" status3="0" unit3="0" val3="15.9" w-min3="" w-max3=""/>
<status msp="1" level="2" location="Temperatur" time="01/07/2009 3:26:41"/>
<dbgg stmsp="0" v1="0" v2="0" v3="0" v4="0" v5="0" v6="0" v7="0" v8="0" v9="0" v10="0" v11="0" v12="0" v13="0" v14="0" v15="0" v16="0"/>
</root>

Nun würde ich gerne nur die folgenden 4 Werte:

von der sns id="1", also Zeile 2  die Werte val="25.0" und val2="44.1" und ebenso:

von der sns id="2", also Zeile 3  die Werte val="15.9" und val2="54.3"

...in einer HTML-Datei darstellen und nach meiner Vorstellung formatieren und positionieren.


Man sieht schon, die Variablen in den beiden "SNS ID's" heißen jeweils gleich; es reicht also nicht, einfach blind nach einer Variablen zu suchen, es muss auch die Zeile stimmen.

Und das Ganze muss ohne PHP funktionieren, da kein Webserver vorhanden ist, sondern nur eine lokal gespeicherte HTML-Seite. Nur HTML + Javascript ist erlaubt.


Ich bin kein Programmierer, ich bastel mir meine Sachen aber immer durch viel Recherchieren von ähnlichen Projekten zusammen, jedoch wurde ich hier bisher leider nicht fündig. Lediglich PHP-Lösungen hab ich gefunden, aber diese sind hier leider nicht möglich.


Gibt es eine Möglichkeit, dass man via Javascript in einer Datei in einer bestimmten Zeile nach einem Wert sucht und diesen dann wo einfügt?



Vielen Dank schon mal und schöne Grüße!

Günther

[admin]

jo.
Wenn dann so

Code:

<main>
<label>Sensor 1</label>
<p>Val = <span id="reihe1_val1"></span></p>
<p>Val2 = <span id="reihe1_val2"></span></p>
<label>Sensor 2</label>
<p>Val = <span id="reihe2_val1"></span></p>
<p>Val2 = <span id="reihe2_val2"></span></p>
</main>

<script>
var r1v1=document.getElementById('reihe1_val1');
var r1v2=document.getElementById('reihe1_val2');
var r2v1=document.getElementById('reihe2_val1');
var r2v2=document.getElementById('reihe2_val2');

fetch ('datei.xml')
    .then (function (response) {
        // Antwort kommt als Text-String
        return response.text();
    })
    .then (function (data) {
        let parser = new DOMParser (),
            xmlDoc = parser.parseFromString (data, 'text/xml');
            root=xmlDoc.getElementsByTagName ('root')[0];
        r1v1.innerHTML=root.children[0].getAttribute('val');                                                            
            r1v2.innerHTML=root.children[0].getAttribute('val2');
            r2v1.innerHTML=root.children[1].getAttribute('val');
            r2v2.innerHTML=root.children[1].getAttribute('val2');   

}).catch (function (error) {
     console.log ("Fehler: bei Auslesen der XML-Datei " + error);
});

</script>

oder so geht auch

Code:

<main>
<label>Sensor 1</label>
<p>Val = <span id="reihe1_val1"></span></p>
<p>Val2 = <span id="reihe1_val2"></span></p>
<label>Sensor 2</label>
<p>Val = <span id="reihe2_val1"></span></p>
<p>Val2 = <span id="reihe2_val2"></span></p>
</main>

<script>
var r1v1=document.getElementById('reihe1_val1');
var r1v2=document.getElementById('reihe1_val2');
var r2v1=document.getElementById('reihe2_val1');
var r2v2=document.getElementById('reihe2_val2');

fetch ('datei.xml')
    .then (function (response) {
        // Antwort kommt als Text-String
        return response.text();
    })
    .then (function (data) {
        let parser = new DOMParser (),
        xmlDoc = parser.parseFromString (data, 'text/xml');
            root=xmlDoc.getElementsByTagName ('root')[0];
        r1v1.innerHTML=root.children[0].getAttribute('val');                                     
            r1v1.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val');
            r1v2.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val2');
            r2v1.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val');
            r2v2.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val2'); 
}).catch (function (error) {
     console.log ("Fehler: bei Auslesen der XML-Datei " + error);
});

</script>

[BachManiac]

Hallo und besten Dank für die beiden Codes!

Irgend etwas hats da aber leider noch, da ich es nicht zum Laufen bekomme.

Selbst wenn ich in den gleichen Ordner der HTML-Datei mit einem deinen Codes eine Datei namens datei.xml mit dem von mir oben genannten Inhalt erstelle, funktioniert es leider nicht.

Ein console.log wird übrigens auch nicht erstellt.

Was kann es da haben, oder habe ich was übersehen?

Getestet mit Chrome, Firefox und Edge.

Danke schonmal!

Schöne Grüße!

[admin]

Habe den Code mal online gestellt
https://basti1012.bplaced.net/testodner_.../index.php
Wie du siehst geht es.

Vielleicht kannst du da mal schauen, ob du da was sehen kannst.

EDIT:
Ich glaube Mein Code geht nur online.
Du brauchst aber ein Code, de nicht Online läuft, oder?
Melde mich später nochmal weil muss erst was testen.

[BachManiac]

Ja genau, ich benötige das in meinem lokalen Heimnetzwerk. Ich wusste nicht, dass diese Info relevant ist.

Dein online gestellter Code ist ne PHP - Datei. Kann es sein, dass es deshalb nicht geht, weil es eben einen PHP-Server erfordert?

[admin]

Mein Code ist kein PHP.
Das ist nur HTML und Javascript.
Ich habe noch nie versucht, Dateien mit Javascript aufzurufen (also im Heimnetzwerk).
Habe aber auch noch nie im Heimnetzwerk sowas versucht.
Wie läuft das den bei dir?
Hast du die xml Datei auf irgendein Computer , und du versucht mit einem anderen oder gleichen Computer die xml Datei mit einer HTML Datei aufzurufen?

[admin]

Wenn der Inhalt der xml Datei als String im Javascript Code steht , geht es auch so

Code:

<main>
<label>Sensor 1</label>
<p>Val = <span id="reihe1_val1"></span></p>
<p>Val2 = <span id="reihe1_val2"></span></p>
<label>Sensor 2</label>
<p>Val = <span id="reihe2_val1"></span></p>
<p>Val2 = <span id="reihe2_val2"></span></p>
</main>
<script>
var data=`<root>
<sns id="1" name="Sensor A" type="1" status="0" unit="0" val="25.0" w-min="" w-max="" type2="2" status2="0" unit2="0" val2="44.1" w-min2="" w-max2="" type3="3" status3="0" unit3="0" val3="11.9" w-min3="" w-max3=""/>
<sns id="2" name="Sensor B" type="1" status="0" unit="0" val="21.0" w-min="" w-max="" type2="2" status2="0" unit2="0" val2="54.3" w-min2="" w-max2="" type3="3" status3="0" unit3="0" val3="15.9" w-min3="" w-max3=""/>
<status msp="1" level="2" location="Temperatur" time="01/07/2009 3:26:41"/>
<dbgg stmsp="0" v1="0" v2="0" v3="0" v4="0" v5="0" v6="0" v7="0" v8="0" v9="0" v10="0" v11="0" v12="0" v13="0" v14="0" v15="0" v16="0"/>
</root>`;

var r1v1=document.getElementById('reihe1_val1');
var r1v2=document.getElementById('reihe1_val2');
var r2v1=document.getElementById('reihe2_val1');
var r2v2=document.getElementById('reihe2_val2');
let parser = new DOMParser (),
xmlDoc = parser.parseFromString (data, 'text/xml');
root=xmlDoc.getElementsByTagName ('root')[0];
//r1v1.innerHTML=root.children[0].getAttribute('val');
// r1v2.innerHTML=root.children[0].getAttribute('val2');
// r2v1.innerHTML=root.children[1].getAttribute('val');
//  r2v2.innerHTML=root.children[1].getAttribute('val2');  
        
r1v1.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val');
r1v2.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val2');
r2v1.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val');
r2v2.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val2');  

</script>

[admin]

Habe den ganzen Kram mit Netzwerk und Localhost noch nie so gemacht. Aber ich konnte es jetzt testen und auf localhost testen.
So hat es bei mir geklappt, hoffe du kommst damit weiter

Code:

<main>
<label>Sensor 1</label>
<p>Val = <span id="reihe1_val1"></span></p>
<p>Val2 = <span id="reihe1_val2"></span></p>
<label>Sensor 2</label>
<p>Val = <span id="reihe2_val1"></span></p>
<p>Val2 = <span id="reihe2_val2"></span></p>
</main>
<script>
var r1v1=document.getElementById('reihe1_val1');
var r1v2=document.getElementById('reihe1_val2');
var r2v1=document.getElementById('reihe2_val1');
var r2v2=document.getElementById('reihe2_val2');

fetch ('http://127.0.0.1:8887/datei.xml', {  
}).then (function (response) {
console.log(response);
    return response.text();
})
.then (function (data) {
        console.log(data);
    let parser = new DOMParser (),
    xmlDoc = parser.parseFromString (data, 'text/xml');
        root=xmlDoc.getElementsByTagName ('root')[0];
//        r1v1.innerHTML=root.children[0].getAttribute('val');
//        r1v2.innerHTML=root.children[0].getAttribute('val2');
//        r2v1.innerHTML=root.children[1].getAttribute('val');
//        r2v2.innerHTML=root.children[1].getAttribute('val2');
            r1v1.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val');
            r1v2.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val2');
            r2v1.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val');
           r2v2.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val2');
}).catch (function (error) {
console.log ("Fehler: bei Auslesen der XML-Datei " + error);
});
</script>

[BachManiac]

Vielen Dank für deine Mühe, aber es klappt leider immer noch nicht.

Die Wetterstation hat eine eigene IP-Adresse im Heimnetzwerk und auf 'IP-Adresse'/fresh.xml liegt die besagte XML-Datei, welche bei jedem Aufruf die aktuellen Temperaturwerte beinhaltet.

Nun möchte ich auf meinen Rechnern / Handys, welche im Heimnetzwerk verbunden sind, eine auf allen Geräten lokal gespeicherte HTML-Datei direkt öffnen, wo die gewünschten Werte wie in meinem 1. Post frei formatiert und positioniert angezeigt werden sollen. Die besagte HTML-Seite dient nicht einzig und allein der Temperaturüberwachung: ich betreibe auf diese Weise auch mein Video - Live - Überwachungssystem zuhause (ohne Server - bei den Clients werden ohne Zwischenstation direkt die Kamerabilder angezeigt) und da möchte ich gerne auch eine Temperaturanzeige implementieren.

Zu deiner Frage, ja z.B. mit einem simplen Iframe kann ich die XML-Datei auch direkt in einer HTML-Datei anzeigen, aber dann ist das halt die vollständige XML-Datei und nicht die 4 gewünschten Werte isoliert.

Jedenfalls scheitert das Ganze nicht an der Wetterstation, denn wenn ich eine XML-Datei mit den selben Inhalt in den selben Ordner wie die HTML-Datei abspeichere (und den Pfad im code natürlich dementsprechend anpasse) funktioniert es genauso wenig.

Sprich, HTML-Datei und XML-Datei testweise in den selben Ordner, im Code einfach 'datei.xml' eingetragen -> funktioniert leider nicht.

Ich befürchte, dass es da noch ein Missverständnis irgendwo gab:

Hier, damit es keine Missverständlichkeiten gibt:

2 Dateien im selben Ordner lokal auf dem PC abgespeichert:

Datei 1: index.html

Code:

<html>

<main>
<label>Sensor 1</label>
<p>Val = <span id="reihe1_val1"></span></p>
<p>Val2 = <span id="reihe1_val2"></span></p>
<label>Sensor 2</label>
<p>Val = <span id="reihe2_val1"></span></p>
<p>Val2 = <span id="reihe2_val2"></span></p>
</main>
<script>
var r1v1=document.getElementById('reihe1_val1');
var r1v2=document.getElementById('reihe1_val2');
var r2v1=document.getElementById('reihe2_val1');
var r2v2=document.getElementById('reihe2_val2');

fetch ('datei.xml', {  
}).then (function (response) {
console.log(response);
    return response.text();
})
.then (function (data) {
        console.log(data);
    let parser = new DOMParser (),
    xmlDoc = parser.parseFromString (data, 'text/xml');
        root=xmlDoc.getElementsByTagName ('root')[0];
//        r1v1.innerHTML=root.children[0].getAttribute('val');
//        r1v2.innerHTML=root.children[0].getAttribute('val2');
//        r2v1.innerHTML=root.children[1].getAttribute('val');
//        r2v2.innerHTML=root.children[1].getAttribute('val2');
            r1v1.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val');
            r1v2.innerHTML=root.getElementsByTagName('sns')[0].getAttribute('val2');
            r2v1.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val');
           r2v2.innerHTML=root.getElementsByTagName('sns')[1].getAttribute('val2');
}).catch (function (error) {
console.log ("Fehler: bei Auslesen der XML-Datei " + error);
});
</script>

    
</html>

Datei2:

datei.xml

Code:

<root>
<sns id="1" name="Sensor A" type="1" status="0" unit="0" val="25.0" w-min="" w-max="" type2="2" status2="0" unit2="0" val2="44.1" w-min2="" w-max2="" type3="3" status3="0" unit3="0" val3="11.9" w-min3="" w-max3=""/>
<sns id="2" name="Sensor B" type="1" status="0" unit="0" val="21.0" w-min="" w-max="" type2="2" status2="0" unit2="0" val2="54.3" w-min2="" w-max2="" type3="3" status3="0" unit3="0" val3="15.9" w-min3="" w-max3=""/>
<status msp="1" level="2" location="Temperatur" time="01/07/2009 3:26:41"/>
<dbgg stmsp="0" v1="0" v2="0" v3="0" v4="0" v5="0" v6="0" v7="0" v8="0" v9="0" v10="0" v11="0" v12="0" v13="0" v14="0" v15="0" v16="0"/>
</root>

Beim Öffnen der index.html sollen die 4 Werte aus der XML-Datei angezeigt werden.

Danke nochmals und schöne Grüße!

Das Ziel ist zum Greifen nah!!!

Günther

[admin]

Du schreibst das die XML Datei im iFrame angezeigt wird?
Sieht der Code so aus
<iframe src"datei.xml"></iframe>

Oder ist der Pfad anders?

Was zeigt den die Konsole an wenn du meinen Code testest?
Sind da Errors , und was zeigen meine console.log() an in der Konsole?

Irgendwo ist da noch ein Problem was ich noch nicht gefunden habe , weil bei mir geht es jetzt.

Teste mein Code mal mit den Link

Code:

http://192.168.1.100/datei.xml
oder
http://192.168.1.100/fresh.xml