How to Access an array of objects properties?

Question

i'm working in a simple program that uses an HTML Form to fill an Array with some information, so far, i can get the input data, store it into my list, and visualize it like this :

It basically, converts the Name to a Link, when you click it, it will create a <div> in which i show all the information of the contact.

And i've done this like this :

The error i'm getting is in the last 6 lines of Code.

(I'm trying to avoid all non-troubling code)

var list = [];
var ulList = document.createElement("UL");

function AddToList(){
    //Just pushes the info into the list.
}

function Visualize(){
    ClearScreen();
    for(var i = 0 ; i < list.length ; i++){
        //Tried to keep it clean, this just works with each item in the list.
        AddToList(i);    
    }      
}

//This Works correctly, it shows every Name i've previously pushed into the list like a Link.
function AddToList(index){
    var element = document.createElement("LI");
    var name = document.createTextNode(list[index].name);
    element.appendChild(name);

    var link = document.createElement("A");
    link.setAttribute("HREF", "#");
    link.appendChild(element);
    lik.setAttribute("ID", index);            
    link.addEventListener("click", ShowInfo(this.id)); //Index would do the same

    ulList.appendChild(link);           
    document.getElementsByTagName("body")[0].appendChild(ulList);    
}

//Trouble comes here
function ShowInfo(index){
    CleanDIV();

    //Previously created <div> with box as id    
    var box = document.getElementById("box");
    var details = document.createElement("UL");
    var lName = document.createElement("LI");
    var lNumber = document.createElement("LI");
    var lMail = document.createElement("LI");


    //
    //The error is here : Cannot Read Property 'name' of undefined
    //And i dont know why, since i've done something similar in a previous line...
    //    
    lName.appendChild(document.createTextNode("Name :" + list[index].name));
    lNumber.appendChild(document.createTextNode("Number : " + list[index].number));
    lMail.appendChild(document.createTextNode("Mail : " + list[index].mail));

    details.appendChild(lName);
    details.appendChild(lNumber);
    detaisl.appendChild(lMail);
}

I dont even know what kind of mistake i'm making, and was not sure of how to ask this question.

I apologyze for any grammar mistake, my bad variable naming abilities and any lack of quality in my question.

Thank you kindly.

What is your question? How to add the properties to an array? — Nivas
– Nivas, Commented Nov 23, 2015 at 19:46
@Nivas sorry if it was not clear enough, i will edit now, my question was about how to handle the error i got while trying to access the array properties, since i do it without problems in the first lines of the code, but i get errors while doing almost the same in the last lines. — DSN94
– DSN94, Commented Nov 23, 2015 at 19:49

Eduardo Escobar · Accepted Answer · 2015-11-23 19:51:26Z

1

In your AddToList function, indice is 'undefined'

answered Nov 23, 2015 at 19:51

Eduardo Escobar

3,4192 gold badges20 silver badges17 bronze badges

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

5 Comments

DSN94 Over a year ago

Sorry, that was a mistake while translating my code, Indice should be Index.

Eduardo Escobar Over a year ago

In your function ShowInfo why don't you try putting a console.log(index); to see what's in the index variable?

DSN94 Over a year ago

i'm geting Undefined index in there

Eduardo Escobar Over a year ago

What about if you put console.log(this.id); at the beginning of your AddToList function?

Eduardo Escobar Over a year ago

There, you have the answer. this variable contains the windows object, not the link element variable or anything like that

Nivas · Accepted Answer · 2015-11-23 19:52:39Z

0

You get the error because you have not added anything to your list array. Add the person details to the list array when the Add to List button is clicked. And retrieve this when the link is clicked.

var name = document.getElementById("txtName").value;
var number = document.getElementById("txtNnumber").value;
...
var person = {'name': name, 'number': number};
list.push(person);

answered Nov 23, 2015 at 19:52

Nivas

18.4k4 gold badges65 silver badges76 bronze badges

1 Comment

DSN94 Over a year ago

I fill the list very similar to that, but i have no troubles accessing the .name property earlier in the code, i just get the error in the last part

Mike Gasparelli · Accepted Answer · 2015-11-23 19:59:03Z

0

Looks like you have a couple of typos in your code.

lik.setAttribute("ID", indice);            
link.addEventListener("click", ShowInfo(this.id)); //Index would do the same

should be

link.setAttribute("ID", index);            
link.addEventListener("click", ShowInfo(index)); //Index would do the same

answered Nov 23, 2015 at 19:59

Mike Gasparelli

4662 gold badges8 silver badges13 bronze badges

2 Comments

DSN94 Over a year ago

Yes, sorry, i have the original code in Spanish so i had to translate it bit by bit, must have skipped that, sorry

Mike Gasparelli Over a year ago

It might be helpful to get a working fiddle set up. This error would occur if there is nothing in the list at the index you provided (or if the variable 'index' was not properly defined)

Collectives™ on Stack Overflow

How to Access an array of objects properties?

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related