document.getElementById and Value

Question

I am new to Javascript and I would like to use the document.getElementById to show the value of items, in my example I would like to list the names printed in the var= btsFrontEnd ,but I am doing something wrong. Any help will be much appreciated.

Thank you. Link to my Fiddle

var btsFrontEnd = {
     "employee-1": {
         "name": "Name One", 
         "phone": "1234567890",
         "email": "blah@blah.com"
        },

    "employee-2": {
                  "name": "Name Two", 
                  "phone": "1234567890",
                  "email": "blah@blah." 
     }
};


var btsemployees = {
    employees:[
        {
     "name": "Name One", 
     "phone": "1234567890",
     "email": "blah@blah.com"
    },
     { 
     "name": "Name Two", 
      "phone": "1234567890",
     "email": "blah@blah.com"
},
     { 
     "name": "Name Three", 
      "phone": "1234567890",
     "email": "blah@blah.com"
},
     { 
     "name": "Name Four", 
      "phone": "1234567890",
     "email": "blah@blah.com"
},
     {
     "name": "Name Five", 
      "phone": "1234567890",
     "email": "blah@blah.com"
}
]
};


//First argument is our data structure (an object or an array
//Second argument is a callback (logic we apply to our data structure)
$.each(btsFrontEnd, function (key, value) { 
console.log(key); //Prints this object's keys
console.log(value); //Prints immediate values from this object
console.log(btsFrontEnd[key]); 
console.log(value.name); 
    document.getElementById("names").innerHTML.value;// This is what I am referring to, I would like it to appear in the p id="names"

});

Answer 1

Here is the jsfiddle: http://jsfiddle.net/Ss2kk/7/

// Put names into an array
var employeeNames = [];
$.each(btsFrontEnd, function (employeeid, employee) { //first is the key or index, second argument is the value
    // Check each element if it has name field
    if (employee.name !== undefined) {
        // Put its name into the array
        employeeNames.push(employee.name);
    }
});

// Join the array as comma seperated and put the content into `<p>` tag.
document.getElementById("names").innerHTML = employeeNames.join(",");

Answer 2

var names = document.getElementById( 'names' );
names.innerHTML = '';

$.each( btsFrontEnd, function( key, value ) { 
    names.innerHTML += value.name + '<br>';    
});

Answer 3

Inside your loop the key and value params represent the following values in the first iteration:

key
    "employee-1"

value 
    Object { name="Name One", phone="1234567890", email="blah@blah.com"}

Since value is an object you can acces the name like this: value.name .

Answer 4

All answers listed use jQuery, so I thought it'd be useful to add a pure javascript version. Two versions actually.

The first version uses Object.keys, which is relatively new compared to hasOwnProperty, which is used in the second version. This means the second version is compatible with more browsers.

Version 1:

// Declare variables
var keys, i, names = [];

// Get all keys in the btsFrontEnd object in an array. This is employee-1 and employee-2 in the example.
keys = Object.keys(btsFrontEnd);
// Loop over all keys
for(i = 0; i < keys.length; ++i) {
    // Get the name of the employee via it's key and add it to the name array.
    names.push(btsFrontEnd(keys[i]).name);
}
//Make one long string from the names with a comma as seperator, then put the string in the dom element.
document.getElementById("names").innerHTML = names.join(",");

Version 2:

// Declare variables
var key, names = [];

//Loop over all object properties
for(key in btsFrontEnd) {
    // Check if the property is defined by you, and is not a standard Object property.
    if(btsFrontEnd.hasOwnProperty(key)) {
        names.push(btsFrontEnd[key].name);
    }
}
//Make one long string from the names with a comma as seperator, then put the string in the dom element.
document.getElementById("names").innerHTML = names.join(",");