Vue 循环嵌套 JSON 的麻烦

Posted 2023-02-23

【中文标题】Vue 循环嵌套 JSON 的麻烦

【英文标题】：Vue looping nested JSON troubles

【发布时间】：2020-05-13 04:54:54

【问题描述】：

我在访问嵌套的 JSON 文件时遇到了一点问题。

这是较大 JSON 文件的一小部分：

    "first": "SOME_TEXT",
    "second": 1,
    "items": [
        
            "volumeInfo": 
                "first": "SOME_TEXT",
                "second": [
                    "SOME_TEXT"
                ],
                "imageLinks": 
                    "smallThumbnail": "http://books.google.com/books/content?id=hpTEDwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
                    "thumbnail": "http://books.google.com/books/content?id=hpTEDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
                
            
        
    ]

..这是我的 Vue 组件：

<template>
  <div>
      <b-container v-for="(res, index) in res.items" :key="index">
              <!-- Img path from response -->
              <b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>
      </b-container>
    </div>
</template>

脚本：

<script>
export default 
  name: 'Component',
  data () 
    return 
      res: '',
    
  ,
  mounted () 
    fetch('API-URL-HERE')
      .then(res => 
        return res.json()
      )
      .then(res => 
        this.res = res
      )
  

</script>

我正在尝试循环一个大的 JSON 文件，以便我可以通过循环将“smallThumbnail”传递给 Vue 组件。当我像在 Vue 组件中那样编写代码时，我得到 TypeError: Cannot read property 'smallTumbnail' of undefined

我的 Vue 代码有什么问题？我如何从 JSON 文件中访问一个项目，这进一步嵌套了一步？

【问题讨论】：

这是您的问题中的拼写错误，还是您实际上试图在 v-for 中没有 H 字母的情况下访问 smallTumbnail？

感谢您的捕获，代码中实际上是正确的，但在这里写错了:(

您的响应返回的是有效的 json 对象还是字符串？我已经在 jsFiddle 上测试了你的代码，效果很好。

这是 JSON 的 URL：api.myjson.com/bins/lj2ie

你能显示console.log(res)吗？

【参考方案1】：

你应该使用：

<b-img v-if="res.volumeInfo.imageLinks" :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>

而不是

<b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img> 

【讨论】：

就是这样！谢谢！

【参考方案2】：

好的，问题是 JSON 文件是完全混合的。并非每个实例都有 imageLinks，嵌套数据量也各不相同。这就是循环在遇到没有“imageLinks”的嵌套时中断的原因。 JSON 文件被故意改组以使生活（和编程）变得更加困难。