Search code examples
javascriptjsonpolymergetattributeplunker

Call list-item by index number in Polymer function

I have combined a Polymer-element that gets results via the API of the Dutch Rijksmuseum (JSON output) with an element that gets coordinates of specific places. The artworks from the museum sometimes has an item called "productionPlaces", which can hold multiple values in a list.

The site currently shows the art-work, some of it's metadata, and the production places + the coordinates of those places: http://plnkr.co/edit/nbTN1kNzcqHANWECB5fI?p=preview

Now, I want to be able to only show the places + coordinates if they exist. At the very least if "productionPlaces" is empty, it should print out a little text, e.g. "Production place unknown". This should be a self-invoking function.

Since I am still having trouble with getting functions to self-invoke I am currently using an on-click event to execute the function that I have created thus far. I also use an alert-box so that I can see what I am doing.

The very first step in getting to where I need to be is getting the function to actually check the value of all "productionPlaces" list-items within every object.

So far, my current function to do this reads as follows:

checkPlace: function() {
  y = 1
  x = 0
  var place = this.object.artObjects[y].productionPlaces[x];
  alert (place)

The alert-box now shows "Zuid-Holland", which is indeed the first productionPlace (x=0) of the second object (y=1). So, the function works.

However, in order to reach my final-goal (explained above) the function needs to automatically recognize the value "x" and "y" from the API results. I have already started on "y". But I have not been successful, the following "button+function" construction is failing since the alert-box doesn't pop-up anymore:

<button on-click="{{checkPlace}}" objIndex="{{objIndex}}"></button>

checkPlace: function(s) {
var place =   this.object.artObjects[s.getAttribute('objIndex')].productionPlaces[0];
alert (place)

The current Template-Bind & Template-repeat should allow me to show the index number of each object via {{objIndex}}, this seems to work fine. So, why isn't my "button+function" construction producing a visible result in the alert-box?

Solution

  • i think your best bet would be to use a if template. that would look to see if the info exist in your response and display the info if true and hide it if not there. something like 

    <template if="{{obj.productionPlaces[0]}">
    // do something with {{obj.productionPlaces[0]}
</template>

    maybe http://plnkr.co/edit/92WtYDW0gao52aj7gpsb?p=preview

    hope this works for you .