如何使用JavaScript循环移除嵌套数组中含空字符串值的对象元素

Hey there! Let's solve this problem where we need to clean up nested emails and phones arrays by removing any entries that have an empty string for their address (emails) or phoneNumber (phones) values.

Problem Overview #

We have an array of user objects, each with nested arrays for emails and phones. Our goal is to strip out any sub-objects where the relevant contact value is empty (including whitespace-only strings, just to be thorough).

Original Data #

[
  {
    "firstName": "James",
    "lastName": "Doe",
    "emails": [
      { "emailType": "WORK", "address": "" },
      { "emailType": "PERSONAL", "address": "test2@gmail.com" }
    ],
    "relationship": "boyfriend",
    "phones": [
      { "phoneType": "HOME", "phoneNumber": "(514) 888-9999" },
      { "phoneType": "CELL", "phoneNumber": "(123) 123-4567" },
      { "phoneType": "WORK", "phoneNumber": "(415) 875-9999 " }
    ],
    "callSequence": 0
  },
  {
    "firstName": "John",
    "lastName": "Doe",
    "emails": [
      { "emailType": "WORK", "address": "" },
      { "emailType": "PERSONAL", "address": "test2@gmail.com" }
    ],
    "relationship": "ex-husband",
    "phones": [
      { "phoneType": "HOME", "phoneNumber": "" },
      { "phoneType": "CELL", "phoneNumber": "(111) 111-1111" },
      { "phoneType": "WORK", "phoneNumber": "" }
    ],
    "callSequence": 0
  }
]

Expected Result #

[
  {
    "firstName": "James",
    "lastName": "Doe",
    "emails": [
      { "emailType": "PERSONAL", "address": "test2@gmail.com" }
    ],
    "relationship": "boyfriend",
    "phones": [
      { "phoneType": "HOME", "phoneNumber": "(514) 888-9999" },
      { "phoneType": "CELL", "phoneNumber": "(123) 123-4567" },
      { "phoneType": "WORK", "phoneNumber": "(415) 875-9999 " }
    ],
    "callSequence": 0
  },
  {
    "firstName": "John",
    "lastName": "Doe",
    "emails": [
      { "emailType": "PERSONAL", "address": "test2@gmail.com" }
    ],
    "relationship": "ex-husband",
    "phones": [
      { "phoneType": "CELL", "phoneNumber": "(111) 111-1111" }
    ],
    "callSequence": 0
  }
]

Solution Code #

We can approach this in two common ways: using modern array methods for brevity, or traditional loops for more explicit control.

Option 1: Modern Array Methods (forEach + filter) #

This is the cleaner, more concise approach:

const users = [/* Insert original data here */];

// Iterate over each user
users.forEach(user => {
  // Filter out emails with empty address (trim to handle whitespace)
  user.emails = user.emails.filter(email => email.address.trim() !== "");
  
  // Filter out phones with empty phoneNumber
  user.phones = user.phones.filter(phone => phone.phoneNumber.trim() !== "");
});

console.log(users); // Logs the expected result

Option 2: Traditional For Loops #

If you prefer explicit loop control, this works too:

const users = [/* Insert original data here */];

// Loop through each user
for (let i = 0; i < users.length; i++) {
  const currentUser = users[i];
  
  // Clean up emails
  const cleanedEmails = [];
  for (let j = 0; j < currentUser.emails.length; j++) {
    const email = currentUser.emails[j];
    if (email.address.trim() !== "") {
      cleanedEmails.push(email);
    }
  }
  currentUser.emails = cleanedEmails;
  
  // Clean up phones
  const cleanedPhones = [];
  for (let k = 0; k < currentUser.phones.length; k++) {
    const phone = currentUser.phones[k];
    if (phone.phoneNumber.trim() !== "") {
      cleanedPhones.push(phone);
    }
  }
  currentUser.phones = cleanedPhones;
}

console.log(users); // Logs the expected result

Explanation #

• Both methods process each user in the array, then clean up their emails and phones arrays.
• We use trim() to ensure we also remove entries with whitespace-only values (like " "), which is a common edge case you might want to handle.
• The filter method creates a new array containing only the entries that meet our condition (non-empty value), while the traditional loop builds a new array manually by pushing valid entries.

内容的提问来源于stack exchange，提问作者WildThing