技术咨询：对象无键时HTML属性传空值及表单错误清除方案

Hey there! Let's work through your two technical issues with practical, efficient solutions:

Issue 1: Can't pass empty values to HTML attributes when the object has no corresponding key #

The problem here is that if your object doesn't have a specific key, accessing it returns undefined—which HTML often ignores instead of rendering an explicit empty value. Here's a clean fix:

First, define all the keys you expect to map to HTML attributes (this ensures you cover every field you need to update). Then use the nullish coalescing operator (??) to fall back to an empty string when the key doesn't exist in your object:

// Example: List all keys you need to bind to HTML attributes
const targetKeys = ['name', 'email', 'phone'];
const yourDataObject = { /* your existing data */ };

targetKeys.forEach(key => {
  // Use empty string if the key doesn't exist in the object
  const attributeValue = yourDataObject[key] ?? '';
  // Update the HTML attribute (adjust selector to match your elements)
  document.querySelector(`.form-field-${key}`).setAttribute('data-value', attributeValue);
});

This guarantees every target attribute gets either the value from your object or an explicit empty string—no missing keys left behind.

Issue 2: Old form errors aren't cleared after subsequent submissions #

Your current code only updates errors present in response.data, leaving old errors from previous submissions untouched. Instead of wiping all .text-danger elements (which is inefficient), we can target only the old error keys that aren't in the new response.

Here's an optimized approach using Underscore.js and jQuery:

.then(function (response) {
  // Step 1: Collect all existing error keys from the DOM
  const allErrorKeys = $('.text-danger').map(function() {
    // Extract the key from the "error-*" class (e.g., "error-name" → "name")
    return this.className.split(' ').find(cls => cls.startsWith('error-')).replace('error-', '');
  }).get();

  // Step 2: Get keys from the new error response
  const newErrorKeys = Object.keys(response.data);

  // Step 3: Find keys that were in old errors but not in the new response
  const keysToClear = _.difference(allErrorKeys, newErrorKeys);

  // Step 4: Clear only those outdated errors
  keysToClear.forEach(key => {
    $(`.error-${key}`).html('');
  });

  // Step 5: Update the new errors as before
  _.mapObject(response.data, function(error_value, error_key){
    $(`.error-${error_key}`).html(error_value);
  });
})

How this works: #

1. We first grab every error key currently displayed on the page.
2. We compare that list to the keys in the new response.data.
3. Any key that's in the old list but not the new one gets its error cleared.
4. Finally, we update the new errors like you were doing before.

This way, you only touch the elements that actually need updating or clearing—way more efficient than wiping all error elements at once.

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