Polymer Ajax Binding from routing parameter not working

Question

I am using iron-pages and app-router to send me to a new page, where I need an iron-ajax element to send a request with the parameter sent from the router.

However, when I try to add my parameter {{parameter.identifier}} in iron ajax it does not work.

I suspect it has something to do with the routing parameters being local and that iron-ajax does not see it? I have tried to add a property for the param, and a getter function but nothing seems to be working...

Furthermore, I know the ajax is correct since if I change the binding variable {{parameter.identifier}} to a value that exists in the database it queries alright.

<dom-module id="cst-data">
    <template>
        <style> 

    </style>

    <triplat-route name="dataRoute" params="{{parameters}}"></triplat-route>

    <iron-ajax
    id="getData"
    auto
    url="http:/.../oslc/os/OSLCPERSON?"
    params='{"oslc.where":"dcterms:identifier={{parameters.identifier}}"
            }'  

    headers='{"Content-Type": "application/json;charset=utf-8"'     
    handle-as="json"
    on-response="handleResponse"
    ></iron-ajax>
            <paper-card>{{parameters.identifier}}</paper-card>
            <paper-card>{{dataRes.name}}</paper-card>
</template>
</dom-module>
<script>
    Polymer({

        is: "cst-data" ,
        handleResponse: function () {
            this.dataRes = this.$.getData.lastResponse['rdfs:member'];
            }

    });
</script>

Answer 1

I found the solution,

What I could find was that the parameters in iron-ajax cant really handle dynamic inputs, so eventually, I got it working with a getter function. Then another problem appeared in that the getter return was inputting characters and not the string to the query, by adding a new temporary string first and return the string I was able to fix it.

    <triplat-route id="maximoDataRoute" name="maximo-data" params="{{parameter}}"></triplat-route>

<iron-ajax
    id="ajax"
    url="http://.../"
    headers='{"Content-Type": "application/json;charset=utf-8"'     
    handle-as="json"
    params$='{{_getParams(parameter)}}'
    on-response="handleResponse"
    auto></iron-ajax>

<script>

    Polymer({

        is: "cst-employee-maximo-data" ,
        properties: {
            res: Object,
            tempString: String,
            parameter :{
                type: Object,
                notify: true
            },
        },
        handleResponse: function (event) {
            console.log("Entering handleResponse")
            this.res = event.detail.response['member'];
            console.log(this.res)   
        },

       _getParams: function(parameter) {
        this.tempString = '{"oslc.where":"dcterms:identifier='+ this.parameter.identifier+'","oslc.select":"*"}'
        console.log("tempString: "+this.tempString)
        return this.tempString   
       }

   });
</script>

Another interesting thing I noted was that in the function _getParameters, I had to input a parameter, and it did not matter what I inputted, but if it did not have it, the "parameter.identifier" was unidentified, if someone can explain this it would be greatly appreciated!

Answer 2

The way, you did it, is right. It's normal that the function _getParams return whole query string.

Inside _getParams function, you don't need to use this.parameter.identifier but only parameter.identifier because you are passing identifier into that function as argument from binding {{_getParams(parameter)}}. This is great approach, because whenever this.parameter changes, function _getParams is called automatically. Otherwise you would not be able to ever again change params in iron-ajax