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.

can you share the what props.feed looks like? Also the whole line where you print the prop — depperm
– depperm, Commented Jan 31, 2020 at 14:00
@depperm it would look something like this instagram.com/developer/endpoints/users check the /users/self/media/recent response — user6753358
– user6753358, Commented Jan 31, 2020 at 14:04
@niccord i'm not sure what to attach, i'm just printing it in a h4 tag. — user6753358
– user6753358, Commented Jan 31, 2020 at 14:05
@user6753358 the part of the template and some piece of code where you define the props and the data function, maybe — niccord
– niccord, Commented Jan 31, 2020 at 14:09

user2042869 · Accepted Answer · 2020-01-31 14:36:57Z

3

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 : "";
        }
    }
}

edited Jan 31, 2020 at 14:36

answered Jan 31, 2020 at 14:32

user2042869

981 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

niccord · Accepted Answer · 2020-01-31 14:38:06Z

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>

edited Jan 31, 2020 at 14:38

answered Jan 31, 2020 at 14:33

niccord

8445 silver badges20 bronze badges

1 Comment

depperm Over a year ago

so you could do something like: {{props.feed.location?props.feed.location.name:''}}

Collectives™ on Stack Overflow

Json response vue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related