Is there a way to map a value in an object to the index of an array in javascript?

Question

Prepending that a solution only needs to work in the latest versions of Chrome, Firefox, and Safari as a bonus.

-

I am trying to use an associative array for a large data set with knockout. My first try made it a true associative array:

[1: {Object}, 3: {Object},...,n:{Object}]

but knockout was not happy with looping over that. So I tried a cheating way, hoping that:

[undefined, {Object}, undefined, {Object},...,{Object}]

where the location in the array is the PK ID from the database table. This array is about 3.2k items large, and would be iterated over around every 10 seconds, hence the need for speed. I tried doing this with a splice, e.g.

$.each(data, function (index, item) {
    self.myArray.splice(item.PKID, 0, new Object(item));
}

but splice does not create indices, so since my first PKID is 1, it is still inserted at myArray[0] regardless. If my first PK was 500, it would start at 0 still.

My second thought is to initialize the array with var myArray = new Array(maxSize) but that seems heavy handed. I would love to be able to use some sort of map function to do this, but I'm not really sure how to make the key value translate into an index value in javascript.

My third thought was to keep two arrays, one for easy look up and the other to store the actual values. So it combines the first two solutions, almost, by finding the index of the object in the first example and doing a lookup with that in the second example. This seems to be how many people manage associative arrays in knockout, but with the array size and the fact that it's a live updating app with a growing data set seems memory intensive and not easily manageable when new information is added.

Also, maybe I'm hitting the mark wrong here? We're putting these into the DOM via knockout and managing with a library called isotope, and as I mentioned it updates about every 10 seconds. That's why I need the fast look up but knockout doesn't want to play with my hash table attempts.

-- clarity edits: so on initial load the whole array is loaded up (which is where the new Array(maxLength) would go, then every 10 seconds anything that has changed is loaded back. That is the information I'm trying to quickly update.

-- knockout code:

<!-- ko foreach: {data: myArray(), afterRender: setInitialTileColor } -->
    <div class="tile" data-bind="attr: {id: 'tileID' + $data.PKID()}">
        <div class="content">
        </div>
    </div>
<!-- /ko -->

Then on updates the hope is:

$.each(data.Updated, function (index, item) {
    var obj = myModel.myArray()[item.PKID];
    //do updates here - need to check what kind of change, how long it's been since a change, etc
}

Answer 1

Here is a solution how to populate array items with correct indexes, so it doesn't start from the first one (0 (zero) I meant)

just use in loop

arr[obj.PKID] = obj;

and if your framework is smart (to use forEach but not for) it will start from your index (like 500 in case below)

http://jsfiddle.net/0axo9Lgp/

var data = [], new_data = [];

// Generate sample array of objects with index field
for (var i = 500; i < 3700; i++) {
    data.push({
        PKID: i,
        value: '1'
    });
}

data.forEach(function(item) {
    new_data[item.PKID] = item;
});

console.log(new_data);
console.log(new_data.length); // 3700 but real length is 3200 other items are undefined