Polymer consume HAL+JSON restful api

Question

I have a Spring HATEOAS restful api to provide datas for my polymer front-end.

Data is received like this:

GET /api/tips/news : 

[ {
  "id" : 68,
  "content" : "example tip",
  "score" : 1,
  "creationDate" : 1456257119018,
  "links" : [ {
    "rel" : "self",
    "href" : "http://localhost:81/api/tip/68"
  }, {
    "rel" : "author",
    "href" : "http://localhost:81/api/user/59"
  }, {
    "rel" : "for",
    "href" : "http://localhost:81/api/class/65"
  }, {
    "rel" : "against",
    "href" : "http://localhost:81/api/class/66"
  }, {
    "rel" : "comments",
    "href" : "http://localhost:81/api/tip/68/comments"
  } ]
} ]

Problem is that I want to get author property from links, so I want to do a second request once the first one is complete. To do this, I have a component that includes an iron-ajax component, to do the first api with my api Key and all the security stuff.

Here is how I do the first api call:

          <bnstips-api uri="/tip/news" result="{{data}}" auto></bnstips-api>
          <iron-list items="[[data]]" as="item">
            <template>
                <tip-card tip=[[item]]></tip-card>
            </template>
          </iron-list>

and here is the tip-card component:

<dom-module id="tip-card">
    <style>
    </style>
    <template>
        <paper-card>
            <div class="card-content">
                [[tip.content]]

                Author:<bnstips-api api-path="[[tip.links.1.href]]" result={{author}} auto></bnstips-api> [[author.name]] [[tip.links.1.href]]
            </div>
            <div class="card-actions">
                <paper-button>Upvote !</paper-button>
            </div>
        </paper-card>
    </template>
    <script>
    Polymer({
        is: "tip-card",
        properties: {
            tip: {
                type: Object,
                value: {}
            }
        }
    });
    </script>
</dom-module>

the api-path property is used to provide full path instead of just uri, here is the logic behind (in bnstips-api):

    if(this.uri != "" || this.uri != undefined){
        this.url = basePath+this.uri+"?apiKey="+apiKey;
    }
    if(this.apiPath != ""){
        this.url = this.apiPath+"?apiKey="+apiKey;
    }

But I get this:

So the link is provided, but the second ajax request gets a wrong uri, because in the console, I can see that I get a request to http://localhost:81/undefined?apiKey..... even if the property is here.

How to avoid that?

EDIT: I tried to console.log(this.apiPath) inside my handleRequest() method, and it shows the good value, seems like it's an asynchronous problem (second ajax request is sent before the first one actually ends, so the second one has an undefined path since it has to come from the first one. How to wait for the first one to finish before sending the second one?

Where is the variable "basePath" defined? Inside a function or inside "properties object"? — Flavio Ochoa, Feb 26 '16 at 17:01
unside a function, just before the two if statement you see. But problem is not that, it's apiPath being undefined while it should not be. — Supamiu, Feb 26 '16 at 17:03
You make the comment that you think that the 2nd ajax request is sent before the first completes, but nowhere do you show how you are calling the ajax requests. I assume its somewhere inside bnstips-api, but we only see snippets of that. Does the `iron-ajax` element have an `auto` attribute, or what is your logic to call `generateRequest()`? — akc42, Feb 27 '16 at 08:44

Polymer consume HAL+JSON restful api

0 Answers0