GetVideos API, Cant get the key parameter inside the array

May 8, 2022

Im trying to use Angular.js to make a movie Website using the Api.
I’ve reached the part where I want to put the trailer of the movie in a button, but everytime I try and use the GetVideo Api it doesn’t give me a proper response because it can’t get to the key parameter.
Whenever I call the api it gives me this response:

{"id":675353,"results":[{"iso_639_1":"en","iso_3166_1":"US","name":"Knuckle Down Featurette","key":"9djAMds545g","site":"YouTube","size":1080,"type":"Featurette","official":true,"published_at":"2022-04-06T13:03:17.000Z","id":"625f56d80792e10177d1f049"},{"iso_639_1":"en","iso_3166_1":"US","name":"Put A Ring On It Clip","key":"RHSU0SJv33A","site":"YouTube","size":1080,"type":"Clip","official":true,"published_at":"2022-04-04T15:00:44.000Z","id":"625f56c9d4cc8e0051a2ea47"},{"iso_639_1":"en","iso_3166_1":"US","name":"Kid Cudi","key":"YkZ1aAPApAc","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-04-03T16:00:58.000Z","id":"624abb4d84591c0064898ed3"},{"iso_639_1":"en","iso_3166_1":"US","name":"No Spoilers","key":"UXWwYfvJ7BA","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-03-29T16:00:58.000Z","id":"625f56b7a5046e00a473d13c"},{"iso_639_1":"en","iso_3166_1":"US","name":"Bigger, Bluer, Better","key":"Xr-VlbaJvcA","site":"YouTube","size":1080,"type":"Featurette","official":true,"published_at":"2022-03-28T13:03:21.000Z","id":"625f52e7db952d004f89d2a6"},{"iso_639_1":"en","iso_3166_1":"US","name":"Meet Knuckles Clip","key":"LF64NG_NJQw","site":"YouTube","size":1080,"type":"Clip","official":true,"published_at":"2022-03-28T13:03:01.000Z","id":"625f52b8e61e6d0050f7f638"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"I Make This Look Good\" Clip","key":"qdJfgKGgHP4","site":"YouTube","size":1080,"type":"Clip","official":true,"published_at":"2022-03-25T13:00:36.000Z","id":"62413ad9706e5600481793ca"},{"iso_639_1":"en","iso_3166_1":"US","name":"Final Trailer","key":"47r8FXYZWNU","site":"YouTube","size":1080,"type":"Trailer","official":true,"published_at":"2022-03-14T13:02:25.000Z","id":"622f6e2e9c24fc0044921909"},{"iso_639_1":"en","iso_3166_1":"US","name":"Madness","key":"F5uv5XiNHAs","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-03-13T19:00:19.000Z","id":"6269b877c613ce006684544b"},{"iso_639_1":"en","iso_3166_1":"US","name":"Fastest Trailer","key":"HCzqO6SPgnk","site":"YouTube","size":1080,"type":"Featurette","official":true,"published_at":"2022-03-13T16:00:32.000Z","id":"622f6e5098f1f1007808f169"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"Blue Justice\"","key":"sEOrfwBCxYI","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-03-02T14:08:12.000Z","id":"62384a38db4ed6001b06107f"},{"iso_639_1":"en","iso_3166_1":"US","name":"Choose Your Team","key":"7NVMZWV_vTg","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-13T17:01:52.000Z","id":"62094453cb8028009c0204c0"},{"iso_639_1":"en","iso_3166_1":"US","name":"Big Game Spot","key":"uVj6vs-738o","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-11T14:07:53.000Z","id":"62068d96f48b340097c51eb0"},{"iso_639_1":"en","iso_3166_1":"US","name":"Rings","key":"9-PbLuusH44","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-10T17:01:06.000Z","id":"62068e0fefd3c2001cde1b88"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"The Real Competition Begins\"","key":"vxdzRz6gUD4","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-07T17:22:36.000Z","id":"623849dc9ee0ef0046da27bb"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"Red Quill or Blue Quill\"","key":"S8qRuGm2E_I","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2021-12-22T19:56:51.000Z","id":"61d223311684f7001ca74c6c"},{"iso_639_1":"en","iso_3166_1":"US","name":"Official Trailer","key":"G5kzUpWAusI","site":"YouTube","size":1080,"type":"Trailer","official":true,"published_at":"2021-12-10T01:41:15.000Z","id":"61b2b31b38e510008aee0361"},{"iso_639_1":"en","iso_3166_1":"US","name":"Title Announcement","key":"sQuoffM1y-w","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2021-02-10T15:00:33.000Z","id":"602416bcc2b9df003ea481d4"}]}

As you can see it gives me the parameter result that is an array of objects which is each video the api gives me.
For example, I want to use the key from the first video, how can I, using *ngIf, get to that key parameter.
So far my code has been like this, and I cant find a way to make it work.

 <div *ngIf="videos">
        <a href="https://youtu.be/{{ videos.key }}">
          <button>
            <i class="fa fa-play"> Watch Video</i>
          </button>
        </a>
      </div>

The videos inside the *ngIf is the variable name I gave to the api so I could reach it inside the html.
Whenever I try to use videos.key it doens’t give me anything, like it doesn’t exist..

>Solution :

I think what you need is

 <div *ngIf="videos?.results.length > 0">
        <-- Get first item -->
        <a href="https://youtu.be/{{ videos.results[0].key }}">
          <button>
            <i class="fa fa-play"> Watch Video</i>
          </button>
        </a>
</div>