Jak wczytać dane z pliku XML do HTML używając JavaScript?

Odpowiedz Nowy wątek
2018-08-08 09:29
0

Cześć,
oto mój kod: http://jsfiddle.net/kj1n8uqz/8/
Chciałbym, aby użytkownik po kliknięciu przycisku "Wczytaj" mógł wybrać sobie sam który plik chce wczytać. Dany plik jest wczytywany jako XML i uzupełniany w odpowiednie inputy/selecty i wyświetlony na stronie. Proszę nie piszcie "użyj JSON", do tego zadania mam użyć formatu XML. Jeżeli chodzi o nazwę name, które są takie same jak "choice" i "choice1" to niestety ale muszą takie zostać (przydatne jest to w innych elementach tego zadania którego tutaj nie załączyłem).

Plik XML do wczytania:

<?xml version="1.0"?>
<K1>
<punkty name="choice" value="4" checked="false"></punkty>
<punkty name="choice" value="3" checked="false"></punkty>
<punkty name="choice" value="2" checked="false"></punkty>
<punkty name="choice" value="1" checked="false"></punkty>
<punkty name="total" value="0" checked="false"></punkty>
<punkty name="choice1" value="4" checked="false"></punkty>
<punkty name="choice1" value="3" checked="false"></punkty>
<punkty name="choice1" value="2" checked="false"></punkty>
<punkty name="choice1" value="1" checked="false"></punkty>
<punkty name="total1" value="0" checked="false"></punkty>
</K1>
<P1>
<punkty value="5" id="valueOne"></punkty>
<punkty value="0" id="valueOne1"></punkty>
<punkty value="0" id="valueOne2"></punkty>
<punkty value="0" id="valueOne3"></punkty>
<punkty value="3" id="valueOne4"></punkty>
<punkty value="0" id="valueOne5"></punkty>
</P1>

Czy da się to jakoś zrobić? Jeżeli tak to w jaki sposób? Gdzie powinienem szukać rozwiązania? Trochę się z tym męczyłem ale generalnie nie za bardzo wiem od czego zacząć.
Za wszelkie uwagi/wskazówki byłbym naprawdę bardzo wdzięczny! :)

Pozdrawiam

Pozostało 580 znaków

2018-08-10 18:51
2
document.getElementById("demo3").value = xmlDoc.getElementsByTagName('punkty')[2].getAttribute( 'checked' )

W powyższym kodzie, zmieniasz wartość atrybutu value, który nie jest odpowiedzialny za zaznaczanie checbox'a.
Prosty przykład:

document.getElementById("demo3").checked = true// zaznaczy checkboxa
document.getElementById("demo3").checked = false // odznaczy checkboxa

Jest jeszcze pytanie, to czy checkbox mam być zaznaczony czy nie, też masz pobierać z XML ?.
Jeżeli tak, to musisz pobrać wartość atrybut checked z XML:

xmlDoc.getElementsByTagName('punkty')[2].getAttribute( 'checked' );

I w zależności od tego co dostaniesz ustawić input.chcecked na true lub false. Zwróć uwagę na to, że getAttribute( 'checked') zwróci Ci stringa a każdy string oprócz pustego = true;

edytowany 1x, ostatnio: debug, 2018-08-10 18:51

Pozostało 580 znaków

2018-08-10 19:13
0
debug napisał(a):

Jest jeszcze pytanie, to czy checkbox mam być zaznaczony czy nie, też masz pobierać z XML ?.
Jeżeli tak, to musisz pobrać wartość atrybut checked z XML:

xmlDoc.getElementsByTagName('punkty')[2].getAttribute( 'checked' );

I w zależności od tego co dostaniesz ustawić input.chcecked na true lub false. Zwróć uwagę na to, że getAttribute( 'checked') zwróci Ci stringa a każdy string oprócz pustego = true;

Tak, w zależności od tego co siedzi w XML, dany checkbox jest ustawiany na true/false.
Poprawiłem kod i wygląda następująco: https://next.plnkr.co/edit/eYtsAzp1aflIceBf

Mimo tego że w konsoli otrzymuje wyniki true/false oba checkbox'y są zaznaczone. Pytanie dlaczego?
Jeżeli wpisuje wartości true/false ręcznie wszystko działa jak należy.

Checkbox'y są zaznaczone (błędnie) tylko wtedy gdy program odpalam na firefox'ie. Gdy odpalam na Operze czy Chrome nic nie jest zaznaczone. Z czego to wynika?
Czy może problem trzeba obejść w inny sposób?

edytowany 1x, ostatnio: Jumpeq, 2018-08-10 19:14
Tak jak pisałem wyżej, od getAtribute dostajesz string'a. A każdy string oprócz pustego = true, jak byś sobie ręcznie wpisał wartość "false" to checkbox też się zaznaczy. Spróbuj: document.getElementById("demo3").checked = "false"; Nie wiem jak zamienić string na boolen. Wydaje mi się że musiał byś sobie jakąś prostą funkcję napisać do tego, albo użyć JSON.prase("true"), JSON.prase("false"). - debug 2018-08-10 19:27

Pozostało 580 znaków

2018-08-11 14:29
0

Ok, myślę, że poprzedni problem już rozwiązałem.
https://next.plnkr.co/edit/HEH78KZFV1GDo9Mv
Ten kod nie jest do końca uaktualniony, chodzi mi o coś innego. O możliwość wczytania tego pliku przez użytkownika, a nie w kodzie podając jego nazwę. Aby było czytelniej:
Kod, który ładuje się na stronie:

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

function myFunction(xml) {
    var xmlDoc = xml.responseXML;   

    document.getElementById("input1K1S1").value = xmlDoc.getElementsByTagName('punktyk1')[0].getAttribute( 'value' );
    document.getElementById("input1K1S1").checked = (xmlDoc.getElementsByTagName('punktyk1')[0].getAttribute( 'checked' )== 'true');

    document.getElementById("valueOne").value = xmlDoc.getElementsByTagName('punktyp1')[0].getAttribute( 'value' );

}
</script>

A tutaj kod wybrania pliku z dysku:

<script>
function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);
</script>
<input type="file" id="file-input" />

W miejsce "data.xml" chciałem wstawić "readSingleFile" ale to nie pomogło. W jaki sposób to połączyć? W jaki sposób sprawić aby plik, który wybierzemy z pulpitu załadował się tak samo jak "data.xml"?

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0