Question

请参阅下面的代码。

我有一个填充了JSON数据的表。以下内容旨在清除表格，并使用用户指定的姓氏标准检索仅数据。

到目前为止，我已成功创建过滤条件并擦除表格。但是，我无法使用过滤结果重新填充表格。

可能出现的问题：

- 正则表达式：我是JS的新手RegExp，我认为语法是正确的，但我不完全确定。我也不确定我是否能够像我一样使用它（设置它：filterCriteria = new RegExp("^" + filter.value)然后调用它来检查last_name对象是否等于它：if (contacts.last_name === filterCriteria)

或者即使正则表达式工作正常，我能否按照我在If语句中尝试的方式创建一个新数组？即足以说，“只使用符合条件的姓氏的对象并将它们扔进一个新的数组中”？

感谢您的帮助！

var filter = document.getElementById("filter");
    filter.addEventListener("keydown", function (event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            if ((xhr.readyState === 4) && (xhr.status === 200)) {
                var contacts = JSON.parse(xhr.responseText).data,
                    filterCriteria = new RegExp("^" + filter.value),
                    i;
                for (i = 0; i < contacts.length; i += 1) {
                    var contactTableBody = document.getElementById("contactTable").lastElementChild,
                        lastRow = contactTableBody.lastElementChild;
                    contactTableBody.removeChild(lastRow);
                }
                if (contacts.last_name  === filterCriteria) {
                    var filterResults = [contacts];
                    for (i = 0; i < contacts.length; i += 1) {
                        contactTableBody = document.getElementById("contactTable").lastElementChild;
                        var newRow = [],
                            newNameCell = document.createElement("td"),
                            newPhoneCell = document.createElement("td"),
                            newEmailCell = document.createElement("td"),
                            newNameNode = document.createTextNode(contacts[i].last_name + ", " + contacts[i].first_name),
                            newPhoneNode = document.createTextNode(contacts[i].phone),
                            newEmailNode = document.createTextNode(contacts[i].email);

                        newRow[i] = document.createElement("tr");
                        newRow[i].id = "contact" + i;
                        newNameCell.appendChild(newNameNode);
                        newPhoneCell.appendChild(newPhoneNode);
                        newEmailCell.appendChild(newEmailNode);
                        newRow[i].appendChild(newNameCell);
                        newRow[i].appendChild(newPhoneCell);
                        newRow[i].appendChild(newEmailCell);
                        contactTableBody.appendChild(newRow[i]);
                    }
                }
            }

编辑：

不是100％使用括号/括号表示法，但是应该知道数据的方向

contacts = JSON.parse(XMLHttpResponse.responseText).data  = { [
    { "first_name":"Jim", "last_name":"Cooper", "phone":"8435555555", "email":"jim@halpert.com" },
    { "first_name":"Jim", "last_name":"Aaron", "phone":"1234567890", "email":"jim@beam.com" },
    { "first_name":"Mark", "last_name":"Smith", "phone":"4567891236", "email":"mark@smith.com" },
    { "first_name":"Sally", "last_name":"Smith", "phone":"5469876622", "email":"sally@smith.com" },
    { "first_name":"Mary", "last_name":"Coppersmith", "phone":"6854895212", "email":"mary@coppersmith.com" }        
] }

Answer 1

来自Santosh的初步评论：

我不知道上下文，但contacts.last_name不应该在for循环中？这样的事情contacts[i].last_name == filterCriteria。如果你可以模拟联系人或jsfiddle的数据，这会有所帮助。

实际上需要一个for循环。感谢。

使用“已过滤”数据重新填充表格

1 个答案: