Nativescript Vue TypeError: невозможно прочитать свойство «0» неопределенного

У меня есть данные из google_place_api, где данные ответа json

У меня проблема с приложением, над которым я работаю, когда возникают ошибки при нажатии или тапе на фотографии (фотографии) не на google_place_api

следующий код, который я сделал

<RadListView orientation = "horizontal" for = "restaurant in restaurants" @ itemTap = "onItemTap">
   <v-template>
     <StackLayout orientation = "horizontal">
        <StackLayout margin = "10">
           <StackLayout class = "album-image" height = "110"
                                        width = "125" v-if = "restaurant.photos == null" backgroundImage = "~ / assets / images / no-image.jpg"
                                        borderRadius = "5">
            <Button horizontalAlignment = "right"
                    marginRight = "5" marginTop = "80"
                    width = "50" height = "20" 
                    class = "fa btn-rounded-sm"
                    color = "# FFFFFF" backgroundColor = "# 3b75ff"> 
                   {{'fa-star' | fonticon}} {{restaurant.rating}} 
            </ Button>
           </ StackLayout>
           <StackLayout class = "album-image" height = "110"
                        v-else width = "125": 
                        backgroundImage = "'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference='+ restaurant.photos [0] .photo_reference +' & key = AIzaSyBAL1OTLzPeepaf_USJXL93BpUFNEZnW0s '"
                                        borderRadius = "5">
             <Button horizontalAlignment = "right"
                     marginRight = "5" marginTop = "80"
                     width = "50" height = "20" 
                     class = "fa btn-rounded-sm"
                     color = "# FFFFFF" backgroundColor = "# 3b75ff"> 
              {{'fa-star' | fonticon}} {{restaurant.rating}} 
             </ Button>
            </ StackLayout>
            <Label fontSize = "14" class = "font-weight-bold"
                   color = "# 000000": text = "restaurant.name" 
                   width = "125" textWrap = "true"> </ Label>
            <Label fontSize = "12" color = "# 999999" v-if = "restaurant.opening_hours" text = "Open"> </ Label>
            <Label fontSize = "12" color = "# 999999" v-else text = "Close"> </ Label>
          </ StackLayout>
       </ StackLayout>
    </ v-template>
</ RadListView>


 methods: {
            onItemTap: function (args) {
                if (args.item.photos == false) {
                    this. $ navigateTo (Details, {
                            props: {
                                name: args.item.name,
                                photo_reference: '2',
                                vicinity: args.item.vicinity,
                                place_id: args.item.place_id
                            }
                    })
                } else {
                    this. $ navigateTo (Details, {
                            props: {
                                name: args.item.name,
                                photo_reference: args.item.photos [0] .photo_reference,
                                vicinity: args.item.vicinity,
                                place_id: args.item.place_id
                            }
                    })
                }
            }
       }
    };

это ответ от json google_place_api

