Json response vue

Question

Newbie question.

I'm trying to print a city name using the props.

Having {{ props.feed.location }} print me:

{ "latitude": 50.85, "longitude": 4.35, "name": "Brussels, Belgium", "id": 213633143 }

But whenever I do {{ props.feed.location.name }} to print the city, I get JS error:

Error in render: "TypeError: Cannot read property 'name' of null"

found in

---> <VueInstagram>
       <Insta> at src/components/Insta.vue
         <Home> at src/views/Home.vue
           <App> at src/App.vue
             <Root>

Any ideas? Thanks!!

code

  <template v-slot:feeds="props" class="row">
      <div class="col-12">
        <li class="fancy-list card list-unstyled">
          <div class="innerinfo row">
            <div class="col-4">
              <!--  <img v-bind:src="props.feed.images.standard_resolution.url" /> -->
              <a v-bind:href="props.feed.link">
                <img
                  class="img-fluid rounded"
                  v-bind:src="props.feed.images.standard_resolution.urlNOT"
                />
              </a>
            </div>

            <div class="col-8">
              <span class="likes row align-items-center">
                <font-awesome-icon
                  icon="heart"
                  class="mr-2"
                  :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
                />
                <h5
                  :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
                >{{ props.feed.likes.count }}</h5>
              </span>
              <span
                :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
              >{{ props.feed.location.name }}</span>
            </div>
          </div>
        </li>
      </div>
    </template>

Feed response:

  "data": [{
        "comments": {
            "count": 0
        },
        "caption": {
            "created_time": "1296710352",
            "text": "Inside le truc #foodtruck",
            "from": {
                "username": "kevin",
                "full_name": "Kevin Systrom",
                "type": "user",
                "id": "3"
            },
            "id": "26621408"
        },
        "likes": {
            "count": 15
        },
        "link": "http://instagr.am/p/BWrVZ/",
        "user": {
            "username": "kevin",
            "profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_3_75sq_1295574122.jpg",
            "id": "3"
        },
        "created_time": "1296710327",
        "images": {
            "low_resolution": {
                "url": "http://distillery.s3.amazonaws.com/media/2011/02/02/6ea7baea55774c5e81e7e3e1f6e791a7_6.jpg",
                "width": 306,
                "height": 306
            },
            "thumbnail": {
                "url": "http://distillery.s3.amazonaws.com/media/2011/02/02/6ea7baea55774c5e81e7e3e1f6e791a7_5.jpg",
                "width": 150,
                "height": 150
            },
            "standard_resolution": {
                "url": "http://distillery.s3.amazonaws.com/media/2011/02/02/6ea7baea55774c5e81e7e3e1f6e791a7_7.jpg",
                "width": 612,
                "height": 612
            }
        },
        "type": "image",
        "users_in_photo": [],
        "filter": "Earlybird",
        "tags": ["foodtruck"],
        "id": "22721881",
        "location": {
            "latitude": 37.778720183610183,
            "longitude": -122.3962783813477,
            "id": "520640",
            "street_address": "",
            "name": "Le Truc"
        }
    },
    {
        "videos": {
            "low_resolution": {
                "url": "http://distilleryvesper9-13.ak.instagram.com/090d06dad9cd11e2aa0912313817975d_102.mp4",
                "width": 480,
                "height": 480
            },
            "standard_resolution": {
                "url": "http://distilleryvesper9-13.ak.instagram.com/090d06dad9cd11e2aa0912313817975d_101.mp4",
                "width": 640,
                "height": 640
            },
        "comments": {
            "count": 2
        },
        "caption": null,
        "likes": {
            "count": 1
        },
        "link": "http://instagr.am/p/D/",
        "created_time": "1279340983",
        "images": {
            "low_resolution": {
                "url": "http://distilleryimage2.ak.instagram.com/11f75f1cd9cc11e2a0fd22000aa8039a_6.jpg",
                "width": 306,
                "height": 306
            },
            "thumbnail": {
                "url": "http://distilleryimage2.ak.instagram.com/11f75f1cd9cc11e2a0fd22000aa8039a_5.jpg",
                "width": 150,
                "height": 150
            },
            "standard_resolution": {
                "url": "http://distilleryimage2.ak.instagram.com/11f75f1cd9cc11e2a0fd22000aa8039a_7.jpg",
                "width": 612,
                "height": 612
            }
        },
        "type": "video",
        "users_in_photo": null,
        "filter": "Vesper",
        "tags": [],
        "id": "363839373298",
        "user": {
            "username": "kevin",
            "full_name": "Kevin S",
            "profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_3_75sq_1295574122.jpg",
            "id": "3"
        },
        "location": null
    },
   ]
}

This is the basic response, so I target location > city. As I mentioned before everything else prints okay, links, likes, etc. except the location city, but if I print location alone, works.

Answer 1

In the second object of the data array, location is actually null

As suggested by @depperm, you can do something like:

{{ props.feed.location ? props.feed.location.name : '' }}

or, as I prefer:

<span v-if="props.feed && props.feed.location">
  {{ props.feed.location.name }}
</span>

Answer 2

I believe is async request, so when you try to show location.name on render, the location is not loaded yet.

So i think you must to add v-if, and this span will render after props.feed will loaded

<span v-if="props.feed.location" 
     :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.location.name }}</span>

or if you need to show span even if is not loaded, you can add computed

<span :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }">locationName>

<script>
export default {
    computed: {
        locationName() {
            return props.feed && props.feed.location ? props.feed.location.name : "";
        }
    }
}