[jQuery] Help With XML Parsing + Array Manipulation
Here is what I'm trying to do:
(1) Parse an external XML,
(2) enter the list of devices in the XML into an array,
(3) sort the array alphabetically (and group items in the arrays by
name if possible),
(4) print the devices individually in table cells.
Ideally, I'd like if the devices taken from the XML file
(straightforward: just <devices><device> device1 </device><device>
device2 </device> ... </devices>) could be more easily manipulated.
$(function() {
$.ajax({
type: "GET",
url: "devices.xml",
dataType: "xml",
success: function(xml)
{
// create array for the devices
var device_name = '', device_array = [];
// iterate through the xml and add the devices to the array
$(xml).find('device').each(function(index){
device_name = ($this).text();
device_array.push(device_name);
});
// sort the array
device_array.sort();
// iterate through and print the elements
for (var i = 0, item; item = device_array[i]; i++) {
$('<tr><td class="device_name"></td></tr>')
.html(item)
.appendTo('#devicelist');
};
}
});
});
--
This just outputs a blank space. I know there's an issue with sorting
on jQuery arrays, but I don't think that's where the script is
failing. Altogether, I'm having a difficult time trying to manipulate
an on-the-fly table created from a parsed XML, but can't think of any
alternatives.
If it's of any help, the following script works, but doesn't produce a
sorted, manipulate-able set of devices:
$(function() {
$.ajax({
type: "GET",
url: "devices.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find('device').each(function(index){
var device_name = $(this).text()
// create table layout
$('<tr><td class="device_name"></td></tr>')
.html(device_name)
.appendTo('#devicelist');
});
}
});
});