解析angular2中的xml以在视图中呈现 [英] parsing xml in angular2 to be rendered in the view

问题描述

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

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

我尝试了 console.log（data.title）但是这会以未识别的形式返回给我

<$ （$ ../../ xmlConf / dashboard_journey.xml'）
.map（response => response）pre> getXml（）{
this.http.get .text（））
.subscribe（data => {
if（data）{
console.log（'fetching your xml'）;
console.log（data ）; //这显示了我的一切
}
}）;
}


xml

 < XML> 
<旅程> 
< 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.jpgalt =点击并收集/> 
< / imageName> 
   

使用下面的答案 p>

  var parser = new DOMParser（）; 
 xmlData = parser.parseFromString（data，application / xml）; 
  

以上代码的console.log：

目前正在循环迭代解析的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，然后你可以通过引用访问元素

示例
$ b

  var parser = new DOMParser（）; 
 xmlData = parser.parseFromString（data，application / xml）; 
  

Do I need to parse my xml to get the data from the xml to render in the html? I'm currently getting a local .xml file using http.get request and in console log its showing all the information that's in the xml file I think its just reading it.

Question is how to convert xml into json format in angular2?

I tried the console.log(data.title) but this is returning me as 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>

Using the answer below

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

console.log of the above code:

Currently doing for loop to iterate the parsed xml, however in my view its only giving me one object. ngFor only iterates objects that is in an array.

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);
            }

view:

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

解决方案

You can use DOMParser

You simply pass your data variable to DOMParser then you can access elements by reference

Example

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

这篇关于解析angular2中的xml以在视图中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！