Javascript & jQuery: Updating array of objects

Question

I encountered some difficulties while trying to find a good logic to update an array of objects in Javascript.
I obtain the first array by doing a request to the server. I get an array of objects like the following one:

{id: 2, text: 'some text'}  //Object

And this is what the array looks like:

[Object, Object, Object]

These objects are turned into html.
After a while, it does a second request and gets a new list of data objects. How can I synchronize the old list with the new one? What I mean by synchronizing is: remove the objects that don't exist anymore, and the associated html part as well, and insert the nodes that are not currently present in the right position.

<div class="item-id" id="item-id-{id}"><div class="content">{text}</div></div>. This is not relevant for this problem anyway. I know how to synchronize the html, I don't know how to synchronize the arrays. The curly braces are replaced with content requested via ajax. — Andrew
– Andrew, Commented Jul 13, 2012 at 16:49
Ah ok, I sounded like you were asking about the HTML side as well — Mike Park
– Mike Park, Commented Jul 13, 2012 at 16:50

jfriend00 · Accepted Answer · 2012-07-13 16:59:51Z

2

You can find both added and removed items like this:

var origArray = [...];   // assume first set of data is in origArray
var newArray = [...];    // second set of data is in newArray

function makeMap(array, key) {
    var map = {};
    for (var i = 0; i < array.length; i++) {
        map[array[i][key]] = true;
    }
    return(map);
}

function compareArrayToMap(array, map) {
    var item, var results = [];
    for (var i = 0; i < array.length; i++) {
        item = array[i];
        if (!(item.id in map)) {
            results.push(item);
        }
    }
    return(results);
}

// build id map for each array
var origMap = makeMap(origArray, "id");
var newMap = makeMap(newArray, "id");

// find items that have been removed
var removedItems = compareArrayToMap(origArray, newMap);

// find items that have been added
var addedItems = compareArrayToMap(newArray, origMap);

edited Jul 13, 2012 at 16:59

answered Jul 13, 2012 at 16:54

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript & jQuery: Updating array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related