document.getElementById和Value

Question

我是Javascript新手，我想用document.getElementById來顯示項目的值，在我的例子中我想列出在var = btsFrontEnd中打印的名字，但我是做錯事。任何幫助都感激不盡。

謝謝。 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

這裏是的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

裏面你的循環鍵和值PARAMS代表在第一次迭代以下值：

key 
    "employee-1" 

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

由於value是你可以的一個對象這樣的名字：value.name。

Answer 4

所有列出的答案都使用jQuery，所以我認爲添加純javascript版本會很有用。其實兩個版本。

第一個版本使用Object.keys，與第二個版本中使用的hasOwnProperty相比，它相對較新。這意味着第二個版本與更多瀏覽器兼容。

版本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(","); 

版本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(",");