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，{{1 }}，r和g，将它们推送到2D数组中，如下所示：

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

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]
];

有任何想法哦，我怎么能解决这个问题？

谢谢：）

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功能作为“常量”，“箭头功能”和“传播操作符（树点）”，但如果您只使用ES5，则可以将其更改为“var”s，“ function（）{}“s”和“数组切片”分别为：

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

使用xml属性创建javascript数组

1 个答案: