如何搜索JSON数组匹配值后删除对应索引并将结果回写至DOM？

直接运行以下代码即可完成需求：

// 获取目标input元素
const uppyInput = document.getElementsByName('uppyResult')[0]
// 要删除的目标id
const TARGET_DELETE_ID = 'uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772'

try {
  // 解析原始JSON数据
  const uppyResult = JSON.parse(uppyInput.value)
  // 过滤successful数组，移除目标id对应项
  uppyResult[0].successful = uppyResult[0].successful.filter(item => item.id !== TARGET_DELETE_ID)
  // 处理后的数据转回JSON字符串写回DOM
  uppyInput.value = JSON.stringify(uppyResult)
} catch (err) {
  console.error('数据处理失败', err)
}

逻辑说明 #

• 解析兼容：浏览器读取input的value属性时，会自动把HTML转义字符"转换为普通双引号，无论value属性内存储的是原始双引号还是转义后的"，都可以直接用JSON.parse正常解析，不需要额外处理转义。
• 过滤逻辑：使用数组filter方法做匹配过滤，不需要手动计算目标索引，避免因数组顺序变化导致的删除错误，性能和稳定性都优于按索引删除的方案。
• 异常处理：增加try/catch逻辑避免JSON解析异常导致后续代码阻塞。

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