Here is the code snippet provided.
I have successfully developed a filter to clear a table and retrieve data based on user-specified last name criteria. However, I am struggling with repopulating the table with the filtered results.
Possible issues include:
-RegExp: As a newcomer to RegExp in JavaScript, I believe the syntax is correct but I require confirmation. Additionally, I am uncertain if I can utilize it as intended (setting it:
filterCriteria = new RegExp("^" + filter.value)if (contacts.last_name === filterCriteria)- Even assuming the RegExp functions correctly, can I create a new array based on it within that If statement? In other words, does it suffice to say, "Select only objects with a last name matching the criteria and move them into a new array"?
Thank you for your assistance!
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]);
}
}
}
UPDATE:
While unsure about the brace/bracket notation, this should provide insight into the data structure.
contacts = JSON.parse(XMLHttpResponse.responseText).data = { [
{ "first_name":"Jim", "last_name":"Cooper", "phone":"8435555555", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0506022f070e031f0a1d1b410c0002">[email protected]</a>" },
{ "first_name":"Jim", "last_name":"Aaron", "phone":"1234567890", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="264c4f4b664443474b0845494b">[email protected]</a>" },
{ "first_name":"Mark", "last_name":"Smith", "phone":"4567891236", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bed3dfcd5fecdd3d7cad690ddd1d3">[email protected]</a>" },
{ "first_name":"Sally", "last_name":"Smith", "phone":"5469876622", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5c4e4343566f5c42465b47014c4042">[email protected]</a>" },
{ "first_name":"Mary", "last_name":"Coppersmith", "phone":"6854895212", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be6eaf9f2cbe8e4fbfbeef9f8e6e2ffe3a5e8e4e6">[email protected]</a>" }
] }