简体   繁体   English

在JS中解析XML文件

[英]Parsing XML File in JS

I am trying to parse an XML file in JS,The Below XML contains parent & child elements as given below 我正在尝试解析JS中的XML文件,下面的XML包含如下所示的父元素和子元素

MY XML File: 我的XML文件:

<?xml version="1.0" ?>
<root>
<program name="Vishal">
    <computation type="student">
        <module type="a1">              
            <modPath>aaa</modPath>
            <modInputTemplate>aaaaaaaa</modInputTemplate>
            <modSchematic>aaaa</modSchematic>
        </module>
        <module type="a2">              
            <modPath>xxxx</modPath>
            <modInputTemplate>tttttt</modInputTemplate>
            <modSchematic>yyyy</modSchematic>
        </module>
        <module type="a3">
            <modPath>bbbbbbbbbb</modPath>
            <modInputTemplate>bbbbbbbbbb</modInputTemplate>
            <modSchematic>bbbbbbbb</modSchematic>
        </module>
        <module type="a4">
            <modPath>cccc</modPath>
            <modInputTemplate>cccccc</modInputTemplate>
            <modSchematic>ccccccc</modSchematic>
        </module>
        <module type="a5">
            <modPath>ddddddd</modPath>
            <modInputTemplate>ddddddddddddd</modInputTemplate>
            <modSchematic>dddddddddd</modSchematic>
        </module>
        <module type="a6">
            <modPath>eeee</modPath>
            <modInputTemplate>eee</modInputTemplate>
            <modSchematic>eee</modSchematic>
        </module>
        <module type="a7">
            <modPath>ffff</modPath>
            <modInputTemplate>ffff</modInputTemplate>
            <modSchematic>fffff</modSchematic>
        </module>
        <module type="a8">
            <modPath>ggggggg</modPath>
            <modInputTemplate>ggggggg</modInputTemplate>
            <modSchematic>ggggggg</modSchematic>
        </module>
    </computation>
    <computation type="Employee">
        <module type="b1">              
            <modPath>lllll</modPath>
            <modInputTemplate>llllll</modInputTemplate>
            <modSchematic>lllll</modSchematic>
        </module>
        <module type="b2">              
            <modPath>mmmmmmmmm</modPath>
            <modInputTemplate>mmmmmmmm</modInputTemplate>
            <modSchematic>mmmmmm</modSchematic>
        </module>
        <module type="b3">
            <modPath>nnnn</modPath>
            <modInputTemplate>nnnnnn</modInputTemplate>
            <modSchematic>nnnn</modSchematic>
        </module>
        <module type="b4">
            <modPath>oooooo</modPath>
            <modInputTemplate>ooooooo</modInputTemplate>
            <modSchematic>oooooooooooo</modSchematic>
        </module>
        <module type="b5">
            <modPath>pppppppppp</modPath>
            <modInputTemplate>ppppppppppp</modInputTemplate>
            <modSchematic>ppppppppppp</modSchematic>
        </module>
        <module type="b6">
            <modPath>qqqqqqqqq</modPath>
            <modInputTemplate>qqqqqqqqqq</modInputTemplate>
            <modSchematic>qqqqqqqqqqq</modSchematic>
        </module>           
    </computation>      
</program>
<program name="Rakesh">
.......
.......
.......
</program>
<program name="Praveen">
.......
.......
.......
</program>
</root>

JavaScript File JavaScript文件

<html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script type="text/javascript">
    var xmlDoc;
    function loadxml()
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.onreadystatechange = readXML;
        xmlDoc.load("writers.xml");
    }

    function readXML()
    {
        if(xmlDoc.readyState == 4){
            myFunction(xmlDoc);
        }
        function myFunction(xml) {
            var x, i, txt;
            txt = "";
            var x = xmlDoc.getElementsByTagName("module");

            for( i = 0; i < x[0].childNodes.length; i++) {
                txt += x[0].childNodes[i].nodeName + ": " + x[0].childNodes[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("demo").innerHTML = txt;
        }
    }
</script>
</head>

<body onload="loadxml()">
    <p id="demo">Write output of loadxml()</p>
</body>
</html>

Out put what I am getting is only a1 contetnt: 输出我得到的只是一个竞争:

aaa

aaaaaaaa

aaaa

I want for all the childs (a1 to a8) 我想要所有的孩子(a1至a8)

Requirement: 需求:

1)If I pass a parent attribute value like 'name=Vishal",Then I should get all its child nodes as follows 1)如果我传递一个父属性值,例如“ name = Vishal”,那么我应该按如下方式获取其所有子节点

<computation type="student">
    <module type="a1">              
        <modPath>aaa</modPath>
        <modInputTemplate>aaaaaaaa</modInputTemplate>
        <modSchematic>aaaa</modSchematic>
    </module>
    <module type="a2">              
        <modPath>xxxx</modPath>
        <modInputTemplate>tttttt</modInputTemplate>
        <modSchematic>yyyy</modSchematic>
    </module>
    .
    .
    .
</computation>

2)Similarly if I pass the attribute as type="student",Then I should get all its child nodes, as given below 2)类似地,如果我将属性传递为type =“ student”,那么我应该获得其所有子节点,如下所示

    <module type="a1">              
        <modPath>aaa</modPath>
        <modInputTemplate>aaaaaaaa</modInputTemplate>
        <modSchematic>aaaa</modSchematic>
    </module>
    <module type="a2">              
        <modPath>xxxx</modPath>
        <modInputTemplate>tttttt</modInputTemplate>
        <modSchematic>yyyy</modSchematic>
    </module>
    .
    .
    .
    <module type="a8">
        <modPath>ggggggg</modPath>
        <modInputTemplate>ggggggg</modInputTemplate>
        <modSchematic>ggggggg</modSchematic>
    </module>

whats the logic to print above nodes by passing the attribute values? 通过传递属性值在节点上方打印的逻辑是什么?

You can do this by using the DOMParser. 您可以使用DOMParser做到这一点。 Here is an example. 这是一个例子。

var parser = new DOMParser();
var xml = '<your xml>';
var xmlDoc = parser.parseFromString(xml, 'text/xml');
// Now, you can simply query the xml document as you would the DOM...
var modules = xmlDoc.getElementsByTagName('module');
var vishalModules = xmlDoc.querySelector('[name="Vishal"] module');

Here is a fiddle that fills both of your requirements: 这是一个小提琴,可以满足您的两个要求:

https://jsfiddle.net/bcezsuc8/ https://jsfiddle.net/bcezsuc8/

UPDATE 更新

Here is another fiddle that gets all of the children under type student. 这是另一个使所有孩子都归类为学生的小提琴。 Note that it does not use ActiveX. 请注意,它不使用ActiveX。 You can just use the DOMParser which is native javascript. 您可以只使用本机javascript的DOMParser。

https://jsfiddle.net/bcezsuc8/3/ https://jsfiddle.net/bcezsuc8/3/

You can try this library: https://github.com/cheeriojs/cheerio 您可以尝试以下库: https : //github.com/cheeriojs/cheerio

var cheerio = require('cheerio'),
$ = cheerio.load(xml);
$('computation[type=student]'); // your second exmaple

You can learn other method in it's documents. 您可以在文档中学习其他方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM