0

我有一个看起来像这样的 json：

contacts = [{"id":"0001","title":"Mr","name_first":"Bob","name_last":"Edwards","address1":"2 ford road","address2":null,"address3":null,"town":"Bedford","county":"Bedfordshire","postcode":"Mk16hd","telephone1":"01827485999","telephone2":null,"email":"bob@email.com"},
{"id":"8003","title":"Mr","name_first":"Joe","name_last":"Bloggs","address1":"186 Bath Road","address2":null,"address3":null,"town":null,"county":null,"postcode":null,"telephone1":"01827485648","telephone2":null,"email":"joe@email.com"},
{"id":"R005","title":"Mr","name_first":"Foo","name_last":"Bar","address1":null,"address2":null,"address3":null,"town":null,"county":null,"postcode":null,"telephone1":"01827485647","telephone2":null,"email":"foo@email.com"}];

然后我像这样循环，为每个按钮创建一个按钮：

for (var key in contacts) { 
    if (contacts.hasOwnProperty(key)) {
        var contact = contacts[key];

        var button = document.createElement('button');
        button.innerHTML = '<span class="left-body">Edit</span>';
        button.onclick = function() { editContact(key); return false; };
    }
}

单击每个按钮时，我得到“扩展”一词作为函数中索引的值editContact()：

function editContact (index) {
    console.log(index);
    return false;
}

问：这是什么？如何设置才能将每个 json 项的密钥放入editContact()函数中？

4

3 回答 3

2

是因为关闭

for (var key in contacts) { 
    if (contacts.hasOwnProperty(key)) {
        var contact = contacts[key];

        var button = document.createElement('button');
        button.innerHTML = '<span class="left-body">Edit</span>';
        button.onclick = (function(key){
            return function() { editContact(key); return false; };
        })(key);
    }
}

演示：小提琴

于 2013-04-29T13:02:41.437 回答
0

contacts是一个数组。如果您想遍历一个联系人的属性，您必须指定它（例如使用contact[0]）。如果要遍历每个联系人的属性，则必须遍历它们：

for (var i=0;i<contacts.length;i++) {
    for(var key in contacts[i])

第二个问题：

button.onclick = function() { editContact(key); return false; };

每次单击按钮时，都会使用分配给键的最后一个值editContact调用该按钮。假设您想保留您的价值，您可以执行以下操作：key

(function() {
    var currentKey = key;
    button.onclick = function() { editContact(currentKey); return false; };
(());

编辑： 由于您只想遍历联系人，因此如果您不必支持 IE < 9（或可以使用 shim），则可以执行以下操作：

contacts.forEach(function(element, index) {
    var button = document.createElement('button');
    button.innerHTML = '<span class="left-body">Edit</span>';
    button.onclick = function() { editContact(index); return false; };      
});
于 2013-04-29T11:03:22.983 回答
0

每次单击按钮时，都会使用分配给键的最后一个值调用 editContact。所以它需要保留 json 行的索引并将该索引用于进一步的内容。

我是按照以下方式完成的，因此您可以从 json 中获取所有密钥。

  function addButtons() {

    for ( var key in contacts) {
        if (contacts.hasOwnProperty(key)) {
            var contact = contacts[key];
            var button = document.createElement('button');
            document.body.appendChild(button);
            button.setAttribute('id', key);
            button.innerHTML = '<span class="left-body">Edit</span>';
            button.onclick = function() {
                editContact(this.id);
                return false;
            };
        }
    }
}


function editContact(index) {
    for ( var key in contacts[index]) {
        console.log("Key :" + key+" Value:"+contacts[index][key]);
    }
    return false;
}

我的 html 看起来像

  <body onload="addButtons();"> </body>
于 2013-04-29T11:51:11.757 回答