如何从 url 解析 xml 格式而不是 json 格式的 rss 提要 - Ionic 2

Question

我从npm 下载了xml2json 库，然后安装了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>、@ 987654337@ 但无法在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);
    });
  });
}

Answer 1

此代码将生成两个对象：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 元素，并且标题和描述不是您提供的标签（我假设标题和描述将是文本而不是标签）。