解析 angular2 中的 xml 以在视图中呈现答案

【问题标题】：parsing xml in angular2 to be rendered in the view解析 angular2 中的 xml 以在视图中呈现
【发布时间】：2016-08-04 11:13:54
【问题描述】：

我是否需要解析我的 xml 以从 xml 中获取数据以在 html 中呈现？我目前正在使用 http.get 请求获取本地 .xml 文件，并在控制台日志中显示 xml 文件中的所有信息，我认为它只是在读取它。

问题是angular2中如何将xml转换成json格式？

我尝试了console.log(data.title)，但这让我返回unidentified

getXml() {
   this.http.get('../../xmlConf/dashboard_journey.xml')
    .map(response => response.text())
    .subscribe(data => {
        if(data) {
            console.log('fetching your xml');
            console.log(data); // this shows me everything
        }
    });
}

xml

<xml>
<journey>
    <title>Click and Collect</title>
    <shortDesc>
        <short_desc_1>lorem</short_desc_1>
        <short_desc_2>lorem</short_desc_2>
    </shortDesc>
    <longDesc>
        lorem
    </longDesc>
    <imageName>
        <img src="/journey_images/clickandcollect.jpg" alt="Click and Collect"/>
    </imageName>
</journey>

使用下面的答案

var parser = new DOMParser();
xmlData = parser.parseFromString(data, "application/xml");

上述代码的console.log：

目前正在执行 for 循环来迭代解析的 xml，但在我看来它只给了我一个对象。 ngFor 只迭代数组中的对象。

for (var i = 0; i <= newFormat.childNodes.length; i++) {
                this.title = newFormat.getElementsByTagName('title')[i].childNodes[0].nodeValue;
                this.desc = newFormat.getElementsByTagName('desc')[i].childNodes[0].nodeValue;
                console.log(this.title + ' = ' +  this.desc);
            }

查看：

<li>{{ title }}</li>

【问题讨论】：

当你付出时会发生什么，console.log(data[0].title)
如果我做 data[0] 它只显示我

标签： javascript html xml angular

【解决方案1】：

您可以使用DOMParser

您只需将数据变量传递给 DOMParser，然后您就可以通过引用访问元素

示例

var parser = new DOMParser();
xmlData = parser.parseFromString(data, "application/xml");

【讨论】：

我在控制台记录 xmlData，它给了我一个 json 格式，但是 xml 内容嵌套在 #document 中，当我执行 xmlData.title 或 longDesc 时，无法访问 title、longDesc 等元素
在上面的帖子中查看我的编辑，这仍然是 xml 而不是 json 格式。真的想避免为每个标签做每个只是为了返回它。
在我的手机 atm 上但尝试 xmlData.getElementsByTagName("title")[0].childNodes[0].nodeValue;
是的，我就是这样做的，在上面的原始帖子中查看我的 for 循环代码。