Mimic the structure of a javascript array object

Question

So I've been interested in using the splice function on my HTMLCollection Object.

<html> 
  <head>
    <title>Collections</title>
  </head>
  <body>
    <div id="list">
      <div style="background-color:lightblue">item1</div>
      <div>item2</div>
      <div style="background-color:lightblue">item3</div>
    </div>
    <button onclick="BtnColourItem2_Click()">Colour Item2</button>

Lets assume the list was generated by a server side language like ASP.Net

function BtnRemoveItem2_Click()
{
    var list = document.getElementById("list");
    list[1].style.backgroundColor = "LightBlue"
    //list.splice(1,1)//goal colour the second item and recolour the others to white 
    for(var item in list)
        list[item].style.backgroundColor = "white";
}

Now if this was an array the splice method would exist and I could use it.

note: I've accomplished the functionality by pushing the seperate divs into an actual array to splice the one not needed.

I have tried this:

list.trunc = [].splice;
list.trunc(1, 1);
for(item in list)
    console.log(item.innerText);
//results were
//item1
//item2
//item3

Gave me no errors but didnt work. So I threw this together:

newList = new Object();
newList.trunc = [].splice;
newList.push = [].push;
newList.push(list[0].innerText);
newList.push(list[1].innerText);
newList.push(list[2].innerText);
newList.splice(1,1);
console.log(newList);
//outputs { 0 : "item1" , 1 : "item3"}

I found that quite cool. So here is my question. How do you structure an object Array-like enough to get the splice function to work without need to use the push or methods used to enter Array items?

you could set your object to extend array. var myArrayLike = Object.create(Array.prototype); This will give myArrayLike all the methods of Array — atmd
– atmd, Commented Apr 17, 2015 at 13:51
@atmd sounds like that would work. Ill give it shot. still looking for the data structure of the array though. — Sarfaraaz
– Sarfaraaz, Commented Apr 17, 2015 at 13:55

JLRishe · Accepted Answer · 2015-04-17 14:02:58Z

4

Most of the time, the easiest thing to do with an array-like object when you want actual array functionality is to call slice() on it to create an array:

var array = Array.prototype.slice.call(arrayLikeObject);

Once you do that, you'll have an actual array and can do whatever you want with it.

You cannot add or remove elements on an actual HTMLCollection. It doesn't allow modification like that, and that's why calling splice() on it doesn't work. But if you create an array from it as shown above, you can modify the array as needed.

As Paul S. notes below in the comments, an HTMLCollection is "live" and is dynamically updated to reflect the current state of the DOM. That's why you can't manually change it. If you place it into an array, the array will not dynamically update to accommodate DOM changes, but most of the time I think one would want an array to stay still and not change underneath one's nose.

edited Apr 17, 2015 at 14:02

answered Apr 17, 2015 at 13:55

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

5 Comments

Paul S. Over a year ago

Might be worth also mentioning that a HTMLCollection or NodeList can be live, but the Array created by slicing it will not be live

Sarfaraaz Over a year ago

I like it. quicker than the way I used to turn it into an array. is there no structure that splice will work on without using back end functions to turn it into an array though?

JLRishe Over a year ago

@Sarfaraaz What do you mean by "is there no structure that splice will work on"? I don't understand what you're getting at. You can't use splice on an HTMLCollection because it is read-only.

Paul S. Over a year ago

@Sarfaraaz splice will work on Array-like Objects as long as you can change it's indexed properties; i.e. var obj = {0: 'a', 1: 'b', 2: 'c', length: 3}; Array.prototype.splice.call(obj, 1, 1); obj; works. However, this is not true for a HTMLCollection or NodeList, document.body.childNodes[0] = 0; document.body.childNodes[0] === 0; // false

Sarfaraaz Over a year ago

@JLRishe I understand the HTMLCollection wont work because the resources are tied into browser and its memory. What I am looking for is a way to add the built in array function to an object similar to Paul S.'s method except I want the object to contain a reference within itself so if you cycle through the object with "for ... in" the method reference shows up. I am liking these work arounds though thanks Paul S and JLRishe

Sarfaraaz · Accepted Answer · 2015-04-20 08:27:35Z

Found it. Thanks @Paul S It seems Jscript will allow the call of the splice function on an object. I tried that before like this:

var obj = new Object();
obj[0] = "item1";
obj[1] = "item2";
obj[2] = "item3";
obj.trunc = [].splice;
obj.trunc(1,1);
console.log(obj);
//outputs
//Object {0: "item1", 1: "item2", 2: "item3", trunc: function}

but I did not add the length property, so adding to the code above:

var countNum = 0;
for (var item in obj)
    !isNaN(parseFloat(item)? countNum++ : "";
obj.length = countNum;//number of num-indexed properties 
obj.trunc(1,1);
console.log(obj);
//outputs
//Object {0: "item1", 1: "item3", trunc: function}

so as long as the structure is number-index and has a length property the splice function will work on it.

Therefore the data structure of an array in javascript is reliant on the properties :

number index
length

Collectives™ on Stack Overflow

Mimic the structure of a javascript array object

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related