Given I have an array in Javascript, with values as such;

0     => 0x0000FF
1200  => 0x00CCFF
28800 => 0xFF0AFF
36000 => 0xFFFFFF

How can I determine which elements a given index value falls between? With the previous example, if I have the value 31073, I need to retrieve 28800 => 0xFF0AFF and 36000 => 0xFFFFFF

Given I have an array in Javascript, with values as such;

0     => 0x0000FF
1200  => 0x00CCFF
28800 => 0xFF0AFF
36000 => 0xFFFFFF

How can I determine which elements a given index value falls between? With the previous example, if I have the value 31073, I need to retrieve 28800 => 0xFF0AFF and 36000 => 0xFFFFFF

• javascript
• arrays

• You mean an associative array? myarray['0'] = 0x0000FF; ? – stef Commented Jan 2, 2011 at 21:06
• Would be easy with an object. Much more difficult with an array. – Felix Kling Commented Jan 2, 2011 at 21:08
• @Tomcat: Is there a predictable order to the array indices? – user113716 Commented Jan 2, 2011 at 21:11
• @stef; No, numerically indexed. @Felix Kling; I was considering that, how would I go about acplishing that? – Dan Lugg Commented Jan 2, 2011 at 21:11
• @Felix: How would it be acplished with an object, given that there's no guaranteed ordering of the properties? – user113716 Commented Jan 2, 2011 at 21:12

3 Answers 3

There's no "built-in" way to acplish this with Javascript's sparse arrays. The simplest way to do this for arbitrary sparse indexes while maintaining some efficiency is to keep another lookaside sorted array of the indexes into the main array. Then you can walk the lookaside list to find the right neighbor indexes, and go back to the main array to get their values.

If your array will be huge or accesses need to be faster than O(items), you could look into various tree structures for the lookaside object.

Here's one way that simply uses a couple while() loops with no body.

It assumes the starting point will always be in between. You'll need a couple of quick additional tests if that's not the case.

Also, I wasn't sure what should happen if the starting point is directly on a color, so I didn't account for that.

Example: http://jsfiddle/tcVxP/4/

var num = 31234,
    curr = num,
    prev,
    next;

while( !colors[--curr] && curr );
prev = colors[curr];

curr = num;
while( !colors[++curr] );
next = colors[curr];

I just wanted to follow up here;

Thanks to both quixoto and patrick dw for your detailed ments and answers. I have however, gone with a slightly different solution. While I wanted to maintain my initial approach of using a one dimensional array, it's much easier and efficient from what I can see, to add another dimension as shown below. The array used here does exhibit predictability, but that may not be the case once the project is finalized.

var colors = [  
    [0,     '121D4A'],
    [10800, '000000'],
    [21600, 'FF5900'],
    [32400, 'D3EEF0'],
    [43200, '7DCDFF'],
    [54000, '7DA6FF'],
    [64800, 'FF5900'],
    [75600, '31428C'],
    [86399, '121D4A'],
];

function gradientStop(color1, color2, gradStop){
    var r = Math.floor(gradStop * parseInt(color2.substr(0, 2), 16) + (1 - gradStop) * parseInt(color1.substr(0, 2), 16)).toString(16);
    var g = Math.floor(gradStop * parseInt(color2.substr(2, 2), 16) + (1 - gradStop) * parseInt(color1.substr(2, 2), 16)).toString(16);
    var b = Math.floor(gradStop * parseInt(color2.substr(4, 2), 16) + (1 - gradStop) * parseInt(color1.substr(4, 2), 16)).toString(16);
    return (r.length < 2 ? '0' + r : r) + (g.length < 2 ? '0' + g : g) + (b.length < 2 ? '0' + b : b);
}

function getColor(colors, currentIndex){
    for(var i = 0, m = colors.length; i < m; i++){
        if(currentIndex >= colors[i][0]){
            if(typeof(colors[i + 1]) !== 'undefined'){
                if(currentIndex <= colors[i + 1][0]){
                    return gradientStop(colors[i][1], colors[i + 1][1], (currentIndex - colors[i][0]) / (colors[i + 1][0] - colors[i][0]));
                }
            }
        }
    }
}

And also; Yes Hemlock it was an expansion on my question at Programmatic gradient stops with Javascript, hence the gradientStop() function.