XMLHttpRequest, pobieranie danych z pliku blad

Question

Witam,

pisze apke w QT i chcialem pobrac wspolrzedne  pliku. Dane te sa zapisane:

50.123334;51.123334
49.123334;51.123334
48.123334;51.123334
47.123334;51.123334
46.123334;51.123334
45.123334;51.123334
44.123334;51.123334

I chcialem je zaladowac i pozniej zaznaczyc na mapie. Napisalem wiec funckje do pobierania tych danych:

    function requestToTextFile (file_name, lat_value, long_value, line) { 
        var request = new XMLHttpRequest()
        request.open('GET', file_name)
        request.onreadystatechange = function(event) {
            if (request.readyState == XMLHttpRequest.DONE) {
                line = request.responseText.split('\n')
            }
        }
        request.send()

        for (var i = 0; i < line.length; i ++) {
            if (line[i] == ";") {
                var n = i;

                for (var k = 0; k < n; k ++) {
                    x += line [k];
                } //for
            }// if

            if (line[i] == "\n") {
                var m = i;

                for (var l = m; l !=  "\n"; l ++) {
                    y += line[l]
                } // for
            } // if
        }
        return [x, y];

    }

file_name = nazwa pliku, ktora funkcja dostaje od komponentu FileDialog

lat_value, long_value = to wspolrzedne geograficzne

 

Te dodatkowe petle maja odzielic os siebie wysokos i szerokosc geograficzna, bo sa zapisane w jednej linii, a potrzebuje ich osobno, zeby pozniej moc je przekazac do innego komponentu.

Moglby mi ktos powiedziec, gdzie lezy blad, bo sprawdzajac wartosci jakie dostaje to 0, a dane w pliku sa zapisane. Mysle, ze zle operuje danymi, ktore dostaje z pliku, ale nie jestem pewien

Pozdrawiam DC

Answer 1

To kwestia rozumienia asynchronicznego kodu.

line = request.responseText.split('\n'

Ta linia odpali się po otrzymaniu odpowiedzi na zapytanie...

for (var i = 0; i < line.length; i ++) {

Ale ta linia odpala się od razu po wykonaniu zapytania - a nie po otrzymaniu odpowiedzi. Stąd problem - po wykonaniu zapytania, nie masz jeszcze niczego ciekawego w zmiennej `line`.

Jako, że funkcja polega na asynchronicznym kodzie (zapytanie sieciowe), nie możesz z niej tak po prostu zwrócić wartości, musisz zastosować sposób odpalania kodu "później". Są to, w kolejności od najstarszego do najnowszego, przekazania callbacka, Promise, funkcje async/await (i fetch() zamiast XMLHttpRequest).

Comments

Czyli jezeli dobrze rozumiem, to tworze 2 funkcje, 1 dla wyczytania danych z pliku, to funkcje przekazuje do funkcji call back i wartosci przetworzone z call back, przekazuje dopiero dalej?

---

function requestToTextFile (file_name, line) {
    var request = new XMLHttpRequest()
    request.open('GET', file_name)
    request.onreadystatechange = function(event) {
        if (request.readyState == XMLHttpRequest.DONE) {
            line = request.responseText.split('\n')
        }
    }
    request.send()
}

function obroka_danych (x, y, line) {
    for (var i = 0; i < line.length; i ++) {
        if (line[i] == ";") {
            var n = i;

            for (var k = 0; k < n; k ++) {
                x += line [k];
            } //for
        }// if

        if (line[i] == "\n") {
            var m = i;

            for (var l = m; l !=  "\n"; l ++) {
                y += line[l]
            } // for
        } // if
    }
    return [x, y];
}

function process(callback) {
    if (typeof callback !== 'function') {
             callback = false;
        }

        if (callback) {
             callback();
        }
}

Tak by to wygladalo wtedy, tak ?

---

Um.., to process() nic konkretnego nie robi...

W wersji z callbackami, bardziej coś w stylu

 

function requestToTextFile(file_name, callback) {
    var request = new XMLHttpRequest()
    request.open('GET', file_name)
    request.onreadystatechange = function(event) {
        if (request.readyState == XMLHttpRequest.DONE) {
            line = request.responseText.split('\n')

            // for (var i = 0; i < line.length; i ++) {
            // ... etc
            // obrobka danych

            callback([x, y]);
        }
    }
    request.send()
}

requestToTextFile('file.txt', function(coordinates) {
    console.log(coordinates);
});

 

---

Ale callback, to wtedy funkcja, ktora ma posortowac dane, tzn przypisac do zmiennych, a jako arguent musi przyjac tablice zmiennych, tak?

---

Nie wiem, o jakim sortowaniu mówisz. Dałem tu przykład callbacka:

requestToTextFile('file.txt', function(coordinates) {
    console.log(coordinates); // coordinates to [x, y]
});