0

I'm trying to make an initial iron Ajax call to URL that's returning a JSON array object to {{ajaxResponse}}. Nested within that array is a link property (ajaxResponse.item.link). I'm then trying to use that link, inside a dom-repeat over the array from the first request, to populate the URL for a second Iron Ajax request, which returns a preview of the link as a json object. Finally, I have a second dom-repeat that loops through each link in the initial array and displays the "title, desc, image" values from the second request in a paper-card.

Finally, I'm trying to use the platform and avoid using jquery or really anything other than polymer 2.0, web components, and vanilla javascript (aside from the 3rd party proxies/parsers I'm using). Also doing this all client side thus far. Have been able to get it working using a jquery library but had issues getting it styled using the method that was working and again I'm trying to do this without jquery.

This is my first post on here so let me know if I've omitted anything relevant or should have done a more thorough search before asking. 

<iron-ajax auto
      url="https://api.rss2json.com/v1/api.json?rss_url=http://feeds.feedburner.com/DrudgeReportFeed?fmt=xml-rss"
      params="{}"
      handle-as="json"
      last-response="{{ajaxResponse}}"></iron-ajax>

    <template is="dom-repeat" items="[[ajaxResponse.items]]" as="item">

      <iron-ajax auto
      url="http://unfurl.oroboro.com/unfurl?url={{item.guid}}" //guid is the URL
      params="{}"
      handle-as="json"
      last-response="{{newAjaxResponse}}"></iron-ajax>


      <template is="dom-repeat" items="[[item.newAjaxResponse.links]]" as="link">
        <paper-card heading="{{link.title}}" image="{{link.image.url}}" alt="{{link.title}}">
          <div class="card-content">
           <h1>Description: {{link.desc}}</h1>
           <p>Test</p>
          </div>
          <div class="card-actions">{{link.title}}
            <paper-button>Share</paper-button>
            <paper-button>Explore!</paper-button>
          </div>
        </paper-card>
</template>
</template>

Changed unfurl to http per comment below. What would really help is if someone could answer the following: how do I access {{item.guid}} outside of the dom-repeat so I can do things like use a function to truncate the first four characters of the value and return the truncated value to the variable. (See comments below. Just realized I could edit this post instead of commenting on my own. Have read stackoverflow for years and learned a lot but this is my first time writing an app from (mostly) scratch and posting on the forum. Appreciate your patience with me!

I reposted this with all the code (cleaned up) and screenshot of results. Tested the APIs I'm using and they are working reliably. Here's link to the new post. Would greatly appreciate some feedback! Nested Iron Ajax

4

0 回答 0