Duplicate values with Polymer template repeat

Question

Okay any I have a strange thing happening with my polymer template

<polymer-element name="my-playlist" attributes="info">
    <template>
        <core-ajax url="/getlist" method="POST" auto response="{{data}}" handleAs="json">
        </core-ajax>
        
        <style>
        </style>
        <core-selector class="list">
            <template repeat="{{k in data}}">
                <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{response}}" handleAs="json">
                </core-ajax>
                <div class="item">
                    {{response.genre}}
                </div>
            </template>
        </core-selector>
    </template>
    <script>
        Polymer();
    </script>
</polymer-element>

What I am getting from this is a repeat of one of the responses that I get. I get three entries which is correct but the {{response.genre}} is repeating one of the responses from the ajax call instead of properly listing each response. My result looks like:

• R&B
• R&B
• R&B

and it should be something like:

• Rap
• R&B
• Jazz

It seems that I am making all of the proper requests but the template is - how do I properly handle each response so i am listing all responses instead of duplicating one value?

Any help would be great.

Answer 1

The problem is that response is being treated as a global variable, so every time you're running through repeat, it is writing over it. As a solution, you should bind to something that would change each repeat.

<template repeat="{{k in data}}">
    <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{k.response}}" handleAs="json">
    </core-ajax>
    <div class="item">
      {{k.response.genre}}
    </div>
</template>