Javascript: read Array of Objects

Question

I have two .js files. In one, I want to fill an array with objects, that have two properties. In the other file I want to loop over the array and work with the objects properties.

My coding looks like this:

file1.js

var selection = new Object();
selection.column = "";
selection.term = "";

var selectionContainer = new Array();
...
press: function(){
 var i;
 for (i=1;i<=selectionContainer.length;i++){
  selection = selectionContainer[i];
  alert("Search Term: " + selection.column + selection.term);
 }
}

file2.js

change: function(oEvent){
 selection.column = "someText";
 selection.term = "someOtherText";
 selectionContainer[nrOfEntries] = selection;
}

When executing the javascript I receive 'Uncaught TypeError: Cannot read property 'column' of undefined'.

What am I doing wrong?

Answer 1

In JS arrays begin with index 0 , and the last element will be at the .length - 1 . So you need to change your loop to start at 0 and use < rather than <= :

for (i=0;i<selectionContainer.length;i++){

The error you received, Uncaught TypeError: Cannot read property 'column' of undefined' , is because when your counter got up to selectionContainer.length you tried to read an element just past the end of the array, which in itself doesn't give an error, it just returns undefined , but then undefined.column gives the error.

But also - though it's a bit hard to tell because I'm not sure about the code you don't show - in the code you do show it looks like you are filling your array with multiple references to the same object, because in your change function you update the properties of the existing selection object and then put a reference to that object into the array. I believe you need to create a new object at that point:

change: function(oEvent){
  selection = new Object();
  selection.column = "someText";
  selection.term = "someOtherText";
  selectionContainer[nrOfEntries] = selection;
}

...but an easier way is to just use an object literal:

change: function(oEvent){
  selectionContainer[nrOfEntries] = { column : "someText", term : "someText" };
}

You don't say what nrOfEntries is, but you don't need a separate variable to keep track of the number of elements in the array when JS provides you with the .length property. In any case if you're just trying to add to the end of the array you can do this:

  selectionContainer.push( { column : "someText", term : "someText" } );

In general it is considered best practice to use array literals and object literals to create empty arrays and objects, so the beginning of your code could be:

var selection = {};
...
var selectionContainer = [];

Answer 2

First of all - why you start the loop from the index 1. Isn't it correct if you start with the first element:

for (var i=0;i<selectionContainer.length;i++) {

Second, it is better to use the push method to add elements to the array. For example:

selectionContainer.push(selection);
nrOfEntries = selectionContainer.length;

If that doesn't help then we need more information about nrOfEntries and how it is changed.

Answer 3

    change: function(oEvent){
    selection.column = "someText";
    selection.term = "someOtherText";
    selectionContainer[nrOfEntries] = selection;    
}

Change it to

    change: function(oEvent) {
        selectionContainer.push({column : 'someText', term : 'someOtherText});
}

You don t need i anymore, and you avoid to forget to fill selectionContainer[0]