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

Alex Hargrove
  • 1
  • 3
  • What are the issues you got? – Ofisora Sep 06 '17 at 06:39
  • Well one issue is that the second iron-ajax call is being made to a link preview API (trying to build this entirely client side) and {{item.guid}} contains the links from the RSS feed "items" in the dom-repeat template in which it's nested. Issue is links are all "http" so I need to slice(4) and use ?url=https{{item.guid}} for the second call. – Alex Hargrove Sep 09 '17 at 01:08
  • Now the question is whether that's the cause of the result I'm getting; namely, nothing. The text "Description" and "Test" does no appear anywhere. Console warnings RE insecure content not allowed and citing the unfurl?url->links. – Alex Hargrove Sep 09 '17 at 01:09
  • A threshold question that would be really helpful for me is to know how to access {{item.guid}} outside of the dom-repeat template (in the script tag I presume at bottom of element, which currently has only the boilerplate for a new polymer 2.0 element). And so I know .slice(4) on the variable will trunctate the first four characters and solve my problem (at least that part), but I have no idea how to run that function and update the property in the dom-repeat template {{item.guid}} that is. – Alex Hargrove Sep 09 '17 at 01:12
  • This is my first attempt at developing a useful application entirely on my own using only the platform, polymer web components, and vanilla javascript. Going through a javascript course in my spare time (run a tech company in my occupational time) and thought this would be a good challenge after overseeing the development of a polymer progressive web app at work recently. – Alex Hargrove Sep 09 '17 at 01:14
  • `https://unfurl.oroboro.com` this is not working for me – Ofisora Sep 09 '17 at 01:30
  • Well, that would explains why I felt I was walking backwards all the sudden. Site doesn't support https.Changed it to https after getting mixed content warnings and having to enable potentially unsafe scripts to test. – Alex Hargrove Sep 09 '17 at 20:12
  • If anyone has a linkpreview service they'd recommend that can be called from the client, please chime in. I've tried guteurls and had some luck but to get the style I want, I'd need some server side scripting and wanted to try to keep all of this client side to keep the scope of this first project narrower. Looks like I'm going to have to expand the scope of my project to include server side function (or gcloud function) and write to database then make iron-ajax calls to read from the database. At least I think that's the right direction. him – Alex Hargrove Sep 09 '17 at 20:12
  • This question is no longer needed since you have asked another one similar. You can delete this. – Ofisora Sep 11 '17 at 00:44

0 Answers0