Troubles with Polymer Ajax Binding when retrieving data from routing parameter

Using iron-pages and app-router to navigate to a new page, I encountered an issue with passing parameters to the iron-ajax element for making a request. The parameter {{parameter.identifier}} does not seem to work as expected in iron-ajax.

I believe this could be related to the local nature of routing parameters and how iron-ajax interacts with them. I've attempted adding a property for the param and implementing a getter function, but so far nothing has resolved the issue...

Moreover, the ajax functionality appears to be correct as substituting the binding variable {{parameter.identifier}} with a database value yields the desired result in queries.

<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 came across the solution,

After some investigation, I discovered that the parameters in iron-ajax cannot handle dynamic inputs well. To resolve this issue, I utilized a getter function. However, a new problem arose where the getter function was returning characters instead of a string for the query. By creating a temporary string and correctly formatting the return value, I was able to solve 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>

Furthermore, I observed an interesting aspect in the _getParameters function. I noticed that providing any input as a parameter was necessary, as without it, "parameter.identifier" would be undefined. Any insights into this behavior would be highly appreciated!

Answer №2

You're on the right track with how you've done it. It's completely normal for the function _getParams to return the entire query string.

When working within the _getParams function, there's no need to use this.parameter.identifier; just using parameter.identifier suffices since you're passing identifier as an argument from binding {{_getParams(parameter)}}. This method is effective because any changes made to this.parameter will automatically trigger a call to the _getParams function. Without this approach, modifying params in iron-ajax would become quite complicated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that a task is performed only once the DOM has finished loading following an AJAX request

<div id="mydiv"> ... <a id="my-ajax-link"> ... </a> ... ... <select id="my-selectmenu"> ... </select> ... </div> Upon clicking the 'my-ajax-link' link, it triggers an AJ ...

Unable to utilize await within a then statement to make a subsequent API call in a React application

Here is my scenario: I am making a call to one API, and in the `then` section of that API call, I am making another API call. The output of the first API will be passed as input to the second API. await axios .post(process.env + '/certificates/uplo ...

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

I am confused about the process of mounting components

Utilizing pattern container/representational components, I have a CardContainer component that retrieves data from a server and passes it to a Card component. Container Component: class CardContainer extends Component { state = { 'ca ...

Unable to delete data in Laravel 8

I am new to Laravel and facing an issue when trying to delete a row with a modal. The problem is that only the first row is getting removed and I can't figure out the reason. Here is my modal setup: <p class="card-text"><small clas ...

What is the method for implementing type notation with `React.useState`?

Currently working with React 16.8.3 and hooks, I am trying to implement React.useState type Mode = 'confirm' | 'deny' type Option = Number | null const [mode, setMode] = React.useState('confirm') const [option, setOption] ...

Glitch in JavaScript: Converting Text to Numbers

My current challenge involves converting text into numbers using code. Here is the code snippet I have: var vals= ["a","b","c","d","e","f","g","h","i","j", ...

A technique for calculating the total quantity of each item individually while using v-for in VueJS

Struggling to code (complete newbie) using VueJS and facing a major roadblock. I have a list of orders and I need to sum the quantities of each item separately. The only way to access the items is through v-for. <tr> <td data-th="list"> < ...

Is there a chance of a race condition occurring during file uploads when processed individually through AJAX with PHP?

I have created a form for uploading multiple files. <form id="myuploadform" enctype="multipart/form-data"> <input id="uploadedFiles" name="uploadedFiles" type="file" class="form-control&qu ...

Creating figures within an elliptical boundary

While this could be phrased as a mathematical problem, I am dealing with a programming challenge. In my case, I am working with a List containing an unknown number of elements (cluster nodes) that is only revealed once I receive the JSON data from the ser ...

Can you set up a mechanism to receive notifications for changes in an array variable in Angular?

I'm exploring methods to delay an HTTP request until the user stops interacting. I am considering using the debounceTime() operator from RxJs, but I need this to be triggered by changes in an array that I have defined. Here is the scenario: export c ...

Is your blockui overlay failing to cover the entire page?

I have implemented blockui to display a "Wait ... loading" popup on my webpage. It is mostly working fine, but I am facing a small issue where the overlay does not cover the entire width of the scroll window when I scroll right (although it covers the full ...

Is there a way to check if a user has previously visited a URL and automatically redirect them back to that page if they have

I'm looking for a way to detect if a user has already opened a specific link or URL in their browser tab. Is it possible to redirect the link to an active tab if the URL is already open? For example, if a user clicks on a link and JS code opens a new ...

What is the best way to update the $scope of a directive from another directive's controller in Angular.js?

One of my directives is responsible for loading a list of events from a service: .directive('appointments', [function () { return { restrict: 'CE', scope: { ngTemplate: '=', ...

Tips for customizing the color of the current date in the angular-material datepicker

I've created a function in angular-material to disable dates two days from now, but I'm struggling to change the color of the current date if it's disabled. The issue is that when the current date is disabled, it displays in a very light blu ...

What could be the reason for a particular product edit page showing up completely blank?

In my ongoing project, I am developing an admin panel that allows administrators to add new products to their website. These products are then stored in a Firestore database and managed using Redux Toolkit. The added products can be viewed and edited in th ...

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

Controlling User Roles within a React JS Application

Which libraries do you rely on for managing user roles in your React projects? All suggestions and advice are appreciated. Specifically, I am interested in controlling the visibility of different application components based on the user's role. ...

Inserting data with special characters from an Ajax POST request into a database

I am facing an issue with my form that contains text inputs. When I use an ajax event to send the values via POST to my database PHP script, special characters like ' " \ cause a problem. If the string contains only numbers/letters and no special ...

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Currently, I am executing a script inside a Pug template. The script commences by fetching an array of JSON objects from MongoDB. I then stringify the array (data) and proceed to loop through it in order to access each individual JSON object (doc). Subsequ ...