Как обратиться к объекту?

Question

[Евгений Крамор]

Есть массив:

{
  "subsection": "",
  "title": "",
  "updated_date": "",
  "created_date": "",
  "subheadline": "",
  "multimedia": [
    {
      "url": "",
      "height": ,
      "width": ,
      "type": "",
      "subtype": "",
      "caption": "",
      "copyright": ""
    },
    {
      "url": "",
      "format": "",
      "height": ,
      "width": ,
      "type": ""
    },
    {
      "url": "",
      "format": "",
      "height": ,
      "width": ,
      "type": ""
    },
    {
      "url": "",
      "format": "",
      "height": ,
      "width": ,
      "type": ""
    }
  ]
}

Необходимо обратиться ко второму элементу multimedia и вытащить из этого элемента url.

<div v-for="(comment, idx) in results" :key="idx">
     {{ comment.multimedia[1].url }}
</div>

Но получается ошибка TypeError: Cannot read property '1' of null
Что я делаю не так и каким образом мне можно обратиться к данному элементу?
Спасибо.

Comments

[Lynn «Кофеман»]

Возможно у вас не во всех комментах есть multimedia

[Евгений Крамор]

Алексей Тен, да, у меня есть комменты, где multimedia = null. Можно ли как-то обойти это с помощью директивы v-if?

[WStanley]

Евгений Крамор, создайте вычесляемое свойство в компоненте и отфильтруйте массив
https://learn.javascript.ru/array-iteration#filter

[Евгений Крамор]

WStanley, спасибо, разобрался.

Answer 1

[Павел Диденко]

Ошибка вам говорит о том, что вы пытаетесь получить 1ый индекс у null, а у него не может быть индекса. Скорее всего проблема в том, что в момент обращения у вас объект пустой. Попробуйте сделать проверку типа comment.multimedia && comment.multimedia[1].url

Comments

[Евгений Крамор]

Спасибо. Решил поставленную задачу.

Answer 2

[Alex Pospeliri]

Есть массив: {...}

{} - массив ???

Comments

[Евгений Крамор]

Это условное обозначение и для примера взята лишь меньшая часть имеющегося.

[Alex Pospeliri]

Собери на codepen быстрый тестовый макет (Vue) скинь ссылку, и мы тебе быстрее подскажем :)

[AlexCraft]

Во Vue, если получаешь данные асинхронно, есть нюанс. Последовательность такая: получаем данные в store.actions при помощи fetch или axios, потом в state пишем пустой объект: appData: {}, создаем мутацию setData, далее диспатч в корневой компонент. Потом в геттерах деструктурируем appData. После этого в компоненте, используя ...mapState и ...mapGetters импортируем геттеры и стэйт. В конце надо не забываем повесить v-if на div, в котором получаем данные.

[Максим Тихонов]

Чтобы понять, что происходит просто выведи значения comment и idx. Сразу поймёшь, в чем дело