Loop though xml and display values in alerts

Question

I have a string that is set up as Xml. This was a data set which i filled and then returned as string getXml().

I would like to grab all values under Sub-categories and have a alert show displaying each sub category.

I tried something like this but could not come right:

$.parseXML(xml).find('Table').each(function(index){
            var SubCategorySystem = $(this).find('SubCategorySystem').text();
            var SubCategory = $(this).find('SubCategory').text();
            alert(SubCategory);
        });

This is how my string looks.

<NewDataSet>
  <Table>
    <SubCategorySystem>Building</SubCategorySystem>
    <SubCategory>Building</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Electrical</SubCategorySystem>
    <SubCategory>Electrical</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Engineering</SubCategorySystem>
    <SubCategory>Engineering</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Inspection</SubCategorySystem>
    <SubCategory>Inspection</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Landscaping</SubCategorySystem>
    <SubCategory>Landscaping</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Mechanical</SubCategorySystem>
    <SubCategory>Mechanical</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Painting</SubCategorySystem>
    <SubCategory>Painting</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Plumbing</SubCategorySystem>
    <SubCategory>Plumbing</SubCategory>
  </Table>
  <Table>
    <SubCategorySystem>Safety &amp; Security</SubCategorySystem>
    <SubCategory>Safety &amp; Security</SubCategory>
  </Table>
</NewDataSet>" 

Answer 1

Use this function to load the xml

function loadXMLString(txt) {
        try {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = "false";
            xmlDoc.loadXML(txt);
            return (xmlDoc);
        }
        catch (e) {
            try {
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(txt, "text/xml");
                return (xmlDoc);
            }
            catch (e) {
                alert(e.message)
            }
        }
        return (null);
    }

and then call the function like this:

var xmlData = loadXMLString(originalxml);

Now you can simply do this:

var data =  xmlData.getElementsByTagName('SubCategory');
for(var i=0;i<data.length;i++)
{
    alert(data[i].textContent);
}

Check out this fiddle

Answer 2

I think the wrong part is that $.parseXML(xml) creates a XML Document but it does not return it as an object, so you won't be able to use jQuery methods on it.

Wrap it in an object and it should work

$($.parseXML(xml)).find('Table')

Answer 3

you can reference this two functions first

function getExtendedNodeValue(nodeName, xmlNode, i)
{
    var node = "";

    if(typeof(xmlNode.getElementsByTagName(nodeName)[i]) != "undefined" && xmlNode.getElementsByTagName(nodeName)[i].hasChildNodes())
    node = xmlNode.getElementsByTagName(nodeName)[i].firstChild.nodeValue;

    return node; 
}

function getNodeLength(nodeName, xmlNode){
    return xmlNode.getElementsByTagName(nodeName).length;
}

And below you can loop through

var len = getNodeLength("Table",xml);
var SubCategorySystem = "";
var SubCategory = "";

for(i=0;i<len;i++)
{
    SubCategorySystem = getExtendedNodeValue("SubCategorySystem",xml,i);
    SubCategory = getExtendedNodeValue("SubCategory",xml,i);

    console.log(SubCategorySystem + " == " + SubCategory);
}

You can find this FIDDLE