Vue вложенных циклов JSON проблемы - PullRequest
Новая
       1

Vue вложенных циклов JSON проблемы

0 голосов
/ 27 января 2020

У меня небольшая проблема с доступом к вложенному файлу 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>

Я пытаюсь l oop большой JSON файл, чтобы я мог получить "smallThumbnail" к компоненту Vue через цикл. Когда я пишу код, как в моем Vue компоненте, я получаю TypeError: Невозможно прочитать свойство 'smallTumbnail' из неопределенного

Что не так с моим Vue код? Как получить доступ к элементу из файла JSON, который вложен еще на один шаг дальше?

Ответы [ 2 ]

1 голос
/ 28 января 2020

Вы должны использовать: 

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

Вместо 

<b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>
0 голосов
/ 28 января 2020

Хорошо, проблема в том, что файл JSON полностью смешан. Не каждый экземпляр имеет imageLinks, и количество вложенных данных варьируется. Вот почему l oop ломается, когда встречается с гнездом, которое не имеет «imageLinks». Файл JSON намеренно перемешан, чтобы немного усложнить жизнь (и программирование).

...