在现代web开发中，从后端api获取json数据是常见的操作。然而，当这些数据中包含空字符串（""）时，前端框架如nuxt（基于vue）在处理某些组件时可能会遇到问题。例如，当一个标签或自定义img组件的src属性被绑定到一个空字符串时，nuxt可能会抛出类似input must be a string (received string: "")的错误，导致应用崩溃或显示异常。
考虑以下JSON数据结构，其中包含了一些空字符串：
[
{
"id": "1",
"title": "Film",
"desc": "Film desc",
"sponsors": "sponsors/culture-fond_ftl1iu_nhpivj.png",
"films": "film 1"
},
{
"id": "2",
"title": "",
"desc": "",
"sponsors": "sponsors/muzey-tavrida-bw_wedmvw_qf4ixd.png",
"films": "film 2"
},
{
"id": "4",
"title": "",
"desc": "",
"sponsors": "",
"films": "film 4"
}
]当尝试使用Nuxt的Img组件遍历并渲染sponsors字段时，如果prop.sponsors为空字符串，就会触发上述错误：
@@##@@
为了解决这个问题，我们可以采用以下两种策略。
策略一：数据预处理过滤
这种方法是在数据被组件使用之前，通过JavaScript对JSON数据进行清洗。我们可以过滤掉那些包含空字符串的对象，或者只保留那些关键字段非空的对象。这种方法的好处是，组件接收到的数据已经是“干净”的，避免了在模板中引入过多的逻辑。
以下示例展示了如何过滤掉任何包含至少一个非空值的对象：
// 假设 jsonData 是你从API获取到的原始JSON数组
const jsonData = [
{
"id": "1",
"title": "Film",
"desc": "Film desc",
"sponsors": "sponsors/culture-fond_ftl1iu_nhpivj.png",
"films": "film 1"
},
{
"id": "2",
"title": "",
"desc": "",
"sponsors": "sponsors/muzey-tavrida-bw_wedmvw_qf4ixd.png",
"films": "film 2"
},
{
"id": "3",
"title": "",
"desc": "",
"sponsors": "sponsors/insightstudio-logo-white_rc0vme.png",
"films": "film 3"
},
{
"id": "4",
"title": "",
"desc": "",
"sponsors": "", // sponsors 为空
"films": "film 4"
},
{
"id": "", // id 为空
"title": "",
"desc": "",
"sponsors": "",
"films": "film 6"
}
];
// 过滤掉所有值都为空字符串的对象
const filteredData = jsonData.filter(obj =>
Object.values(obj).some(val => val !== "")
);
console.log(filteredData);
/*
输出:
[
{
"id": "1",
"title": "Film",
"desc": "Film desc",
"sponsors": "sponsors/culture-fond_ftl1iu_nhpivj.png",
"films": "film 1"
},
{
"id": "2",
"title": "",
"desc": "",
"sponsors": "sponsors/muzey-tavrida-bw_wedmvw_qf4ixd.png",
"films": "film 2"
},
{
"id": "3",
"title": "",
"desc": "",
"sponsors": "sponsors/insightstudio-logo-white_rc0vme.png",
"films": "film 3"
},
{
"id": "4",
"title": "",
"desc": "",
"sponsors": "",
"films": "film 4"
}
]
*/在上述代码中：
- Object.values(obj)：获取对象obj所有可枚举属性值的数组。
- some(val => val !== "")：检查数组中是否存在至少一个值不为空字符串的元素。如果存在，则some方法返回true，该对象会被filter保留。
如果你只想根据特定字段（例如sponsors）来过滤，可以这样修改：
const filteredSponsorsData = jsonData.filter(obj => obj.sponsors !== "");
console.log(filteredSponsorsData);
/*
输出:
[
{
"id": "1",
"title": "Film",
"desc": "Film desc",
"sponsors": "sponsors/culture-fond_ftl1iu_nhpivj.png",
"films": "film 1"
},
{
"id": "2",
"title": "",
"desc": "",
"sponsors": "sponsors/muzey-tavrida-bw_wedmvw_qf4ixd.png",
"films": "film 2"
},
{
"id": "3",
"title": "",
"desc": "",
"sponsors": "sponsors/insightstudio-logo-white_rc0vme.png",
"films": "film 3"
}
]
*/这种方法将确保只有sponsors字段不为空的对象才会被传递给v-for循环，从而避免了渲染错误。
策略二：模板层条件渲染
另一种解决方案是在Vue模板中直接使用条件渲染指令v-if。这种方法适用于你希望遍历所有数据项，但只渲染那些满足特定条件的组件。
修改Nuxt模板代码如下：
@@##@@
在上述代码中：
- v-if="prop.sponsors !== ''"：这个指令会在渲染每个Img组件之前进行判断。只有当prop.sponsors的值不为空字符串时，对应的Img组件才会被渲染到DOM中。
- key="prop.id"：在v-for循环中使用key是Vue的最佳实践，有助于提高列表渲染的性能和稳定性。
这种方法的优点是简单直接，无需修改原始数据。它在渲染时动态地决定是否显示组件，适用于那些只需要在特定条件下显示某个元素的场景。
综合考量与最佳实践
-
选择哪种策略？
- 数据预处理：如果空字符串数据对你的应用逻辑来说是“无效”的，并且不希望它们出现在任何地方，那么在数据加载后进行预处理是更好的选择。它使得数据更加纯净，前端组件只需关注有效数据。
- 条件渲染：如果空字符串数据仍然有其意义（例如，表示某个字段缺失，但你仍需显示其他信息），或者你希望在模板层面进行更精细的控制，那么条件渲染更合适。
处理null或undefined：除了空字符串，JSON数据中也可能包含null或undefined。在过滤或条件渲染时，应一并考虑这些值。例如，val !== "" && val !== null && typeof val !== 'undefined'。
后端数据校验：最理想的情况是在数据源头（后端API）就进行严格的数据校验和清洗，确保前端接收到的数据是符合预期的。前端的处理更多是作为一种防御性编程，应对不可控或偶尔出现的数据异常。
用户体验：当过滤掉或不渲染某些内容时，要考虑对用户体验的影响。例如，如果一个列表项因为缺少图片URL而被完全移除，用户是否会感到困惑？有时，显示一个占位符图片或“暂无图片”的文本可能比完全移除更好。
总结
Nuxt应用中处理JSON数据中的空字符串是前端开发中常见的问题。通过JavaScript的数据预处理过滤或Vue模板的条件渲染，我们可以有效地避免因空字符串导致的渲染错误，提升应用的健壮性和用户体验。根据具体业务需求和数据特性，选择最合适的解决方案，并结合后端数据校验，可以构建出更稳定、更可靠的Web应用。
