dynamically generating AJAX requests

[drm22...@gmail.com]

I am trying to develop a component that makes a variable number of AJAX requests, to different URL's.  Here is what it does:

1. Make an initial request to get the groups to which the user belongs.
2. When the initial request completes, make a request for each group returned.  The URL for the request includes the group id returned in the response to the initial reqest.
3. As each group request completes, and the group data to an array property.
4. When all of the group requests have completed, set a Boolean property so that the "loading" indicator becomes hidden.

This is straightforward to do with jquery.  You just call $.ajax for each group in step 2.  For step 4 you pass all of the Deferred objects returned by the $.ajax calls to $.whenAll.

It's clear how to do step 1 with iron-ajax.  I am looking for an example of how to accomplish steps 2 and 4 in Polymer.  All of the iron-ajax examples I have seen do one ajax request to a service whose URL is hard coded.  How do you do a variable number of request, where the URL's are determined at run time?

Thanks,

Dennis

[Daniel Llewellyn]

On Mon, 3 Oct 2016 at 14:14 <drm22...@gmail.com> wrote:

I am trying to develop a component that makes a variable number of AJAX requests, to different URL's.  Here is what it does:

1. Make an initial request to get the groups to which the user belongs.
2. When the initial request completes, make a request for each group returned.  The URL for the request includes the group id returned in the response to the initial reqest.
3. As each group request completes, and the group data to an array property.
4. When all of the group requests have completed, set a Boolean property so that the "loading" indicator becomes hidden.

Something like this might work:

---- CODE BELOW ----

 

<iron-ajax auto url="/your/initial/endpoint" response="{{response}}"></iron-ajax>

<template is="dom-repeat" items="[[response.groups]]">

    <iron-ajax auto url="[[_makeUrl(item, index)]]" on-response="_ajaxResponse"></iron-ajax>

</template>

<div hidden$="[[!_ajaxesComplete]]">

    Loading...

</div>

<script>

Polymer({

    ....

    properties: {

        ....

        _responses: {

            // used for data handled by part 3.

            type: Array,

            value: function() { return []; }

        },

        ....

        _ajaxesComplete: {

            // for part 4.

            type: Boolean,

            computed: '_doneYet(response.groups, _responses)'

        }

        ....

    }

    ....

    _makeUrl: function(item, index) {

        // this caters for dynamic urls returned by part 1. for use by part 2.

        return '/ajaxUrl/' + item;

    },

    ....

    _ajaxResponse: function(e) {

        // this does the data handling for part 3.

        this._responses.push(e.response);

    }

    ....

    _doneYet: function(groups, data) {

        // handles part 4.

        return groups.length === data.length;

    }

    ....

});