嵌套铁阿贾克斯 [英] Nested Iron Ajax
问题描述
好的.所以我的上一篇文章太含糊了.对于我的第二篇文章,让我尝试以更简洁的方式解决相同的问题.下面是代码.这是我得到的结果的屏幕截图.关于第二个Iron-ajax调用,如果我在带有()的终端中使用curl,则会得到我想要的(这是一个链接预览服务,因此是title,img,desc等).尝试用铁-ajax柱完成相同的操作,并按规范定义所需的参数.我没有收到任何控制台错误(第一次),并且基于我在第二个dom-repeat主体中输出last-response变量时得到的[object.Object]结果,似乎正在返回json对象就像第一个Iron-ajax调用(确实起作用,包括链接但没有足够的数据,因此通过第二个服务运行链接,该服务返回我要显示的数据)一样.
Ok. So my last post was too ambiguous. For my second post, let me try to approach the same problem in hopefully a little more straighforward manner. Below is the code. Here is a screenshot of the results I get. Regarding the second iron-ajax call, if I use curl in terminal with this () I get what I want (it's a link preview service, so title, img, desc etc). Trying to accomplish the same with iron-ajax post with required parameters defined per spec. I don't get any console errors (for the first time) and based on the [object.Object] result I get when I output the last-response variable in the body of second dom-repeat, appears to be returning a json object just like the first iron-ajax call (which does work, includes the link but not enough data about it, hence running link through second service that returns the data I want to display).
Result from running code locally
代码:
<dom-module id="my-new-view">
<template>
<!-- Defines the element's style and 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 get is() { return 'my-new-view'; }
}
customElements.define(MyNewView.is, MyNewView);
</script>
</dom-module>
推荐答案
问题和解决方案:
-
params="{"fmt":"xml-rss"}"
- 报价未正确完成.您可以像
一样单引号params='{"fmt":"xml-rss"}'
或params="{'fmt':'xml-rss'}"
- 报价未正确完成.您可以像
params="{"fmt":"xml-rss"}"
- Quoting not done properly. You can you single quote as well like
params='{"fmt":"xml-rss"}'
orparams="{'fmt':'xml-rss'}"
- Quoting not done properly. You can you single quote as well like
First: {{ajaxResponse}}
和Second: {{newAjaxResponse}}
- 您可以使用
console
进行调试,因为您无法显示这样的对象
- You can use
console
to debug since you cannot display object like that
params="{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}"
- 报价不正确.
- 属性绑定,即
{{item.guid}}
之后必须是$
. - 更改为
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 be followed by$
. - Change to
params$='{"u":"{{item.guid}}", "r":"https://127.0.0.1", "e":"s652imb8et42xd0bd", "t":"json"}'
-
newAjaxResponse
中没有newItems
.只需使用newAjaxResponse
- [注意:
newAjaxResponse
返回为Object
,必须将其转换为Array
,因为dom-repeat
仅与Array
一起使用.]
- There is no
newItems
innewAjaxResponse
. Just usenewAjaxResponse
- [Note:
newAjaxResponse
is returned asObject
which must be converted toArray
sincedom-repeat
works only withArray
.]
工作代码:
<dom-module id="my-new-view">
<template>
<!-- Defines the element's style and 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 get 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 the working demo here.
这篇关于嵌套铁阿贾克斯的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!