[JS] Script oneindig uitvoeren adhv JSON data

[WoBBeL]

Voor een simpel lichtkrant gevalletje heb ik een script wat elke keer opnieuw door mijn JSON heen moet loopen met inachtneming van de tijd in de JSON data.

Mijn JSON data bestaat uit een pagina ID en een tijd hoe lang deze pagina getoond moet worden. Ik heb hieronder een uitgekleede versie maar er gaat iets basaals elke keer mis Ik zit ergens met een giga denkfout maar ik krijg het niet verholpen

Hij moet een ajax request doen naar ID 8 en deze pagina 2 seconden tonen (laadtijd nemen we even niet mee)
Daarna moet hij pagina ID 6 opvragen en deze voor 4 seconden tonen
Daarna moet hij pagina ID 7 opvragen en deze voor 6 seconden tonen
Daarna moet hij pagina ID 9 opvragen en deze voor 8 seconden tonen
Daarna moet hij pagina ID 10 opvragen en deze voor 10 seconden tonen

Echter gaat het bij de laatste pagina mis (hij wordt getoond met de tijd van de 1e pagina met ID 8 ) en bij de 2e ronde wordt ID 8 zelfs helemaal overgeslagen.

In de code zit ook console.log en de output staat onder de code.

JavaScript:

var jsonData = [ 
    { "id": "8", "tijd": "2" },
    { "id": "6", "tijd": "4" },
    { "id": "7", "tijd": "6" },
    { "id": "9", "tijd": "8" }, 
    { "id": "10", "tijd": "10" }
];
        
var paginaIndex = 0;

function URLophalen(id) {
    $.ajax({
        url: '/ajax_player.php?pid=' + id,
        type: 'GET',
        dataType: 'html',
        success: function(data) {

            $("#content_inhoud").html(data);

            if (paginaIndex < (jsonData.length-1)) {
                console.log("Niet de laatste - ID: " + jsonData[paginaIndex].id + ", Tijd: " + jsonData[paginaIndex].tijd + ', paginaIndex: ' + paginaIndex)
                setTimeout(volgendeURLophalen, jsonData[paginaIndex].tijd*1000);
            } else {
                paginaIndex = 0;
                console.log("De laatste - ID: " + jsonData[paginaIndex].id + ", Tijd: " + jsonData[paginaIndex].tijd + ', paginaIndex: ' + paginaIndex)
                setTimeout(volgendeURLophalen, jsonData[paginaIndex].tijd*1000);
            }
            paginaIndex++;

        },
        error: function(xhr, status, error) {
            console.error('Fout: ' + error);
        }
    });
}

function volgendeURLophalen() {
    if (paginaIndex < jsonData.length) {
        URLophalen(jsonData[paginaIndex].id);
    }
}

volgendeURLophalen();

console output

code:

Niet de laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2

[ Voor 0% gewijzigd door WoBBeL op 28-10-2023 19:28 . Reden: juiste code tag ]

[ocwil]

Regel 24 mag je even na regel 26 zetten dan is je probleem verholpen

En de index++ mag binnen de if anders begin je de tweede ronde op 1 in plaats van 0

[ Voor 39% gewijzigd door ocwil op 28-10-2023 19:34 ]

[WoBBeL]

@ocwil dan komen we iets verder, dan slaat ie echter ID 8 (de 1e pagina) in de nieuwe volgorde over.

code:

Niet de laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 10, Tijd: 10, paginaIndex: 4
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 10, Tijd: 10, paginaIndex: 4
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3

[edit]
je ninja edit over t hoofd gezien

[edit2]

Dat was m!!! 3 uur verder Thanks voor je hulp.

code:

Niet de laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 10, Tijd: 10, paginaIndex: 4 
Niet de laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1
Niet de laatste - ID: 7, Tijd: 6, paginaIndex: 2
Niet de laatste - ID: 9, Tijd: 8, paginaIndex: 3
De laatste - ID: 10, Tijd: 10, paginaIndex: 4 
Niet de laatste - ID: 8, Tijd: 2, paginaIndex: 0
Niet de laatste - ID: 6, Tijd: 4, paginaIndex: 1

[ Voor 33% gewijzigd door WoBBeL op 28-10-2023 19:39 ]

[ocwil]

Geen probleem, had een snel antwoord getypt en toen bedacht ik me opeens dat er 2 problemen waren en dat de eerste fix niet beide oploste.

[BernardV]

Fijn dat het opgelost is!
Wat ik wel zag is dat de code wat compacter kan en in mijn ogen dan ook leesbaarder is.

code:

var jsonData = [ 
    { "id": "8", "tijd": "2" },
    { "id": "6", "tijd": "4" },
    { "id": "7", "tijd": "6" },
    { "id": "9", "tijd": "8" }, 
    { "id": "10", "tijd": "10" }
];
        
var paginaIndex = 0;

function URLophalen() {
    $.ajax({
        url: '/ajax_player.php?pid=' + jsonData[paginaIndex].id,
        type: 'GET',
        dataType: 'html',
        success: function(data) {
            $("#content_inhoud").html(data);

            console.log("ID: " + jsonData[paginaIndex].id + ", Tijd: " + jsonData[paginaIndex].tijd + ', paginaIndex: ' + paginaIndex);

            var time = jsonData[paginaIndex].tijd*1000; //Time even opslaan, want hieronder verhogen we de index en zou de timeout op de oude manier de tijd van de nieuwe pagina pakken.

            paginaIndex++;
            paginaIndex %= jsonData.length; //Modulo (restdeling), zodat if < jsonData.length niet nodig is.

            setTimeout(URLophalen, time);
        },
        error: function(xhr, status, error) {
            console.error('Fout: ' + error);
        }
    });
}

URLophalen();