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-08 14:34
2

Możesz do tego wykorzystać AJAX. Tutaj masz przykład

Pozostało 580 znaków

2018-08-08 16:51
0
jawlo napisał(a):

Możesz do tego wykorzystać AJAX. Tutaj masz przykład

Bardzo pomocny link, dzięki! Tyle, że tutaj przy wczytaniu tworzy się tabelę. W jaki sposób wczytać dane w już istniejące input'y/select'y?

Pozostało 580 znaków

2018-08-08 22:22

Dopiero się uczę JS i do AJAX/XML/JSON jeszcze nie doszedłem. Ale kolega wyżej podał bardzo pomocny link. Przeanalizujmy go. (Mam nadzieje, że ktoś mnie poprawi jak coś źle opiszę).

// krótko mówiąc to ta funkcja pobiera dokument, ścieżkę dokumentu podajesz w drugim atrybucie xhttp.open
function loadDoc() {
  var xhttp = new XMLHttpRequest(); // Tworzy zmienna dla zapytania HttpXML
  xhttp.onreadystatechange = function() { // Podpinamy się pod zdarzenie  on ready state change tego zapytania, czyli kiedy status gotowości się zmienni... 
    if (this.readyState == 4 && this.status == 200) { // domyślam się, że ten warunek sprawdza czy zapytanie jest już gotowe?, załadowany do zmiennej xhttp
      myFunction(this); // jeżeli jest, to wykonaj jakość funkcję której przekażesz to zapytanie
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true); // utwórz/skonfiguruj zapytanie  ?
  xhttp.send(); // wyślij zapytanie do serwera
}
 
//następnie w funkcji 'myFunction(xml)', obrabiasz, wyciągasz sobie dane z dokumentu xml
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML; // tutaj do zmiennej xmlDoc pobierasz sobie swój dokument xml
  //dalej z tego co widzę operujesz jak na elementach DOM(HTML). Czyli wyciągasz informację za pomocą //getElement, querySelector, child, parent
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD"); 
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

Zwróć uwagę jaką wygląda ten przykładowy plik XML:

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>

P.S: Z tego co wiem to AJAX nie będzie działał lokalnie, musisz postawić sobie jakiś serwer żeby się z tym bawić ?,

Pozostało 580 znaków

2018-08-08 22:34
0
debug napisał(a):

Dopiero się uczę JS i do AJAX/XML/JSON jeszcze nie doszedłem. Ale kolega wyżej podał bardzo pomocny link. Przeanalizujmy go. (Mam nadzieje, że ktoś mnie poprawi jak coś źle opiszę).

Generalnie nie musisz wyjaśniać po kolei co się dzieje, w miarę to jakoś ogarniam.

P.S: Z tego co wiem to AJAX nie będzie działał lokalnie, musisz postawić sobie jakiś serwer żeby się z tym bawić ?,

Testowałem ten kod bez xamppa i działa bez problemu.

Napisałem podobną wersję co jest na w3schools: https://next.plnkr.co/edit/gG[...]utm_campaign=next&preview
Niestety wsadzenie tego w ten sposób do input'a nie daje żadnych efektów. W jaki sposób można to zrobić?

Ok. Nie działa Ci, bo wklejasz to do input.innerHTML. a powinieneś do input.value - debug 2018-08-08 22:45

Pozostało 580 znaków

2018-08-09 08:22
1

Zmień innerHTML na value

document.getElementById("demo").value = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
 

Pozostało 580 znaków

2018-08-10 16:42
0

Nie miałem za bardzo czasu i dopiero dzisiaj mogłem przy tym posiedzieć.

Faktycznie po zastosowaniu .value, dane dobrze się ładują, jednak w jaki sposób z tego pliku XML:

<test>
<K1>
<punkty name="choice" value="4" checked="false">4</punkty>
<punkty name="choice" value="3" checked="false"></punkty>
<punkty name="choice" value="2" checked="false"></punkty>
<punkty name="choice" value="2" checked="false"></punkty>
<punkty name="choice" value="1" checked="true"></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="true"></punkty>
<punkty name="total1" value="0" checked="false"></punkty>
</K1>
<P1>
<punkty value="8" id="valueOne"></punkty>
<punkty value="0" id="valueOne1"></punkty>
<punkty value="0" id="valueOne2"></punkty>
<punkty value="8" id="valueOne3"></punkty>
<punkty value="0" id="valueOne4"></punkty>
<punkty value="0" id="valueOne5"></punkty>
</P1>
</test>

załadować dane do odpowiednich checkboxów czy select'ów, tak aby dany checkbox/select był zaznaczony? Jak widać wartość do input: https://next.plnkr.co/edit/rSzSlZuFRpmykZJG
ładuje się tylko wtedy gdy między

<punkty>4</punkty> 

jest wstawiona jakaś wartość, wartości

value=4 

nie uznaje.

edytowany 2x, ostatnio: Jumpeq, 2018-08-10 16:52

Pozostało 580 znaków

2018-08-10 17:56
0

A gdzie masz funkcję checkTotal()?

Pozostało 580 znaków

2018-08-10 18:02
0
jawlo napisał(a):

A gdzie masz funkcję checkTotal()?

Tutaj:

    var sum = 0;
        function checkTotal() {
            document.myForm.total.value = '';
            var result = [0];
            for (i=0;i<document.myForm.choice.length;i++) {
              if (document.myForm.choice[i].checked) {
                  result.push(document.myForm.choice[i].value);                
              }
              sum = Math.max.apply(null, result);
            }
            document.myForm.total.value = sum;
            document.Form.total.value = document.myForm.total.value;
        }
        var sum1 = 0;
            function checkTotal1() {
                document.myForm.total1.value = '';
                var result = [0];
                for (i=0;i<document.myForm.choice1.length;i++) {
                  if (document.myForm.choice1[i].checked) {
                      result.push(document.myForm.choice1[i].value);                    
                  }
                  sum1 = Math.max.apply(null, result);
                }
                document.myForm.total1.value = sum1;
                document.Form.total1.value = document.myForm.total1.value;
            }
function oblicz(){            
    document.Form.totalResult.value=document.myForm.total.value*document.myForm.total1.value;
}

Ale nie zamieszczałem jej gdyż w napotkanym problemie nie jest ona potrzebna a powoduje kod bardziej nieczytelnym.

Pozostało 580 znaków

2018-08-10 18:12
1
<punkty name="choice" value="3" checked="false"></punkty>

Potraktuj to jak by to był elmente DOM, tak samo jak byś miał np.

<input id="demo1" name="choice" type="checkbox" value="4">

id, name, type, value - są to atrybuty elementu, są dwa sposoby żeby wyciągnąć takie atrybuty pierwszy to element.getAttribute('nazwa atrybutu') link do strony gdzie jest to wytłumaczone https://www.w3schools.com/jsref/met_element_getattribute.asp
Drugi sposób to: element.attributes[i].value. gdzie i określa który atrybut chcesz np w przypadku twojego elementu punkty to: 0 - name, 1 - value, 2 - checked

w praktyce u ciebie wyglądało by to tak:

const ele = xmlDoc.getElementsByTagName("punkty")[0];
    ele.attributes[1].value; // pobierze wartość atrybutu value;
//lub
    ele.getAttribute('value'); // pobierze wartość atrybutu value;

Pozostało 580 znaków

2018-08-10 18:21
0
debug napisał(a):

w praktyce u ciebie wyglądało by to tak:

const ele = xmlDoc.getElementsByTagName("punkty")[0];
    ele.attributes[1].value; // pobierze wartość atrybutu value;
//lub
    ele.getAttribute('value'); // pobierze wartość atrybutu value;

No ok, dzięki! Zrobiłem to tak:
https://next.plnkr.co/edit/VHsLOHVtSD8eCxEq?preview

Dlaczego checkbox'y nie są zaznaczone? Czy może to trzeba zrobić w jakiś inny sposób. Jeżeli tak, to jaki?

edytowany 1x, ostatnio: Jumpeq, 2018-08-10 18:21
Za to czy checbox jest zaznaczony czy nie, odpowiada atrybut 'checked', który przyjmuje wartość boolen(true/false) - debug 2018-08-10 18:31
No to wiem, ale w jaki sposób to pobrać, w taki? document.getElementById("demo3").value = xmlDoc.getElementsByTagName('punkty')[2].getAttribute( 'checked' ) Bo jeżeli tak to ten sposób nie działa. Nie za bardzo wiem w jaki sposób sprawić aby po wczytaniu checkboxy zostały zaznaczone... - Jumpeq 2018-08-10 18:39

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