document.getElementById and Value

Question

我是Javascript的新手，我想使用document.getElementById来显示项的值，在我的示例中，我想列出var=btsFrontEnd中打印的名称，但我做错了。任何帮助都将不胜感激。

谢谢。链接到我的Fiddle

var btsFrontEnd = {
     "employee-1": {
         "name": "Name One", 
         "phone": "1234567890",
         "email": "[e-mail]"
        },
    "employee-2": {
                  "name": "Name Two", 
                  "phone": "1234567890",
                  "email": "blah@blah." 
     }
};

var btsemployees = {
    employees:[
        {
     "name": "Name One", 
     "phone": "1234567890",
     "email": "[e-mail]"
    },
     { 
     "name": "Name Two", 
      "phone": "1234567890",
     "email": "[e-mail]"
},
     { 
     "name": "Name Three", 
      "phone": "1234567890",
     "email": "[e-mail]"
},
     { 
     "name": "Name Four", 
      "phone": "1234567890",
     "email": "[e-mail]"
},
     {
     "name": "Name Five", 
      "phone": "1234567890",
     "email": "[e-mail]"
}
]
};

//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

在循环中，键和值参数表示第一次迭代中的以下值：

key
    "employee-1"
value 
    Object { name="Name One", phone="1234567890", email="[e-mail]"}

由于value是一个对象，您可以访问这样的名称：value.name。

Answer 3

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

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