Angular pick up an item within an array

I’m using angular to manipulate a tmdb api, but I’m having trouble getting an item that is inside an array, could you help me? the answer that the array returns to me is this:

{
    "id": 423108,
    "results": [{
        "id": "608177732da846006e382e45",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "qc6jN1BcJi0",
        "name": "Official Trailer – Warner Bros. UK & Ireland",
        "site": "YouTube",
        "size": 1080,
        "type": "Trailer"
    }, {
        "id": "6081f2879e45860058f36147",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "h9Q4zZS2v1k",
        "name": "Official Trailer",
        "site": "YouTube",
        "size": 1080,
        "type": "Trailer"
    }, {
        "id": "60a3f3d8cb75d1003f6cad3f",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "6Eb1V9gJ5Z4",
        "name": "Chasing Evil Featurette",
        "site": "YouTube",
        "size": 1080,
        "type": "Featurette"
    }, {
        "id": "60a7f244e16e5a003f89fcfb",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "4GjhydkUMrQ",
        "name": "The Conjuring: The Devil Made Me Do It - Demonic Possession Featurette - Warner Bros. UK",
        "site": "YouTube",
        "size": 1080,
        "type": "Featurette"
    }, {
        "id": "60b65a605c563400782c09c4",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "5FEdg3FhiGc",
        "name": "Final Trailer – Warner Bros. UK & Ireland",
        "site": "YouTube",
        "size": 1080,
        "type": "Trailer"
    }, {
        "id": "60b6e54aefd3c20041e08f6b",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "AB9mPsH2z1U",
        "name": "The Conjuring: The Devil Made Me Do It | 2021 | Clip: "
        Mitigating Circumstances " HD",
        "site": "YouTube",
        "size": 1080,
        "type": "Clip"
    }, {
        "id": "60b9622aabf8e2006fb33499",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "tLFnRAzcaEc",
        "name": "Final Trailer",
        "site": "YouTube",
        "size": 1080,
        "type": "Trailer"
    }, {
        "id": "60be2d10960cde006d905ecf",
        "iso_639_1": "en",
        "iso_3166_1": "US",
        "key": "2V2MmKkddM0",
        "name": "The Conjuring: The Devil Made Me Do It - Teaser",
        "site": "YouTube",
        "size": 1080,
        "type": "Teaser"
    }]
}

And I want to get the “key” item. The idea is to get the key and then concatenate it with the youtube link to redirect to the trailer on youtube, or put the youtube player in the application. I’m currently doing it this way:

this.clientService.getVideoID(this.id).subscribe(data => this.video = date)

But I only have access to video.results, I can’t give video.results.key

Answer

You can use the filter() function like so

const myVideo = results.filter(item => item.id === "608177732da846006e382e45")[0]

note that it will only work if the id is unique, filter returns an array filled with item that return true on the condition ( item.key === “608177732da846006e382e45”), and then we take the 1st one which is supposed to be the only one.

and then you can access myVideo.key

Obviously replace "608177732da846006e382e45" with whatever your input is

Advertisement

Answer