jquery - Consume XML RSS feed using jquery in a predefined template
问题描述
I want use rss feed to show images on other website using jQuery
XML RSS structure is like
<rss version="2.0">
<channel>
<title>Gallery</title>
<link>http://www.example.com</link>
<description> Latest Photos</description>
<item>
<title>First Title of Photo</title>
<link >https://www.example.com/image/gallery/1.jpg </link>
<pubDate>Sun, 17 Dec 2017 00:00:00 GMT</pubDate>
<description>Description of the image </description>
</item>
<item>
<title>Second Title of Photo</title>
<link >https://www.example.com/image/gallery/2.jpg </link>
<pubDate>Sun, 18 Dec 2017 00:00:00 GMT</pubDate>
<description>Description of the image </description>
</item>
<item>
<title>Third Title of Photo</title>
<link >https://www.example.com/image/gallery/3.jpg </link>
<pubDate>Sun, 18 Dec 2017 00:00:00 GMT</pubDate>
<description>Description of the image </description>
</item>
</channel>
</rss>
My HTML page has following HTML structure
<div id="feed">
<div class="item">
<img src="image-path"/>
<span class="image-title"></span>
</div>
</div>
How can i change below code to work with the above structure..
$(document).ready(function() {
var url = 'http://www.recruiter.com/feed/career.xml'; //Data in XML format
$.ajax({
type: 'GET',
url: "https://api.rss2json.com/v1/api.json?rss_url=" + url, //For converting default format to JSON format
dataType: 'jsonp', //for making cross domain call
success: function(data) {
alert('Success');
$("#feed").append(data.feed);
console.log(data.feed.description);
}
});
});
解决方案
You need to loop through data.items
and add target data into html. As shown in bottom
$.each(data.items, function(i, item){
$("#feed").append('<div class="item"><img src="'+item.thumbnail+'"/><span class="image-title">'+item.thumbnail+'</span></div>');
});
So your code should change to:
var url = 'http://www.recruiter.com/feed/career.xml';
$.ajax({
type: 'GET',
url: "https://api.rss2json.com/v1/api.json?rss_url=" + url,
dataType: 'jsonp',
success: function(data) {
$.each(data.items, function(i, item){
$("#feed").append('<div class="item"><img src="'+item.thumbnail+'"/><span class="image-title">'+item.thumbnail+'</span></div>');
});
}
});
Check result in demo
推荐阅读
- minecraft - 如何为带电弩的射弹添加标签
- python - 如何使用 pytest 重用和执行整个测试方法
- java - Activiti BPM SQL 异常“错误:在表“act_ru_variable”上插入或更新违反外键约束“act_fk_var_exe”
- android - 是否可以在 Firebase 中为生产和开发环境使用相同的 Android 包名称?
- syntax - Sublime text - 添加分号和光标
- pycharm - 使用 GitHub CLI 创建 repo 时是否可以更改、克隆目录?
- reactjs - Reactjs-Popup:无法读取未定义的属性(读取“forwardRef”)
- javascript - JSDOM 环境的 Jest 测试运行器的运行时
- calendar - Apple 日历和 Google 日历 URL 不兼容 URL 太长
- angular - 这是避免参数使用 ENUM 的一种懒惰方式吗?