Filling an array with objects in Javascript

Question

Currently I have an issue with filling an array which I call input in my code with the object which I call athlete in my code.The object which is called athlete is instantiated using several other arrays. I have attached a jsfiddle link to this post which is basically a simplified version with the same issue. I know the logic might look redundant but that is because it is necessary for this example(the actual logic will work with user input).

My issue is that I am filling an array with new Athlete objects, yet I cannot access a specific property of an object in the array.

I am new to working with objects so I'd appreciate any advice on how to make this work. I have added a last line of code to display my input array.

var input = new Array();
var girl=[1,1,1,1];
var boy = [1,1,1,1];
var balleyscore = [100,400,320,50];
var boyHeight = [72,68,65,75];
var girlHeight=[60,57,65,55];
var boyAge = [19,32,22,25];
var girlAge = [20,15,32,18];
//the above are all generate from user inputs
// they go into the object constructor below
function athlete(girl, boy,balleyscore, height, age){
this.girl=girl;
this.boy=boy;
this.balleyscore=balleyscore;
this.height=height;
this.age = age;
};
function insertToObjectArray()
{  
  var j=0;                
  var i=0;  //insert all our data into one array of the load object
    for(j = 0; j < girl.length;j++)
    {
      input[j]= new athlete(true,false,balleyscore[j],girlHeight[j],girlAge[j]);
    }
    for(j = girl.length; j <=girl.length+boy.length;j++)
    {
      input[j]= new athlete(false,true,0,boyHeight[i],boyAge[i]);
      i++;
    }
};
insertToObjectArray();

document.getElementById("demo").innerHTML=input;

http://jsfiddle.net/qC5j4/1/

I cannot access a specific property of an object in the array. is not enough to debug the program. :( — thefourtheye
– thefourtheye, Commented Jan 19, 2014 at 9:32
And which property are you trying to access? What exactly does not work as you expect it? — Felix Kling
– Felix Kling, Commented Jan 19, 2014 at 9:35
What does not work is that my data is not being stored properly into the properties of the athlete object. If you output input[1].age for example it is undefined — bala
– bala, Commented Jan 19, 2014 at 9:44

Sten Muchow · Accepted Answer · 2014-01-19 10:02:45Z

1

To access a property of an object in your array input:

input[0].age

this will allow you to access the first athlete's age

can also be accessed like so:

input[0]['age']

Either way they will both display 20 as the age of the first athlete in the array.

Check it out by console.log(input) in the debugger and then you can play with the data structure.

Ex:

document.getElementById("demo").innerHTML=input[0].age;

answered Jan 19, 2014 at 10:02

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

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

Comments

RoyTheBoy · Accepted Answer · 2014-01-19 09:47:27Z

1

Not really sure of your problem, here I have updated your fiddle to display the height property of your athletes by adding the line

output[j]= input[j].height

fiddle

answered Jan 19, 2014 at 9:47

RoyTheBoy

6581 gold badge6 silver badges15 bronze badges

3 Comments

bala Over a year ago

Why can't I just display the height using input[j].height?

bala Over a year ago

I need to be able to access these properties for calculations later, putting the properties back into another array is defeating the purpose of creating an object.

RoyTheBoy Over a year ago

you can do this, in your fiddle you have an array of objects which you wrote to the screen , so you got 'Object' displayed, I just changed to output to the screen to be Object.property so that the property was displayed

Shhade Slman · Accepted Answer · 2014-01-19 09:53:16Z

1

Your athlete object should be for example:

function athlete(age)
{
  this.age = age;
}

var item = new athlete(10);
item.age;//10

answered Jan 19, 2014 at 9:53

Shhade Slman

2482 silver badges10 bronze badges

Comments

friedi · Accepted Answer · 2014-01-19 09:53:28Z

1

You can show the height and age like this:

var output = "";
for(var i = 0, length = input.length; i !== length; i++) {
    output += "height: "+input[i].height + ", age: " + input[i].age + "<br />";
}
document.getElementById("demo").innerHTML=output;

And there is a little mistake. Use

j < girl.length+boy.length

instead of

j <=girl.length+boy.length

answered Jan 19, 2014 at 9:53

friedi

4,3601 gold badge15 silver badges19 bronze badges

1 Comment

miraculixx Over a year ago

anyway, that's a dangerous construct. rather use for(i=0; i < boy.length; i++, j++) {...}, where i is the index for boys, and j is the index in input.

ndpu · Accepted Answer · 2014-01-19 10:08:12Z

1

You can access your objects by array index and property name. Change this line document.getElementById("demo").innerHTML=input to this code (list all objects sex and balleyscore in ul#demo):

for (var i=0; i<input.length; i++) {
    var node = document.createElement('li'),
        txt = document.createTextNode(
            (input[i].girl? 'girl' : 'boy') + ' ' + input[i].balleyscore);
    node.appendChild(txt);
    document.getElementById("demo").appendChild(node);
}

html:

<p><ul id="demo"></ul></p>

FIDDLE

Browser console is very useful for debugging purposes. Try to add this line after objects creation and inspect your array in console:

insertToObjectArray();
console.log(input);     // output input array to console

edited Jan 19, 2014 at 10:08

answered Jan 19, 2014 at 9:50

ndpu

22.6k6 gold badges61 silver badges72 bronze badges

Collectives™ on Stack Overflow

Filling an array with objects in Javascript

5 Answers 5

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related