{
   "html_attributions" : [],
   "next_page_token" : "CqQCHQEAAJCG9rz5PgTwy98lf48-BwOY4r1w81EKnY5z9dANWCoIkoAAJk3DM1S39yCVS-v4V3TQz6YtyfDTGdERz5uOkeVsO0gnUzrFHpVF20sw_hEzrfaTRH8XooobZx3R03RDyKWXIsBRnTk81n_5mmpGWSWVWJqmbED6vmpskS67S8VNk6rCPxFvJUwLJA33BY2cSNstJuYxvTrF3_gsFsjVjMFNFRRTa6w3qG3NiYh1BTltepP2D35xjJvDjmMojGyYUt4qZEbL7HEYQljJadowtVsr0Z8uoS_fDRHi_euhQKEtainwCU5xwP-OdFWS4mVf6TLSga-e7bahfED8lAK0wKACrjpIjL8d4P9wpb0l55xejGNFOtbbWHi4frOdtO9OOxIQGigF4VhSapLvGNKTq1lIKBoUr7jykxb1u8x9WhKi4X5CruPaOIE",
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : -6.226227,
               "lng" : 106.847663
            },
            "viewport" : {
               "northeast" : {
                  "lat" : -6.224883769708498,
                  "lng" : 106.8489245802915
               },
               "southwest" : {
                  "lat" : -6.227581730291503,
                  "lng" : 106.8462266197085
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png",
         "id" : "0d7b22d2f507af850a9b2349c4aab667b185bfd3",
         "name" : "Lembaga Pendidikan Forwarder Citra",
         "place_id" : "ChIJB2g2e3X0aS4RMmBKDzR9-JA",
         "plus_code" : {
            "compound_code" : "QRFX+G3 Jakarta, Daerah Khusus Ibukota Jakarta, Indonesia",
            "global_code" : "6P58QRFX+G3"
         },
         "reference" : "ChIJB2g2e3X0aS4RMmBKDzR9-JA",
         "scope" : "GOOGLE",
         "types" : [ "school", "point_of_interest", "establishment" ],
         "vicinity" : "Jalan Doktor Saharjo No.90, RT.1/RW.1, Tebet Barat"
      },
      {
         "geometry" : {
            "location" : {
               "lat" : -6.224798300000001,
               "lng" : 106.8497668
            },
            "viewport" : {
               "northeast" : {
                  "lat" : -6.223519219708498,
                  "lng" : 106.8511687802915
               },
               "southwest" : {
                  "lat" : -6.226217180291503,
                  "lng" : 106.8484708197085
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/school-71.png",
         "id" : "4fbbb8de1cae9e9695046dc1635ba4740e043b24",
         "name" : "Sekolah Dasar Negeri Tebet Barat 05 Pagi",
         "photos" : [
            {
               "height" : 581,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/103922188834564148985/photos\"\u003eMuhammad Fahrezi\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAAnbRH-U389KjLJajYPjyGhU6rKmIu4xj9VgK5nykZyNL7F2-16-heXOAgx1ZuYPSHDGCygjFeP91gtlKGS4riCsaDz-9Laqe3a_Nv0djiAVXnVDDAK6cVfLpn9OkAbNUWEhD3wS-5z-IQ6hgfNU42VVUMGhSJFDaQUcziw7SGEdqxdkkeAyxfsg",
               "width" : 581
            }
         ],
         "place_id" : "ChIJJVbQUI7zaS4Rm2Xt5hsmolE",
         "plus_code" : {
            "compound_code" : "QRGX+3W Jakarta, Daerah Khusus Ibukota Jakarta, Indonesia",
            "global_code" : "6P58QRGX+3W"
         },
         "rating" : 4.8,
         "reference" : "ChIJJVbQUI7zaS4Rm2Xt5hsmolE",
         "scope" : "GOOGLE",
         "types" : [ "point_of_interest", "school", "establishment" ],
         "user_ratings_total" : 19,
         "vicinity" : "Jalan Tebet Dalam III No.49, RT.3/RW.1, Tebet Barat"
      }

на мой взгляд, ошибка в приведенном выше примере связана с тем, что массив фотографий не находится ни в одном из разделов ответа json. Если я нажму или коснусь результатов ответа json с фотографиями из google_place_api, приложение запустится, как я и ожидал.

Как исправить ошибку, при которой нет ответа на фотографии в формате json?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
887
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Тест args.item.photos == false не работает так, как вы хотите, потому что он возвращает true, когда photos не существует. Вы можете проверить с помощью if (!args.item.photos) или if (typeof args.item.photos === 'undefined').

Тем не менее, вы повторяете немного кода. Я бы реорганизовал это во что-то вроде:

onItemTap: function (args) {
    const detailsProps = {
        name: args.item.name,
        vicinity: args.item.vicinity,
        place_id: args.item.place_id
    }

    // make sure photo_reference exists and add it to the props list
    if (typeof args.item.photos !== 'undefined' 
        && args.item.photos 
        && !!args.item.photos[0].photo_reference) {
            detailsProps.photo_reference = args.item.photos[0].photo_reference
        }

    this.$navigateTo (Details, {
        props: detailsProps
    })
}

удивительно ... Спасибо @tiago за вашу помощь

Jujur 13.03.2019 17:31

Другие вопросы по теме