[英]document.getElementById and Value
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. 我是Javascript的新手,我想使用document.getElementById来显示items的值,在我的例子中我想列出var = btsFrontEnd中打印的名字,但是我做错了。 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"
});
Here is the jsfiddle: http://jsfiddle.net/Ss2kk/7/ 这是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(",");
var names = document.getElementById( 'names' );
names.innerHTML = '';
$.each( btsFrontEnd, function( key, value ) {
names.innerHTML += value.name + '<br>';
});
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
. 由于
value
是一个对象,您可以像这样value.name
名称: value.name
。
All answers listed use jQuery, so I thought it'd be useful to add a pure javascript version. 列出的所有答案都使用jQuery,所以我认为添加纯javascript版本会很有用。 Two versions actually.
实际上有两个版本
The first version uses Object.keys, which is relatively new compared to hasOwnProperty, which is used in the second version. 第一个版本使用Object.keys,与在第二个版本中使用的hasOwnProperty相比,它相对较新。 This means the second version is compatible with more browsers.
这意味着第二个版本与更多浏览器兼容。
Version 1: 版本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: 版本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(",");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.