CODEWITHSUNDEEP
javascriptjqueryarraysslice
Zeebats
Zeebats

Reputation: 480

javascript slice does different things on the same structured arrays

I made a navigation script for a quiz which make use of XML row ids. I was defining an array with a loop and push the i++ value in it to save all row ids. By thinking it over I thought, what if an id is missing by modifying the quiz. So then I made a script that defines the array by row ids. This results in the same array because there isn't missing an id yet. But when I navigate trough the quiz it slices the array in a different way or at least with a different result.

the xml file structure:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <row id="1">
    <question img="images/vuilnisman.png" mp3="audio/WatDoetDeVuilnisman.mp3" ogg="audio/WatDoetDeVuilnisman.ogg">Wat doet de vuilnisman?</question>
    <answer mp3="audio/HijTiltDeVuilnisbakInDeVuilnisauto.mp3" ogg="audio/HijTiltDeVuilnisbakInDeVuilnisauto.ogg">Hij tilt de vuilnisbak in de vuilnisauto.</answer>
  </row>
  <row id="2">
    <question img="images/tandarts.png" mp3="audio/WatZegtDeTandartsVaak.mp3" ogg="audio/WatZegtDeTandartsVaak.ogg">Wat zegt de tandarts vaak?</question>
    <answer mp3="audio/UMagNuSpoelen.mp3" ogg="audio/UMagNuSpoelen.ogg">U mag nu spoelen.</answer>
  </row>
  <row id="3">
    <question img="images/zanger.png" mp3="audio/WatMaaktEenZangerGoed.mp3" ogg="audio/WatMaaktEenZangerGoed.ogg">Wat maakt een zanger goed?</question>
    <answer mp3="audio/AlsHijGevoelKanLatenHoren.mp3" ogg="audio/AlsHijGevoelKanLatenHoren.ogg">Als hij gevoel kan laten horen.</answer>
  </row>
  <row id="4">
    <question img="images/schoonmaakster.png" mp3="audio/WatIsEenGoeieSchoonmaakster.mp3" ogg="audio/WatIsEenGoeieSchoonmaakster.ogg">Wat is een goede schoonmaakster?</question>
    <answer mp3="audio/IemandDieGrondigSchoonmaakt.mp3" ogg="audio/IemandDieGrondigSchoonmaakt.ogg">Iemand die grondig schoonmaakt.</answer>
  </row>
  <row id="5">
    <question img="images/cassiere.png" mp3="audio/WaarMoetEenCassiereGoedOpLetten.mp3" ogg="audio/WaarMoetEenCassiereGoedOpLetten.ogg">Waar moet een cassière goed op letten?</question>
    <answer mp3="audio/DatZeVoldoendeGeldTeruggeeft.mp3" ogg="audio/DatZeVoldoendeGeldTeruggeeft.ogg">Dat ze voldoende geld terug geeft.</answer>
  </row>
</root>

I have a total of 39 rows.

loop to define the array allRowIds:

    rows.each(function() {  
        i++;
        allRowIds.push(i);
        //allRowIds.push($(this).attr('id'));
    });

When I use the i++ as values the navigation works great and when I use the row id values it doesn't.

function to get the first row ids: 

function firstRowIds(allIds, maxRows) { //params array rowIds, int maxRows
    var rowIds = allIds;
    if(rowIds.length>maxRows) {
        rowIds = allIds.slice(0, maxRows);
    }
    return rowIds;
}

function to get the next row ids:

function nextRowIds(allIds, currentIds, maxRows) {
    var start = currentIds[maxRows-1],
        end = start + maxRows,
        nextIds = [];
    return nextIds = allIds.slice(start, end);
}

function to get the previous row ids:

function prevRowIds(allIds, currentIds, maxRows) {
    var end = currentIds[0]-1,
        start = end - maxRows,
        prevIds =[];
        return prevIds = allIds.slice(start, end);
}

some chrome console data when allRowIds array is defined with the row id values:

At start:
allRowIds array 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39

currentIds array at start, retrieved whit the firstRowIds function
1,2,3,4,5,6,7,8,9,10
this are 10 ids becuase maxRows is set to 10.

When clicked on next:

currentIds 
11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39
This is so wrong it should be 11 - 20.

nextIds array 21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39
this is incorrect too this should be 21 - 30

chrome console data when array is defined by the i++ value:

At start:
allRowIds array 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39

currentIds array at start, retrieved whit the firstRowIds function
currentIds 1,2,3,4,5,6,7,8,9,10 
this are 10 ids becuase maxRows is set to 10.

When clicked on next:
currentIds 11,12,13,14,15,16,17,18,19,20
This is correct

nextIds array 21,22,23,24,25,26,27,28,29,30
this is also correct

Can someone tell me why this is happening and how to fix it. Thanks.

Upvotes: 0

Views: 129

Answers (1)

Pavel Gruba
Pavel Gruba

Reputation: 2049

Values of almost all attributes are strings.

So, when you populate your ids list from 'id' attribute your list contains strings '1','2', etc.

Your calculated next/prev id (end parameter of slice function) is wrong.

function nextRowIds(allIds, currentIds, maxRows) {
    var start = currentIds[maxRows-1],
        end = start + maxRows,
        nextIds = [];
    return nextIds = allIds.slice(start, end);
}

In this code your end is not 10, 20 etc. but '91', '191', etc.

You can change your code to parse values from attributes, like that:

rows.each(function() {  
    allRowIds.push(+($(this).attr('id')));
});

Upvotes: 2

Related Questions