Question

我从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>，{{1 }，<description>，<pubDate>，<enclosure>但无法在<link>中显示它们。

你能帮帮我吗？

ion-list

这是我尝试解析的xml

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 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>

修改2

在<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>

中添加了您的代码

load()

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元素，标题和描述中没有标记（我假设标题和描述将是文本而不是标记）

如何从url中解析rss feed而不是json格式的xs格式 - Ionic 2

1 个答案: