Display array elements in html page as they are being entered

Question

var contacts =[];

function getInfo() {
    var firstName = prompt("Enter first name");
    var lastName = prompt("Enter last name");
    var emailId = prompt("Enter Email ID");
    var phoneNo = prompt("Enter Phone number");
    var fname, lname, email, phone;
    var person ={
        fname : firstName,
        lname : lastName,
        email : emailId,
        phone : phoneNo
    }
    contacts.push(person);  




for(i=0;i<contacts.length;i++){
    document.getElementById("mydiv").innerHTML += contacts[i].fname+" "+contacts[i].lname;
}
}

I want to display only the new array elements. In the above code, every time a new element enters the array all elements are displayed. How can I avoid repetition? I think using the DOM is an option. I'm stuck trying to implement this.

score 2 · Answer 1 · answered Mar 04 '16 at 14:44

You can do it like this, adding only the last element of array to innerHTML

var contacts =[];

function getInfo() {
    var firstName = prompt("Enter first name");
    var lastName = prompt("Enter last name");
    var emailId = prompt("Enter Email ID");
    var phoneNo = prompt("Enter Phone number");
    var fname, lname, email, phone;
    var person ={
        fname : firstName,
        lname : lastName,
        email : emailId,
        phone : phoneNo
    };
    contacts.push(person);  


    document.getElementById("mydiv").innerHTML += contacts[contacts.length-1].fname+" "+contacts[contacts.length-1].lname;

}

score 2 · Answer 2 · answered Mar 04 '16 at 14:45

2

Before you add all the elements you have to empty your div.

document.getElementById("mydiv").innerHTML = ''

answered Mar 04 '16 at 14:45

DCruz22

806
1
9
18

score 1 · Accepted Answer · edited Mar 08 '16 at 16:56

1

Here is a working snippet of what you asked. you just have to take the last pushed object from the array and display the names.

Also your var fname, lname, email, phone is not required, You can set the object properties on the fly.

var contacts =[];

function getInfo() {
    var firstName = prompt("Enter first name");
    var lastName = prompt("Enter last name");
    var emailId = prompt("Enter Email ID");
    var phoneNo = prompt("Enter Phone number");
   // var fname, lname, email, phone; //also this is not required. you can set dynamic property names in a object.
    var person ={
        fname : firstName,
        lname : lastName,
        email : emailId,
        phone : phoneNo
    };
    contacts.push(person);  

    var currPerson = contacts[contacts.length-1]; //take the last pushed object from the array
    
    var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase();
  
    if(!document.getElementById(lastNameFirstChar + "_holder")){      
    document.getElementById("mydiv").innerHTML += "<div  id='"+lastNameFirstChar+"_holder' class='holder'><span class='charValue'>"+lastNameFirstChar+"</span></br></div>";
    
  }
   document.getElementById(lastNameFirstChar + "_holder").innerHTML += currPerson.fname+" "+currPerson.lname + "<br/>";
 

}

<button onclick="getInfo()">Get Person Info</button>
<p>----------------------------</p>
<div id="mydiv">

</div>

EDIT: Since you said you can use Jquery I have updated the solution with Jquery.

edited Mar 08 '16 at 16:56

Droidr

63
1
2
13

answered Mar 04 '16 at 15:12

Rajshekar Reddy

18,647
3
40
59

Cool. This is what I want exactly! – Droidr Mar 04 '16 at 15:29
By the way, I also need to track of fname,lname,phone and email. When I click on the name, then the contact info should appear on the right side in the same page! – Droidr Mar 04 '16 at 15:37
http://imgur.com/ZOXl5Sz When I click on name, his/her details should appear on the right side in the same page – Droidr Mar 04 '16 at 16:07
@Droidr that can be done, I will update my answer in few minutes. – Rajshekar Reddy Mar 05 '16 at 03:11
I have already done it. But I am struck with displaying Contact list alphabetically separated as shown in the picture. – Droidr Mar 05 '16 at 03:21
I don't see any contact in the picture, Guess you gave me the wrong link – Rajshekar Reddy Mar 05 '16 at 03:40
This picture gives better idea http://i.stack.imgur.com/gB73T.png . As of now I'm able to display the contact information on right side ( Using onClick( ) ) . But not separated the contact list by alphabetical order. – Droidr Mar 05 '16 at 11:57
`not separated the contact list by alphabetical order` what do you mean?? Can you show whats your desired behaviour and current behaviour. I can help out – Rajshekar Reddy Mar 05 '16 at 12:01
In current behavior I am not able to separate the names by first character of last name( As shown http://i.stack.imgur.com/gB73T.png ) As of now I can print them in the order as they are entered and display( Using onClick) the respective contact information ( full name , email, phone ) on right side. – Droidr Mar 05 '16 at 12:12
ok, So you want to do as seen in the image? Then for every entry of the person you need to check his last name first character. You should first have a div with a attribute to say which Character it holds, An then check the last name first character and push to the divs accordingly. If the div is not there then you must create it dynamically. – Rajshekar Reddy Mar 05 '16 at 12:22
Having div for each character sounds naive. In least possible case I will try that. How do I do that dynamically? – Droidr Mar 05 '16 at 12:27
You can build the div dynamically too, when you don't find one. – Rajshekar Reddy Mar 05 '16 at 12:27
I think you have to look the current code which is causing more difficulty to do this . How can I share it personally with you ? – Droidr Mar 05 '16 at 12:32
I updated my code to do what you wanted, Have a check.. you can see all the names with the same last name first character goes under the same section – Rajshekar Reddy Mar 05 '16 at 12:40
@Droidr again updated to fix few bugs, Let me know if you need more help – Rajshekar Reddy Mar 05 '16 at 12:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105436/discussion-between-droidr-and-reddy). – Droidr Mar 05 '16 at 14:13
Is there a way to sort the
with this approach?
– Droidr Mar 06 '16 at 13:11
I find it hard with current approach :D – Droidr Mar 06 '16 at 13:55
actually its not, would you like to try it if I share some details? – Rajshekar Reddy Mar 06 '16 at 13:57
Okay sure. Thanks for the help and I'll get back to you if I've questions :) – Droidr Mar 06 '16 at 14:01
So here is what you can do.. While setting the Char to the div also set a data attribute to set the number to it, number must be the position, So something like `data-div-pos=0` for the char A, for this you can check online solution to get a Number for char and set it, Now you will have div's with numbers on it. You can now sort it. Here is a similar link http://stackoverflow.com/questions/18847712/sort-divs-bases-on-elements-data-attribute .Let me know if you have issues. All the best :) I want you to do this – Rajshekar Reddy Mar 06 '16 at 14:04
In my case
are dynamic. Is it gonna work if div are dynamic ? He's using document.ready , which isn't quite suitable in my case I think. Because I've to get the existing div to be sorted.
– Droidr Mar 07 '16 at 04:40
The above jsfiddle in my comment is exactly what you need. Did you look at it? – Rajshekar Reddy Mar 07 '16 at 04:42
No but he is sorting on click of the button, you just need to sort while adding a new person into the DOM. just a function call bro – Rajshekar Reddy Mar 07 '16 at 05:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105571/discussion-between-droidr-and-reddy). – Droidr Mar 07 '16 at 15:09

score 0 · Answer 4 · answered Mar 04 '16 at 15:09

0

just change:

if(contacts.length!=0){
   document.getElementById("mydiv").innerHTML += contacts[contacts.length-1].fname+" "+contacts[contacts.length-1].lname;
}

The if check is for the start when length of array is zero

answered Mar 04 '16 at 15:09

Koustav Ray

1,112
13
26

Display array elements in html page as they are being entered

4 Answers4