javascript - Nested Iron Ajax -

ok. last post ambiguous. second post, let me try approach same problem in little more straighforward manner. below code. here screenshot of results get. regarding second iron-ajax call, if use curl in terminal () want (it's link preview service, title, img, desc etc). trying accomplish same iron-ajax post required parameters defined per spec. don't console errors (for first time) , based on [object.object] result when output last-response variable in body of second dom-repeat, appears returning json object first iron-ajax call (which work, includes link not enough data it, hence running link through second service returns data want display).

result running code locally

code:

<dom-module id="my-new-view"> <template> <!-- defines element's style , local dom -->   <style>   :host {     display: block;      padding: 16px;   } </style> <iron-ajax auto   url="https://api.rss2json.com/v1/api.json?rss_url=http://feeds.feedburner.com/drudgereportfeed"   params="{"fmt":"xml-rss"}"   handle-as="json"   last-response="{{ajaxresponse}}"></iron-ajax> <p>first: {{ajaxresponse}}</p> <template is="dom-repeat" items="[[ajaxresponse.items]]" as="item" index-as="item_no"> <p>{{item.title}}</p>  <iron-ajax auto method="post"   url="https://guteurls.de/api/"   params="{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}"   handle-as="json"   last-response="{{newajaxresponse}}"></iron-ajax>    <p>second: {{newajaxresponse}}</p>     <template is="dom-repeat" items="[[newajaxresponse.newitems]]" as="newitem" index-as="newitem_no">      <p>{{newitem.title}}</p>     <paper-card heading="{{newitem.title}}" image="{{newitem.image.url}}" alt="{{newitem.title}}">       <div class="card-content">        <h1>description: {{newitem.desc}}</h1>        <p>test</p>       </div>       <div class="card-actions">{{newitem.title}}         <paper-button>share</paper-button>         <paper-button>explore!</paper-button>       </div>     </paper-card>  </template> </template> </template>  <script> class mynewview extends polymer.element { static is() { return 'my-new-view'; } }    customelements.define(mynewview.is, mynewview);   </script> </dom-module> 

problems , solutions:

1. params="{"fmt":"xml-rss"}"
   • quoting not done properly. can single quote like
     params='{"fmt":"xml-rss"}' or params="{'fmt':'xml-rss'}"

2. first: {{ajaxresponse}} , second: {{newajaxresponse}}

   • you can use console debug since cannot display object that

3. params="{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}"

   • quoting not done properly.
   • attribute binding i.e. {{item.guid}} must followed $.
   • change params$='{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}'
4. newajaxresponse.newitems
   • there no newitems in newajaxresponse. use newajaxresponse
   • [note: newajaxresponse returned object must converted array since dom-repeat works array.]
5. before define fields desc, image.url make sure exists.

working code:

<dom-module id="my-new-view"> <template> <!-- defines element's style , local dom -->   <style>   :host {     display: block;      padding: 16px;   } </style> <iron-ajax auto url="https://api.rss2json.com/v1/api.json?rss_url=http://feeds.feedburner.com/drudgereportfeed" params='{"fmt":"xml-rss"}' handle-as="json" last-response="{{ajaxresponse}}"></iron-ajax> <p>first: {{ajaxresponse}}</p> <template is="dom-repeat" items="[[ajaxresponse.items]]" as="item" index-as="item_no">   <p>{{item.title}}</p>    <iron-ajax auto method="post" url="https://guteurls.de/api/" params$='{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}' handle-as="json" last-response="{{newajaxresponse}}"></iron-ajax>    <p>second: {{newajaxresponse}}</p>     <template is="dom-repeat" items="[[_toarray(newajaxresponse)]]" as="newitem" index-as="newitem_no">     <paper-card heading="{{newitem.title}}" image="{{newitem.img}}" alt="{{newitem.title}}">      <div class="card-content">        <h1>description: {{newitem.description}}</h1>        <p>test</p>      </div>      <div class="card-actions">{{newitem.title}}       <paper-button>share</paper-button>       <paper-button>explore!</paper-button>      </div>   </paper-card>    </template> </template> </template>  <script> class mynewview extends polymer.element {   static is() { return 'my-new-view'; }    _toarray(obj) {       var temparray = [];       temparray.push(obj);       //console.log(temparray);       return temparray;     }  }    customelements.define(mynewview.is, mynewview);   </script> </dom-module> 

you can check working demo here.