我下载了xml2json来自npm的图书馆然后安装typings但我的代码仍然有问题，我看到数据已在控制台中解析，但没有显示在 ion-list 中.
rss-service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import * as x2js from 'xml2json';
@Injectable()
export class RssService {
public xml2js: any = [];
constructor(public http: Http) {
console.log('Hello RssService Provider');
}
load() {
return Observable.create(s => {
this.http.get('url.xml')
.map(res => res.text())
.subscribe(data => {
var posts = JSON.stringify(data);
x2js.parseString(posts, function (err, result) {
console.log(posts);
});
}, error => {
console.log(JSON.stringify(error));
});
});
}
}
home.ts -home.html
import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';
import { RssService } from '../../providers/rss-service/rss-service';
import { DetailPage } from '../detail-page/detail-page';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [RssService]
})
export class HomePage {
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
public entries: any = [];
constructor(public rssService:RssService, public nav:NavController) {
}
ionViewDidLoad(){
this.rssService.load().subscribe(
data => {
this.entries.push(data);
}
);
}
openPage(entry) {
console.log('open page called with ' + entry.title);
this.nav.push(DetailPage, {selectedEntry:entry});
}
}
<ion-header>
<ion-navbar color="primary">
<ion-title text-center>
App Name
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-list>
<ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
<h2 class="feed-title">{{entry.title}}</h2>
</ion-item>
</ion-list>
</ion-content>
编辑
我也尝试过使用DOMParser我可以在控制台中显示 <item> 的数组其中每个都包含 <title> , <description> , <pubDate> , <enclosure> , <link>但无法在 ion-list 中显示它们.
你能帮我吗？
load() {
return Observable.create(s => {
this.http.get('url.xml')
.map(res => res.text())
.subscribe(data => {
if(data) {
var parser = new DOMParser();
var xmlData = parser.parseFromString(data, "application/xml");
var items = xmlData.querySelectorAll("item");
for (var index = 0; index < items.length; index++) {
var element = items[index];
console.log(element);
}
}
});
});
这是我要解析的 xml
<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
<channel>
<title><![CDATA[Site Name Home]]></title>
<link>http://www.my-site.it/home</link>
<description><![CDATA[Site description]]></description>
<pubDate>Sat, 14 Jan 2017 11:36:51 +0100</pubDate>
<image>
<url>http://www.image.it/uploads/../images/rss.jpg</url>
<title><![CDATA[Site Name]]></title>
<link>http://www.sitename.it/home</link>
</image>
<generator>Zend_Feed</generator>
<language>en</language>
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
<item>
<title><![CDATA[Title]]></title>
<link>http://link</link>
<description><![CDATA[Description]]></description>
<pubDate>Sat, 14 Jan 2017 10:28:00 +0100</pubDate>
<enclosure url="http://image-url.jpg" type="image/jpeg" length="110"/>
</item>
.
.
<item>...</item>
在控制台中，我得到的正是上面显示的项目数组
<item>
<title><![CDATA[Title]]></title>
<link>http://link</link>
<description><![CDATA[Description]]></description>
<pubDate>Sat, 14 Jan 2017 10:28:00 +0100</pubDate>
<enclosure url="http://image-url.jpg" type="image/jpeg" length="110"/>
</item>
.
.
<item>...</item>
编辑2
在load()中添加了您的代码
load() {
return Observable.create(s => {
this.http.get('url.xml')
.map(res => res.text())
.subscribe(data => {
var parser = new DOMParser();
var xmlData = parser.parseFromString(data, "application/xml");
// First get the information (title, description, ...)
var info = {};
(xmlData.querySelectorAll("channel>*:not(item)") || []).forEach(function(e){
var infoData = {};
var found = false;
e.childNodes.forEach(function(e){
// skip text nodes
if(e.nodeType == 3) return;
found = true;
infoData[e.tagName] = e.textContent;
});
if(found) info[e.tagName] = infoData;
else info[e.tagName] = e.textContent;
});
// Then, get the list of items
var items = [];
(xmlData.querySelectorAll("channel>item") || []).forEach(function(item){
var itemData = {};
item.childNodes.forEach(function(e){
// skip over text nodes
if(e.nodeType == 3) return;
// get attributes if exist (to support the 'enclosure' element)
var attr = {};
var found = false;
for(var i = 0, atr = e.attributes, l = e.attributes.length; i < l; i++){
found = true;
attr[atr[i].name] = atr[i].value;
}
if(found) itemData[e.tagName] = attr;
else itemData[e.tagName] = e.textContent;
});
items.push(itemData);
});
console.log("INFO: ", info);
console.log("ITEMS: ", items);
});
});
}
最佳答案
这段代码将生成两个对象:info，它保存标题、描述等信息，以及items，它是表示项目的对象数组。
这些对象的属性名称要么是标记名称，要么是属性名称，并且它们遵循与 XML 数据相同的层次结构。现在，由于它们是对象，因此可以轻松访问它们的数据，例如:
// Info object
var title = info.title;
var imgUrl = info.image.url;
//...
// Items array
items.forEach(function(item){
var itemTitle = item.title;
var itemEnclosureUrl = item.enclosure.url;
//...
});
var data = '<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0"><channel><title>Site Name</title><link>http://www.my-site.it/home</link><description>Site description</description><pubDate>Sat, 14 Jan 2017 11:36:51 +0100</pubDate><image><url>http://www.image.it/uploads/../images/rss.jpg</url><title><![CDATA[Site Name]]></title><link>http://www.sitename.it/home</link></image><generator>Zend_Feed</generator><language>en</language><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title><![CDATA[Title]]></title><link>http://link</link><description>Description</description><pubDate>Sat, 14 Jan 2017 10:28:00 +0100</pubDate><enclosure url="http://image-url.jpg" type="image/jpeg" length="110"/></item></channel></rss>';
var parser = new DOMParser();
var xmlData = parser.parseFromString(data, "application/xml");
// First get the information (title, description, ...)
var info = {};
(xmlData.querySelectorAll("channel>*:not(item)") || []).forEach(function(e){
var infoData = {};
var found = false;
e.childNodes.forEach(function(e){
// skip text nodes
if(e.nodeType == 3) return;
found = true;
infoData[e.tagName] = e.textContent;
});
if(found) info[e.tagName] = infoData;
else info[e.tagName] = e.textContent;
});
// Then, get the list of items
var items = [];
(xmlData.querySelectorAll("channel>item") || []).forEach(function(item){
var itemData = {};
item.childNodes.forEach(function(e){
// skip over text nodes
if(e.nodeType == 3) return;
// get attributes if exist (to support the 'enclosure' element)
var attr = {};
var found = false;
for(var i = 0, atr = e.attributes, l = e.attributes.length; i < l; i++){
found = true;
attr[atr[i].name] = atr[i].value;
}
if(found) itemData[e.tagName] = attr;
else itemData[e.tagName] = e.textContent;
});
items.push(itemData);
});
console.log("INFO: ", info);
console.log("ITEMS: ", items);如果 XML 数据采用您提供的形式，那么这将正常工作。如果更改，则必须更改一些代码以适应新格式。
此代码基于以下假设:XML 数据中有一个 channel 元素，并且标题和描述不是您提供的标签(我假设标题和描述将是文本和不是标签)。
关于javascript - 如何从 url 解析 xml 格式而不是 json 格式的 rss feed - Ionic 2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41557975/