Currently, I am utilizing $http.get to retrieve a list of videos from YouTube using the API endpoint 'MY_API_KEY'.
The goal is to construct a link with the video ID in the format: "{{videoID}}". However, extracting the videoID proves to be challenging because it requires me to iterate through the videoList like this:
<div ng-repeat="video in videoList"
<iframe id="ytplayer" type="text/html" width="640" height="360" ng-src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="0" allowfullscreen></iframe>
</div>
An issue arises as Angular does not permit concatenating multiple expressions within interpolations, resulting in the console error:
Error: [$interpolate:noconcat] Error while interpolating: https://www.youtube.com/embed/{{video.id.videoId}}
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.
I have reviewed the $sce documentation and attempted to whitelist https://www.youtube.com/, yet encountered challenges.
To illustrate my code setup, here is a jsfiddle link: http://jsfiddle.net/xzdk3/. The displayed outcome may not appear due to restrictions on accessing the API key via IP addresses.
While contemplating solutions, creating a new array or finding an alternative approach seems necessary. Renaming video.id.videoID to a singular expression could resolve the interpolation obstacle, but I'm unsure how to achieve this within the ng-repeat syntax:
ng-repeat="video in videoList"Unfortunately, changing it directly using:
ng-repeat="video.id.videoId in videoList"is not viable. Any guidance or assistance would be greatly appreciated.