Javascript解析XML文件
我是JS方面的新手,尝试通过AJAX调用解析XML文件作为响应,其格式如下:Javascript解析XML文件,javascript,Javascript,我是JS方面的新手,尝试通过AJAX调用解析XML文件作为响应,其格式如下: <chart> <categories> <name>'MSIE'</name> <name>'Firefox'</name> <name>'Chrome'</name> <name>'Safari'</name>
<chart>
<categories>
<name>'MSIE'</name>
<name>'Firefox'</name>
<name>'Chrome'</name>
<name>'Safari'</name>
<name>'Opera'</name>
</categories>
<name>'Browser Brands'</name>
<data>
<series>
<y>55.11</y>
<drilldown>
<name>'MSIE versions'</name>
<categories>
<name>'MSIE 8.0'</name>
<name>'MSIE 6.0'</name>
<name>'MSIE 7.0'</name>
<name>'MSIE 9.0'</name>
</categories>
<data>
<series>
<y>33.06</y>
<drilldown>
<name>'drilldown next level'</name>
<categories>
<name>'a'</name>
<name>'b'</name>
<name>'c'</name>
</categories>
<data>
<point>23</point>
<point>54</point>
<point>47</point>
</data>
</drilldown>
</series>
<point>10.85</point>
<point>7.35</point>
<point>2.41</point>
</data>
</drilldown>
</series>
<series>
<y>21.63</y>
<drilldown>
<name>'Firefox versions'</name>
<categories>
<name>'Firefox 3.6'</name>
<name>'Firefox 4.0'</name>
<name>'Firefox 3.5'</name>
<name>'Firefox 3.0'</name>
<name>'Firefox 2.0'</name>
</categories>
<data>
<point>13.52</point>
<point>5.43</point>
<point>1.58</point>
<point>0.83</point>
<point>0.20</point>
</data>
</drilldown>
</series>
<series>
<y>11.94</y>
<drilldown>
<name>'Chrome versions'</name>
<categories>
<name>'Chrome 10.0'</name>
<name>'Chrome 11.0'</name>
<name>'Chrome 8.0'</name>
<name>'Chrome 9.0'</name>
<name>'Chrome 12.0'</name>
<name>'Chrome 6.0'</name>
<name>'Chrome 5.0'</name>
<name>'Chrome 7.0'</name>
</categories>
<data>
<point>9.91</point>
<point>0.50</point>
<point>0.36</point>
<point>0.32</point>
<point>0.22</point>
<point>0.19</point>
<point>0.12</point>
<point>0.12</point>
</data>
</drilldown>
</series>
<series>
<y>7.15</y>
<drilldown>
<name>'Safari versions'</name>
<categories>
<name>'Safari 5.0'</name>
<name>'Safari 4.0'</name>
<name>'Safari Win 5.0'</name>
<name>'Safari 4.1'</name>
<name>'Safari/Maxthon'</name>
<name>'Safari 3.1'</name>
<name>'Safari 41'</name>
</categories>
<data>
<point>4.55</point>
<point>1.42</point>
<point>0.23</point>
<point>0.21</point>
<point>0.20</point>
<point>0.19</point>
<point>0.14</point>
</data>
</drilldown>
</series>
<series>
<y>2.14</y>
<drilldown>
<name>'Opera versions'</name>
<categories>
<name>'Opera 11.x'</name>
<name>'Opera 10.x'</name>
<name>'Opera 9.x'</name>
</categories>
<data>
<point>1.65</point>
<point>0.37</point>
<point>0.12</point>
</data>
</drilldown>
</series>
</data>
</chart>
由于我是新手,不知何故,我没有得到我想要实现的遍历和解析逻辑:
$.get('ex.xml', function(xml) {
var $xml = $(xml);
$xml.find('chart categories name').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
chart.setTitle.push($xml.find('chart name').text());
$xml.find('series').each(function(i, series) {
var seriesOptions = {
y: parseInt($(series).find('y').text()),
drilldown : []
};
$xml.find('series drilldown').each(function(i, drilldown) {
name : $(drilldown).find('name').text()
categories : [],
data: []
$xml.find('drilldown categories').each(function(i, categories) {
name : $(categories).find('name').text()
});
$xml.find('drilldown data').each(function(i, data) {
$xml.find('data point').each(function(i, point) {
seriesOptions.drilldown.data.push(parseInt($(point).text()))
});
});
});
});
});
如何访问遍历和每个叶/分支节点,以便获取图表数据,请注意:
A series will never have values leaf node
A series is represented as a {..<property : values>..}
A series will always one drilldown and a drilldown will have one series in itself which goes in repetition
A series will always have a proerty y or a drilldown
A drilldown will have name leaf node,categories branch and either a another series or a data branch
A category branch will always have a name leaf node
A data branch will always have values leaf node
序列永远不会有叶节点值
级数表示为{….}
一个系列总是一个向下钻取,向下钻取本身有一个重复的系列
一个系列总是有一个proerty或一个drilldown
向下展开将具有名称叶节点、类别分支和另一个系列或数据分支
类别分支将始终具有名称叶节点
数据分支将始终具有叶节点的值
请帮助我实现目标
提前感谢我想你想要的答案的关键是在jQuery中使用$(this)。这是each()函数中的自引用元素,因此对于每个元素,$(this)引用该元素 考虑到这一点,您可以执行以下操作:
var thisElement = $(this);
thisElement.find("some other selector").each(function(){
var theOtherSelector = $(this);
theOtherSelector.find("yet another selector").each(function(){
// and so forth...
};
})
请注意,我正在存储对变量的$(this)引用,以便在函数闭包范围内可以访问该值
希望这能回答你的问题
编辑:xml递归深度搜索的示例代码(尚未检查语法!)
但是,如何在循环中将具有“chart data series”元素的变量重新分配给“chart data drilldown series”,以便遍历XML树中的所有“series”。注:我不知道“图表数据深入系列”的深度,但我会从“图表数据系列”开始遍历。深度可以类似于“图表数据深入系列深入系列”,因此首先,您选择的选择器应该更具体,以便您只能选择直接子级。请参阅。然后,您可能需要定义一个函数来执行迭代的递归任务。我将编辑我的帖子作为一个例子谢谢,但是从递归函数返回的stopper case是什么呢?jquery的每一个都会自动为您计数。如果在选择器条件下找不到任何此类子级,则不会执行回调。
var thisElement = $(this);
thisElement.find("some other selector").each(function(){
var theOtherSelector = $(this);
theOtherSelector.find("yet another selector").each(function(){
// and so forth...
};
})
$xml.find("chart data series").each(function(){
var chartDataSeries = $(this);
var seriesDrillDownSearch = function(){
var seriesDrillDownElement = $(this);
// do your processing here ..
seriesDrillDownElement.find("series drilldown").each(seriesDrillDownSearch);
}();
}