Nativescript Vue TypeError: Cannot read property '0' of undefined

Question

I have data from google_place_api, where the response data is json

I have a problem with the application I'm working on, where errors occur when clicked or taped on photos (photos) not on google_place_api

the following code that I made

<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
                            }
                    })
                }
            }
       }
    };

this is a response from 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"
      }

in my opinion the error in the above is because the photos array is not in one of the json response sections. If I click or tap on the results of the json response that has photos from google_place_api the application runs as I expected

How do I fix an error that doesn't have a json photos response?

Answer 1

The test args.item.photos == false doesn't work as you want because it returns true when photos does not exist. You could test with if (!args.item.photos) or if (typeof args.item.photos === 'undefined') .

Still, you are repeating a bit of code. I would refactor that to something like:

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
    })
}