英文:
How to remove empty string in JSON file?
问题
Nuxt 在接收到空字符串的 JSON 时会返回一个错误：
示例错误：
input must be a string (received string: "")
在 Nuxt 中的循环示例：
<Grid class="sponsors">
<Img v-for="prop in home" :src="prop.sponsors" :width="300" />
</Grid>
JSON 内容：
[
{
"id": "1",
"title": "电影",
"desc": "电影描述",
"sponsors": "sponsors/culture-fond_ftl1iu_nhpivj.png",
"films": "电影1"
},
{
"id": "2",
"title": "",
"desc": "",
"sponsors": "sponsors/muzey-tavrida-bw_wedmvw_qf4ixd.png",
"films": "电影2"
},
{
"id": "3",
"title": "",
"desc": "",
"sponsors": "sponsors/insightstudio-logo-white_rc0vme.png",
"films": "电影3"
},
{
"id": "4",
"title": "",
"desc": "",
"sponsors": "",
"films": "电影4"
},
{
"id": "5",
"title": "",
"desc": "",
"sponsors": "",
"films": "电影5"
},
{
"id": "",
"title": "",
"desc": "",
"sponsors": "",
"films": "电影6"
}
]
如何从 JSON 中删除空字符串？或者如何忽略这个错误？
我使用的是 Nuxt 3.4.1。
英文:
Nuxt returns an error when it receives empty strings from JSON:
Example error:
input must be a string (received string: "")
An example of my loop in Nuxt:
<Grid class="sponsors">
<Img v-for="prop in home" :src="prop.sponsors" :width="300" />
</Grid>
JSON content:
[
{
"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"
},
{
"id": "5",
"title": "",
"desc": "",
"sponsors": "",
"films": "film 5"
},
{
"id": "",
"title": "",
"desc": "",
"sponsors": "",
"films": "film 6"
}
]
How do I remove empty string from JSON? Or how to ignore this error?
I use Nuxt 3.4.1
答案1
得分: 2
多种方法来解决这个问题。
您可以在JavaScript中使用filter()（或其他框架中的类似方法）
const filteredData = jsonData.filter(obj => Object.values(obj).some(val => val !== ""));
另一种解决方法是在Nuxt中渲染IMG组件之前检查空字符串。
<Grid class="sponsors">
<Img v-for="prop in home" :src="prop.sponsors" :width="300" v-if="prop.sponsors !== ''" />
</Grid>
英文:
Multiple ways to solve this problem.
You can use filter() in javascript (or something similar in other frameworks)
const filteredData = jsonData.filter(obj => Object.values(obj).some(val => val !== ""));
Another way to solve it would be to check for empty strings before rending the IMG component in Nuxt.
<Grid class="sponsors">
<Img v-for="prop in home" :src="prop.sponsors" :width="300" v-if="prop.sponsors !== ''" />
</Grid>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论