javascript - 解析 angular2 中的 xml 以在 View 中呈现

我是否需要解析我的 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>

最佳答案

您可以使用 DOMParser

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

示例

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

关于javascript - 解析 angular2 中的 xml 以在 View 中呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38765805/