Question

so I’ve been working on a project in Javascript that takes in objects the user provides and represents them in HTML. Right now they are represented in memory as an array, and in the display as a separate array. After integrating some code changes, problems have arisen in that the display array seems to be having troubles removing it’s contents, thus things that should be removed don’t disappear from the view.

Declaring lists:

this.divList = gDocument.getElementById( element );
this.objectList = []; 

Adding an object to the lists:

addObject = function (address, type){
    var newDiv = gDocument.createElement("div");
    this.divList.appendChild( newDiv );

    var d = this.createObject( newDiv, address, type );

    if (undefined != d)
    {
        this.objectList.push(d);
    }
 }

The divList accurately reflects the objectList until any changes are made to the objectList at runtime. When restarted, the lists are in sync once again. When I tried to fix it, things were very complicated. I’m wondering if there is a better way to design such an idea (the object model and the graphical representation). Any comments would be helpful, thanks.

Answer 1

Question vagueness aside, my recommendation would be to store one list, not two, in memory. Each list element is an object with all the necessary data you need for that particular abstract “object” (the ones that “the user provides”). Something like this:

this.divList = gDocument.getElementById(element);
this.masterList = [];
var i,
    len = this.divList.length;
for (i = 0; i<len; i++)
{
    this.masterList.push({
        elt: this.divList[i],
        obj: /* however you'd create the object in this.objectList  */
    });
}

---

Edit: your addObject function would be changed to something like this:

addObject = function (address, type)
{
    var newDiv = gDocument.createElement("div"),
        newObj = {elt: newDiv,
                  obj: this.createObject(newDiv, address, type)};
    this.masterList.push(newObj);
    this.divList.appendChild(newDiv);
 }

You should store a reference to the HTML element that you’re appendChild()ing to. You’re already doing this – but when you need to manipulate the individual elements (say, remove one), use the masterList instead:

removeObject = function (i)
{
    var toRemove = this.masterList.splice(i, 1);
    if (toRemove)
    {
        this.divList.removeChild(toRemove.elt);
    }
}

See also Array.splice().