如何提取值为数组的对象中的字符串并插入到HTML页面

报错原因排查 #

response.json is not a function报错通常由以下三种情况导致，对应解决方法如下：

• 如果你使用的是axios等封装好的请求库，请求返回的结果已经是解析完成的JS对象，不需要再调用json()方法，直接取对应错误字段即可
• 标准fetch返回的Response对象的body是只读流，只能读取一次，如果你之前已经调用过response.json()、response.text()等方法读取过内容，再次调用就会报错，建议第一次读取后就把结果存为变量复用
• 如果是服务端场景，你拿到的本身就是已经解析好的错误对象，无需额外调用json()方法解析

错误信息提取实现 #

你需要忽略对象键名、提取所有数组中的错误字符串，可以直接用JS内置方法实现，代码示例如下：

// 示例错误对象
const errorObj = {
    "email": [
        "user with this email already exists."
    ]
}

// 提取所有错误信息，支持多字段多错误场景
const allErrors = Object.values(errorObj).flat()
// 取第一个错误信息（匹配你需要的输出结果）
const targetError = allErrors[0]
console.log(targetError) // 输出：user with this email already exists.

如果你的错误对象存在多个校验字段，比如同时返回邮箱、密码格式错误，上述代码也会把所有错误信息提取到同一个数组中，直接遍历数组就可以渲染到HTML模板中。

内容的提问来源于stack exchange，提问作者O.smith Effizzy's Tech