For – loop through records and populate web templates

<!-- Step 1 - Retrieve a list of tracks (songs) liked by the logged in portal user -->
{% fetchxml liked_songs_query %}
  <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
  <entity name="musdyn_like">
    <attribute name="musdyn_name" />
  </entity>
</fetch>
{% endfetchxml %}

<!-- Step 2 - output the list -->
<ul>
{% for result in liked_songs_query.results.entities %}
  <li>{{ result.musdyn_name }}</li>
{% endfor %}
</ul>

<!-- Step 1: Retrieve a list of liked songs for the logged in portal user -->
{% fetchxml liked_songs_query %}
  <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
  <entity name="musdyn_like">
    <attribute name="createdon" />
    <attribute name="musdyn_track" />
    <attribute name="musdyn_likeid" />
    <attribute name="musdyn_name" />
    <order attribute="createdon" descending="true" />
    <filter type="and">
      <condition attribute="musdyn_customer" operator="eq" uitype="contact" value="{{ user.id }}" />
      <condition attribute="musdyn_track" operator="not-null" />
    </filter>
    <link-entity name="musdyn_track" from="musdyn_trackid" to="musdyn_track" visible="false" link-type="outer" alias="a_cd305801970beb11a813000d3a0b9232">
      <attribute name="musdyn_trackid" />
      <attribute name="musdyn_name" />
      <attribute name="musdyn_duration" />
      <attribute name="musdyn_audionoteguid" />
      <attribute name="musdyn_artworknoteguid" />
      <attribute name="musdyn_albumfirstreleasedon" />
      <attribute name="musdyn_mainartist" />
      <attribute name="musdyn_featuring" />
    </link-entity>
  </entity>
</fetch>
{% endfetchxml %}

<!-- Step 2: Output the results as a table, including a dislike button -->
{% if liked_songs_query.results.entities.size > 0 %}
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Title</th>
          <th>Album</th>
          <th>Date Added</th>
          <th>Like Status</th>
          <th>Duration</th>
        </tr>
      </thead>
      <tbody>
        {% for result in liked_songs_query.results.entities %}
        <tr data-id="{{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_trackid'] }}">
          <td>{{ forloop.index }}</td>
          <td data-attribute="musdyn_name" data-value="{{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_name'] }}">
          {% if result['a_cd305801970beb11a813000d3a0b9232.musdyn_artworknoteguid'] %}
            <img src="https://songify.powerappsportals.com/_entity/annotation/{{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_artworknoteguid'] }}" alt="Cover artwork for {{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_name'] }} by {{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_mainartist'].name }}">
          {% else %}
            <img src="https://songify.powerappsportals.com/artwork-not-found.svg" alt="Generic music icon, cover artwork not found">
          {% endif %}
          <span class="hero">{{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_name'] }}</span><br>
          {{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_mainartist'].name }}
          {% if result['a_cd305801970beb11a813000d3a0b9232.musdyn_featuring'] %}
          , {{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_featuring'].name }}{% endif %}</td>
            <td data-attribute="musdyn_albumfirstreleasedon">{{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_albumfirstreleasedon'].name }}</td>
            <td data-attribute="createdon">{{ result.createdon| date: 'MMM dd, yyyy' }}</td>
            <td><a class="like-button" item-guid="{{ result.musdyn_likeid }}" href="#" title="Like Button"><span class="glyphicon glyphicon-heart" aria-hidden="true"></a></span></td>
            <td data-attribute="musdyn_duration">{{ result['a_cd305801970beb11a813000d3a0b9232.musdyn_duration'] | round: 2}}</td>
            </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}

<!-- Step 1: Retrieve the playlist tracks (link table / intersection entity) related to this playlist, along with the track records (retrieve multiple) -->
{% fetchxml tracks_query %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
  <entity name="musdyn_playlisttrack">
    <attribute name="musdyn_name" />
    <attribute name="musdyn_track" />
    <attribute name="musdyn_order" />
    <attribute name="musdyn_playlisttrackid" />
    <order attribute="musdyn_order" descending="false" />
    <filter type="and">
      <condition attribute="musdyn_playlist" operator="eq" uitype="musdyn_playlist" value="{{ id }}" />
    </filter>
    <link-entity name="musdyn_track" from="musdyn_trackid" to="musdyn_track" visible="false" link-type="outer" alias="track">
      <attribute name="musdyn_name" />
      <attribute name="musdyn_mainartist" />
      <attribute name="musdyn_explicit" />
      <attribute name="musdyn_duration" />
      <attribute name="musdyn_albumfirstreleasedon" />
      <attribute name="musdyn_artworknoteguid" />
      <attribute name="musdyn_audionoteguid" />
    </link-entity>
  </entity>
</fetch>
{% endfetchxml %}

<!-- Step 2: Populate the JSON to feed the audio player (using the jAudio plugin) -->
<script>
(function(){
  // Populate the playlist with results from the tracks query
  var t = {
    playlist: [
        // Loop through each result in the tracks query
        {% for result in tracks_query.results.entities %}    
    {
      // Set the file to be played based on the track's Audio Note GUID field
      file: "/_entity/annotation/{{ result['track.musdyn_audionoteguid'] }}",
     // If the track's Artwork Note GUID field is populated...
      {% if result['track.musdyn_artworknoteguid'].size %}
      // ...Set the thumbnail image based on the track's Artwork Note GUID field
      thumb: "/_entity/annotation/{{ result['track.musdyn_artworknoteguid'] }}",
      // Otherwise, set the thumbnail to the Artwork Not Found web file as a fallback
      {% else %}
      thumb: "https://songify.powerappsportals.com/artwork-not-found.svg",
            {% endif %}
      trackName: "{{ result['track.musdyn_name'] }}",
      trackArtist: "{{ result['track.musdyn_mainartist'].name }}",
      trackAlbum: "{{ result['track.musdyn_albumfirstreleasedon'].name }}"
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}
</script>