使用 xml 属性创建 javascript 数组

Question

鉴于此 XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<GRAPHVS>
    <BASICS>
        <numbers name="model.XML" type="Euclidean/symmetric/mixed" number_of_vertices="2" number_of_links="1" Coordinate_System="Euclidean/UTM/Polar" date_creation="23/06/2017" hour_creation="12:16:24"/>
    </BASICS>
    <VERTICES>
        <node id="1" coordx="100.02346" coordy="80.00101" coordz="21.10201" group="1" r="1" g="0" b="0" node_type="simple"/>
        <node id="2" coordx="120.12346" coordy="89.02112" coordz="26.20111" group="2" r="1" g="0" b="0" node_type="origin"/>
        <node id="3" coordx="125.12346" coordy="80.02112" coordz="22.20111" group="2" r="1" g="0" b="0" node_type="destination"/>
        <node id="4" coordx="120.12786" coordy="79.17842" coordz="19.27811" group="3" r="0" g="0" b="1" node_type="center"/>
    </VERTICES>
    <LINKS>
        <link origin="1" destination="2" cost="177" edge="1" linklabel="0" required="1" Cost="177" group="1" r="" g="" b="" />
    </LINKS>
</GRAPHVS>

使用 FileReader 我只想从此文件中获取一些属性，例如 id、coordx、coordy、coordz、r、g 和 b，将它们推入二维数组，如下所示：

var verticesArray = [
    [1, 100.02346, 80.00101, 21.10201, 1, 0, 0],
    [2, 120.12346, 89.02112, 26.20111, 1, 0, 0],
    [3, 125.12346, 80.02112, 22.20111, 1, 0, 0],
    [4, 120.12786, 79.17842, 19.27811, 0, 0, 1]
];

到目前为止我只解析了文件，但我在如何将这些属性准确地放入数组中遇到了麻烦，因为我对 JS 有点陌生

function readXML(evt) {
    var xmlFile = evt.target.files;
    var verticesArray = [];
    if (xmlFile){
        var xmlReader = new FileReader();
        xmlReader.onload = function() {
            var parsed = new DOMParser().parseFromString(this.result, "text/xml");
            console.log(parsed);
        };
        xmlReader.readAsText(xmlFile[0]);
    } else {
        alert("Failed");
    }
}

有什么想法哦，我该如何解决？

谢谢:)

Answer 1

您只需要使用 querySelector API 查询所有节点，并从这些元素中获取所需的属性：

/* This part is just to be able to run this snippet, in your case this string is coming from the file */
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<GRAPHVS>
    <BASICS>
        <numbers name="model.XML" type="Euclidean/symmetric/mixed" number_of_vertices="2" number_of_links="1" Coordinate_System="Euclidean/UTM/Polar" date_creation="23/06/2017" hour_creation="12:16:24"/>
    </BASICS>
    <VERTICES>
        <node id="1" coordx="100.02346" coordy="80.00101" coordz="21.10201" group="1" r="1" g="0" b="0" node_type="simple"/>
        <node id="2" coordx="120.12346" coordy="89.02112" coordz="26.20111" group="2" r="1" g="0" b="0" node_type="origin"/>
        <node id="3" coordx="125.12346" coordy="80.02112" coordz="22.20111" group="2" r="1" g="0" b="0" node_type="destination"/>
        <node id="4" coordx="120.12786" coordy="79.17842" coordz="19.27811" group="3" r="0" g="0" b="1" node_type="center"/>
    </VERTICES>
    <LINKS>
        <link origin="1" destination="2" cost="177" edge="1" linklabel="0" required="1" Cost="177" group="1" r="" g="" b="" />
    </LINKS>
</GRAPHVS>
`;

const xmlEl = new DOMParser().parseFromString(xml, 'text/xml');
const nodes = [...xmlEl.querySelectorAll("node")];
const columns = ["id", "coordx", "coordy", "r", "g", "b"];

const verticesArray = nodes.map(n => columns.map(col => n.getAttribute(col)));

console.log(verticesArray)

我正在使用一些 ES2015 特性作为 "const, " 箭头函数”和 "spread operator (the tree dots)"，但如果你只使用 ES5，你可以将它更改为 "var"s， "function(){ }"s 和 "Array slice" 分别是：

var nodes = Array.prototype.slice.call(xmlEl.querySelectorAll("node"))

使用 xml 属性创建 javascript 数组

Create javascript array using xml attributes

javascript

xml

arrays

parsing

filereader