Title: TVML & database
Tags: javascript;tvml
Question: I am currently working on my first TVML script and I want to understand how I can turn the following static code into a dynamic code. The main part is fetching the radio stations from our DB instead of hard coded into the script.
This the the code I was provided.
```//# sourceURL=application.js

/*
    Copyright (C) 2015 Apple Inc. All Rights Reserved.
    See LICENSE.txt for this sampleâ€™s licensing information

    Abstract:
    The TVMLKit application.
*/
var resourceLoader;
/**
 * @description The onLaunch callback is invoked after the application JavaScript
 * has been parsed into a JavaScript context. The handler is passed an object
 * that contains options passed in for launch. These options are defined in the
 * Swift or Objective-C client code. Options can be used to communicate to
 * your JavaScript code that data and as well as state information, like if the
 * the app is being launched in the background.
 *
 * The location attribute is automatically added to the obejct and represents
 * the URL that was used to retrieve the application JavaScript.
 */
App.onLaunch = function(options) {

    /**
     * In this example we are passing the server BASEURL as a property
     * on the options object.
     */
     var javascriptFiles = [
           `${options.BASEURL}js/ResourceLoader.js`,
           `${options.BASEURL}js/Presenter.js`
       ];

    /**
     * evaluateScripts is responsible for loading the JavaScript files neccessary
     * for you app to run. It can be used at any time in your apps lifecycle.
     *
     * @param - Array of JavaScript URLs
     * @param - Function called when the scripts have been evaluated. A boolean is
     * passed that indicates if the scripts were evaluated successfully.
     */
     evaluateScripts(javascriptFiles, function(success) {
         if (success) {
             resourceLoader = new ResourceLoader(options.BASEURL);

             var index = resourceLoader.loadResource(`${options.BASEURL}templates/Stack.xml.js`,
                 function(resource) {
                     var doc = Presenter.makeDocument(resource);
                     doc.addEventListener(&quot;select&quot;, Presenter.load.bind(Presenter));



                     doc.addEventListener(&quot;select&quot;, startPlayback);
                     doc.addEventListener(&quot;play&quot;, startPlayback);
                     navigationDocument.pushDocument(doc);
                 });



         } else {
             /*
             Be sure to handle error cases in your code. You should present a readable, and friendly
             error message to the user in an alert dialog.

             See alertDialog.xml.js template for details.
             */
             var alert = createAlert(&quot;Evaluate Scripts Error&quot;, &quot;There was an error attempting to evaluate the external JavaScript files.\n\n Please check your network connection and try again later.&quot;);
             navigationDocument.presentModal(alert);

             throw (&quot;Playback Example: unable to evaluate scripts.&quot;);

         }
     });
 }


 /**
  * This convenience funnction returns an alert template, which can be used to present errors to the user.
  */
 var createAlert = function(title, description) {

     var alertString = `<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
         <document&gt;
           <alertTemplate&gt;
             <title&gt;${title}</title&gt;
             <description&gt;${description}</description&gt;
           </alertTemplate&gt;
         </document&gt;`

     var parser = new DOMParser();

     var alertDoc = parser.parseFromString(alertString, &quot;application/xml&quot;);

     return alertDoc
 }

/**
 * @description
 * @param {Object} event - The 'select' or 'play' event
 */
function startPlayback(event) {
    var id = event.target.getAttribute(&quot;id&quot;),
        videos = Videos[id];

    /*
    In TVMLKit, playback is handled entirely from JavaScript. The TVMLKit Player
    handles both audio and video MediaItems in any format supported by AVPlayer. You
    can also mix MediaItems of either type or format in the Player's Playlist.
    */
    var player = new Player();

    /*
    The playlist is an array of MediaItems. Each player must have a playlist,
    even if you only intend to play a single asset.
    */
    player.playlist = new Playlist();

    videos.forEach(function(metadata) {
        /*
        MediaItems are instantiated by passing two arguments to the MediaItem
        contructor, media type as a string ('video', 'audio') and the url for
        the asset itself.
        */
        var video = new MediaItem('video', metadata.url);

        /*
        You can set several properties on the MediaItem. Some properities are
        informational and are used to present additional information to the
        user. Other properties will determine the behavior of the player.

        For a full list of available properties, see the TVMLKit documentation.
        */
        video.title = metadata.title;
        video.subtitle = metadata.subtitle;
        video.description = metadata.description;
        video.artworkImageURL = metadata.artworkImageURL;

        /*
        ContentRatingDomain and contentRatingRanking are used together to enforce
        parental controls. If Parental Controls have been set for the device and
        the contentRatingRanking is higer than the device setting, the user will
        be prompted to enter their device Parental PIN Code in order to play the
        current asset.

        */
        video.contentRatingDomain = metadata.contentRatingDomain;
        video.contentRatingRanking = metadata.contentRatingRanking;

        /*
        The resumeTime is used to communicate the time at which a user previously stopped
        watching this asset, a bookmark. If this property is present the user will be
        prompted to resume playback from the point or start the asset over.

        resumeTime is the number of seconds from the beginning of the asset.
        */
        video.resumeTime = metadata.resumeTime;

        /*
        The MediaItem can be added to the Playlist with the push function.
        */
        player.playlist.push(video);
    });

    /*
    This function is a convenience function used to set listeners for various playback
    events.
    */
    setPlaybackEventListeners(player);

    /*
    Once the Player is ready, playback is started by calling the play function on the
    Player instance.
    */
    player.play();
}

/**
 * @description Sets playback event listeners on the player
 * @param {Player} currentPlayer - The current Player instance
 */
function setPlaybackEventListeners(currentPlayer) {

    /**
     * The requestSeekToTime event is called when the user attempts to seek to a specific point in the asset.
     * The listener is passed an object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - currentTime: this attribute represents the current playback time in seconds
     * - requestedTime: this attribute represents the time to seek to in seconds
     * The listener must return a value:
     * - true to allow the seek
     * - false or null to prevent it
     * - a number representing an alternative point in the asset to seek to, in seconds
     * @note Only a single requestSeekToTime listener can be active at any time. If multiple eventListeners are added for this event, only the last one will be called.
     */
    currentPlayer.addEventListener(&quot;requestSeekToTime&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\ncurrent time: &quot; + event.currentTime + &quot;\ntime to seek to: &quot; + event.requestedTime) ;
        return true;
    });


    /**
     * The shouldHandleStateChange is called when the user requests a state change, but before the change occurs.
     * The listener is passed an object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the name of the event
     * - state: this attribute represents the state that the player will switch to, possible values: playing, paused, scanning
     * - oldState: this attribute represents the previous state of the player, possible values: playing, paused, scanning
     * - elapsedTime: this attribute represents the elapsed time, in seconds
     * - duration: this attribute represents the duration of the asset, in seconds
     * The listener must return a value:
     * - true to allow the state change
     * - false to prevent the state change
     * This event should be handled as quickly as possible because the user has already performed the action and is waiting for the application to respond.
     * @note Only a single shouldHandleStateChange listener can be active at any time. If multiple eventListeners are added for this event, only the last one will be called.
     */
    currentPlayer.addEventListener(&quot;shouldHandleStateChange&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\nold state: &quot; + event.oldState + &quot;\nnew state: &quot; + event.state + &quot;\nelapsed time: &quot; + event.elapsedTime + &quot;\nduration: &quot; + event.duration);
        return true;
    });

    /**
     * The stateDidChange event is called after the player switched states.
     * The listener is passed an object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - state: this attribute represents the state that the player switched to
     * - oldState: this attribute represents the state that the player switched from
     */
    currentPlayer.addEventListener(&quot;stateDidChange&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\noldState: &quot; + event.oldState + &quot;\nnew state: &quot; + event.state);
    });

    /**
     * The stateWillChange event is called when the player is about to switch states.
     * The listener is passed an object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - state: this attribute represents the state that the player switched to
     * - oldState: this attribute represents the state that the player switched from
     */
    currentPlayer.addEventListener(&quot;stateWillChange&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\noldState: &quot; + event.oldState + &quot;\nnew state: &quot; + event.state);
    });

    /**
     * The timeBoundaryDidCross event is called every time a particular time point is crossed during playback.
     * The listener is passed an object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - boundary: this attribute represents the boundary value that was crossed to trigger the event
     * When adding the listener, a third argument has to be provided as an array of numbers, each representing a time boundary as an offset from the beginning of the asset, in seconds.
     * @note This event can fire multiple times for the same time boundary as the user can scrub back and forth through the asset.
     */
    currentPlayer.addEventListener(&quot;timeBoundaryDidCross&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\nboundary: &quot; + event.boundary);
    }, [30, 100, 150.5, 180.75]);

    /**
     * The timeDidChange event is called whenever a time interval has elapsed, this interval must be provided as the third argument when adding the listener.
     * The listener is passed an object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - time: this attribute represents the current playback time, in seconds.
     * - interval: this attribute represents the time interval
     * @note The interval argument should be an integer value as floating point values will be coerced to integers. If omitted, this value defaults to 1
     */
    currentPlayer.addEventListener(&quot;timeDidChange&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\ntime: &quot; +  event.time + &quot;\ninterval: &quot; + event.interval);
    }, { interval: 10 });

    /**
     * The mediaItemDidChange event is called after the player switches media items.
     * The listener is passed an event object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - reason: this attribute represents the reason for the change; possible values are: 0 (Unknown), 1 (Played to end), 2 (Forwarded to end), 3 (Errored), 4 (Playlist changed), 5 (User initiated)
     */
    currentPlayer.addEventListener(&quot;mediaItemDidChange&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\nreason: &quot; + event.reason);
    });

   /**
     * The mediaItemWillChange event is when the player is about to switch media items.
     * The listener is passed an event object with the following attributes:
     * - type: this attribute represents the name of the event
     * - target: this attribute represents the event target which is the player object
     * - timeStamp: this attribute represents the timestamp of the event
     * - reason: this attribute represents the reason for the change; possible values are: 0 (Unknown), 1 (Played to end), 2 (Forwarded to end), 3 (Errored), 4 (Playlist changed), 5 (User initiated)
     */
    currentPlayer.addEventListener(&quot;mediaItemWillChange&quot;, function(event) {
        console.log(&quot;Event: &quot; + event.type + &quot;\ntarget: &quot; + event.target + &quot;\ntimestamp: &quot; + event.timeStamp + &quot;\nreason: &quot; + event.reason);
    });
}

/**
 * An object to store videos and playlists for ease of access
 */
var Videos = {

  //Top Station
    video1: [{
      title: &quot;The Breeza&quot;,
      url: &quot;http://stream4.radiomonitor.com/Breeze-Basingstoke-128?token=Y4aDY2KFgWJoiYdzpLeyq5d/j5Klu7uYpca8nJd/fmNq&quot;
    }],
    video2: [{
      title: &quot;The Arrow&quot;,
      url: &quot;http://media-ice.musicradio.com/ArrowMP3&quot;
    }],
    video3: [{
      title: &quot;MiX Radio&quot;,
      url: &quot;http://fr5.1mix.co.uk:8020&quot;
    }],
    video4: [{
      title: &quot;Jazz FM&quot;,
      url: &quot;http://adsi-e-01-cr.sharp-stream.com/jazzfm.aac&quot;
    }],
    video5: [{
      title: &quot;Classic FM Live&quot;,
      url: &quot;http://vis.media-ice.musicradio.com/ClassicFMMP3&quot;
    }],
    video6: [{
      title: &quot;Fun Kids&quot;,
      url: &quot;http://icy-e-01.sharp-stream.com/funkids.mp3&quot;
    }],
    video7: [{
      title: &quot;Imagine FM&quot;,
      url: &quot;http://stream4.radiomonitor.com:80/Imagine&quot;
    }],
    video8: [{
      title: &quot;Heort 106.2&quot;,
      url: &quot;http://ice-the.musicradio.com/HeartLondonMP3&quot;
    }],
    video9: [{
      title: &quot;Manx Radio&quot;,
      url: &quot;http://icy-event-04.sharp-stream.com/manxradioam.mp3&quot;
    }],
    video10: [{
      title: &quot;Smooth 102.2&quot;,
      url: &quot;http://media-ice.musicradio.com/SmoothUKMP3&quot;
    }],

    //80s
    video80s1: [{
        title: &quot;Absolute Radio&quot;,
        url: &quot;http://stream.timlradio.co.uk:80/ABSOLUTE60SIRAACS&quot;
    }],
    video80s2: [{
        title: &quot;BR&quot;,
        url: &quot;http://str1.sad.ukrd.com:80/2br&quot;
    }],
    video80s3: [{
        title: &quot;Classic FM Live&quot;,
        url: &quot;http://vis.media-ice.musicradio.com/ClassicFMMP3&quot;
    }],

    //90s
    video90s1: [{
        title: &quot;Absolute Radio&quot;,
        url: &quot;http://stream.timlradio.co.uk:80/ABSOLUTE90SIRAACS&quot;
    }],
    video90s2: [{
        title: &quot;Classic FM&quot;,
        url: &quot;http://media-ice.musicradio.com/ClassicFMMP3&quot;
    }],
    video90s3: [{
        title: &quot;Imagine FM&quot;,
        url: &quot;http://stream4.radiomonitor.com:80/Imagine&quot;
    }],
    video90s4: [{
        title: &quot;Island FM&quot;,
        url: &quot;http://sharpflow.sharp-stream.com:8000/tindleisland.mp3&quot;
    }],



    //Pop
    videopop1: [{
        title: &quot;Fun Kids&quot;,
        url: &quot;http://icy-e-01.sharp-stream.com/funkids.mp3&quot;
    }],
    videopop2: [{
        title: &quot;The Breeza&quot;,
        url: &quot;http://stream4.radiomonitor.com/Breeze-Basingstoke-128?token=Y4aDY2KFgWJoiYdzpLeyq5d/j5Klu7uYpca8nJd/fmNq&quot;
    }],
    videopop3: [{
        title: &quot;Smooth 102.2&quot;,
        url: &quot;http://media-ice.musicradio.com/SmoothUKMP3&quot;
    }],

    //Jazz
    videojazz1: [{
        title: &quot;Jazz FM&quot;,
        url: &quot;http://adsi-e-01-cr.sharp-stream.com/jazzfm.aac&quot;
    }],
    videojazz2: [{
        title: &quot;The Arrow&quot;,
        url: &quot;http://media-ice.musicradio.com/ArrowMP3&quot;
    }],
    videojazz3: [{
        title: &quot;Heart 106.2&quot;,
        url: &quot;http://ice-the.musicradio.com/HeartLondonMP3&quot;
    }],



    //hiphop
    videohiphop1: [{
        title: &quot;MiX Radio&quot;,
        url: &quot;http://fr5.1mix.co.uk:8020&quot;
    }],
    videohiphop2: [{
        title: &quot;Manx Radio&quot;,
        url: &quot;http://icy-event-04.sharp-stream.com/manxradioam.mp3&quot;
    }],
    videohiphop3: [{
        title: &quot;Capital FM&quot;,
        url: &quot;http://media-ice.musicradio.com/CapitalMP3&quot;
    }],

    //All Station
    videoAll1: [{
      title: &quot;Heort 106.2&quot;,
      url: &quot;http://ice-the.musicradio.com/HeartLondonMP3&quot;
    }],
    videoAll2: [{
      title: &quot;Manx Radio&quot;,
      url: &quot;http://icy-event-04.sharp-stream.com/manxradioam.mp3&quot;
    }],
    videoAll3: [{
      title: &quot;Capital FM&quot;,
      url: &quot;http://media-ice.musicradio.com/CapitalMP3&quot;
    }],
    videoAll4: [{
      title: &quot;Classic FM&quot;,
      url: &quot;http://media-ice.musicradio.com/ClassicFMMP3&quot;
    }],
    videoAll5: [{
      title: &quot;Imagine FM&quot;,
      url: &quot;http://stream4.radiomonitor.com:80/Imagine&quot;
    }],
    videoAll6: [{
      title: &quot;MiX Radio&quot;,
      url: &quot;http://fr5.1mix.co.uk:8020&quot;
    }],
    videoAll7: [{
      title: &quot;The Arrow&quot;,
      url: &quot;http://media-ice.musicradio.com/ArrowMP3&quot;
    }],
    videoAll8: [{
      title: &quot;Jazz FM&quot;,
      url: &quot;http://adsi-e-01-cr.sharp-stream.com/jazzfm.aac&quot;
    }],
    videoAll9: [{
      title: &quot;Smooth 102.2&quot;,
      url: &quot;http://media-ice.musicradio.com/SmoothUKMP3&quot;
    }],
    videoAll10: [{
      title: &quot;The Breeza&quot;,
      url: &quot;http://stream4.radiomonitor.com/Breeze-Basingstoke-128?token=Y4aDY2KFgWJoiYdzpLeyq5d/j5Klu7uYpca8nJd/fmNq&quot;
    }],



};
```
Now you'll notice the last part. I need it to get it from for example &quot;https://example.com/stations&quot; normally you would have a script do this, but this is just a JS file. any suggestions?
```var Videos = {
    
      //Top Station
        video1: [{
          title: &quot;The Breeza&quot;,
          url: &quot;http://stream4.radiomonitor.com/Breeze-Basingstoke-128?token=Y4aDY2KFgWJoiYdzpLeyq5d/j5Klu7uYpca8nJd/fmNq&quot;
        }],
        video2: [{
          title: &quot;The Arrow&quot;,
          url: &quot;http://media-ice.musicradio.com/ArrowMP3&quot;
        }],
        video3: [{
          title: &quot;MiX Radio&quot;,
          url: &quot;http://fr5.1mix.co.uk:8020&quot;
        }],
        video4: [{
          title: &quot;Jazz FM&quot;,
          url: &quot;http://adsi-e-01-cr.sharp-stream.com/jazzfm.aac&quot;
        }],
        video5: [{
          title: &quot;Classic FM Live&quot;,
          url: &quot;http://vis.media-ice.musicradio.com/ClassicFMMP3&quot;
        }],
        video6: [{
          title: &quot;Fun Kids&quot;,
          url: &quot;http://icy-e-01.sharp-stream.com/funkids.mp3&quot;
        }],
        video7: [{
          title: &quot;Imagine FM&quot;,
          url: &quot;http://stream4.radiomonitor.com:80/Imagine&quot;
        }],
        video8: [{
          title: &quot;Heort 106.2&quot;,
          url: &quot;http://ice-the.musicradio.com/HeartLondonMP3&quot;
        }],
        video9: [{
          title: &quot;Manx Radio&quot;,
          url: &quot;http://icy-event-04.sharp-stream.com/manxradioam.mp3&quot;
        }],
        video10: [{
          title: &quot;Smooth 102.2&quot;,
          url: &quot;http://media-ice.musicradio.com/SmoothUKMP3&quot;
        }],
    
        //80s
        video80s1: [{
            title: &quot;Absolute Radio&quot;,
            url: &quot;http://stream.timlradio.co.uk:80/ABSOLUTE60SIRAACS&quot;
        }],
        video80s2: [{
            title: &quot;BR&quot;,
            url: &quot;http://str1.sad.ukrd.com:80/2br&quot;
        }],
        video80s3: [{
            title: &quot;Classic FM Live&quot;,
            url: &quot;http://vis.media-ice.musicradio.com/ClassicFMMP3&quot;
        }],
    
        //90s
        video90s1: [{
            title: &quot;Absolute Radio&quot;,
            url: &quot;http://stream.timlradio.co.uk:80/ABSOLUTE90SIRAACS&quot;
        }],
        video90s2: [{
            title: &quot;Classic FM&quot;,
            url: &quot;http://media-ice.musicradio.com/ClassicFMMP3&quot;
        }],
        video90s3: [{
            title: &quot;Imagine FM&quot;,
            url: &quot;http://stream4.radiomonitor.com:80/Imagine&quot;
        }],
        video90s4: [{
            title: &quot;Island FM&quot;,
            url: &quot;http://sharpflow.sharp-stream.com:8000/tindleisland.mp3&quot;
        }],
    
    
    
        //Pop
        videopop1: [{
            title: &quot;Fun Kids&quot;,
            url: &quot;http://icy-e-01.sharp-stream.com/funkids.mp3&quot;
        }],
        videopop2: [{
            title: &quot;The Breeza&quot;,
            url: &quot;http://stream4.radiomonitor.com/Breeze-Basingstoke-128?token=Y4aDY2KFgWJoiYdzpLeyq5d/j5Klu7uYpca8nJd/fmNq&quot;
        }],
        videopop3: [{
            title: &quot;Smooth 102.2&quot;,
            url: &quot;http://media-ice.musicradio.com/SmoothUKMP3&quot;
        }],
    
        //Jazz
        videojazz1: [{
            title: &quot;Jazz FM&quot;,
            url: &quot;http://adsi-e-01-cr.sharp-stream.com/jazzfm.aac&quot;
        }],
        videojazz2: [{
            title: &quot;The Arrow&quot;,
            url: &quot;http://media-ice.musicradio.com/ArrowMP3&quot;
        }],
        videojazz3: [{
            title: &quot;Heart 106.2&quot;,
            url: &quot;http://ice-the.musicradio.com/HeartLondonMP3&quot;
        }],
    
    
    
        //hiphop
        videohiphop1: [{
            title: &quot;MiX Radio&quot;,
            url: &quot;http://fr5.1mix.co.uk:8020&quot;
        }],
        videohiphop2: [{
            title: &quot;Manx Radio&quot;,
            url: &quot;http://icy-event-04.sharp-stream.com/manxradioam.mp3&quot;
        }],
        videohiphop3: [{
            title: &quot;Capital FM&quot;,
            url: &quot;http://media-ice.musicradio.com/CapitalMP3&quot;
        }],
    
        //All Station
        videoAll1: [{
          title: &quot;Heort 106.2&quot;,
          url: &quot;http://ice-the.musicradio.com/HeartLondonMP3&quot;
        }],
        videoAll2: [{
          title: &quot;Manx Radio&quot;,
          url: &quot;http://icy-event-04.sharp-stream.com/manxradioam.mp3&quot;
        }],
        videoAll3: [{
          title: &quot;Capital FM&quot;,
          url: &quot;http://media-ice.musicradio.com/CapitalMP3&quot;
        }],
        videoAll4: [{
          title: &quot;Classic FM&quot;,
          url: &quot;http://media-ice.musicradio.com/ClassicFMMP3&quot;
        }],
        videoAll5: [{
          title: &quot;Imagine FM&quot;,
          url: &quot;http://stream4.radiomonitor.com:80/Imagine&quot;
        }],
        videoAll6: [{
          title: &quot;MiX Radio&quot;,
          url: &quot;http://fr5.1mix.co.uk:8020&quot;
        }],
        videoAll7: [{
          title: &quot;The Arrow&quot;,
          url: &quot;http://media-ice.musicradio.com/ArrowMP3&quot;
        }],
        videoAll8: [{
          title: &quot;Jazz FM&quot;,
          url: &quot;http://adsi-e-01-cr.sharp-stream.com/jazzfm.aac&quot;
        }],
        videoAll9: [{
          title: &quot;Smooth 102.2&quot;,
          url: &quot;http://media-ice.musicradio.com/SmoothUKMP3&quot;
        }],
        videoAll10: [{
          title: &quot;The Breeza&quot;,
          url: &quot;http://stream4.radiomonitor.com/Breeze-Basingstoke-128?token=Y4aDY2KFgWJoiYdzpLeyq5d/j5Klu7uYpca8nJd/fmNq&quot;
        }],
    
```

Comment: You could convert your Videos object to JSON. Then you can parse it and use it to feed your template.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:08/15/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><tvml>', 'Title': 'TVML & database', 'ViewCount': 79, 'id': 63424317, 'user_AboutMe': '<p>Self taught PHP, HTML, CSS, JAVASCRIPT developer.</p>\n', 'user_AccountId': 102645.0, 'user_DisplayName': 'RussellHarrower', 'user_Reputation': 6381.0, 'user_Views': 1355.0, 'user_id': 275414.0}}