Using jquery, How can I iterate every node in xml?

Question

Using jquery, How can I iterate every node in xml?

I have another question about below example code.

below is index.html file

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

        <style>
            #frm, #raw {display:block; float:left; width:210px},
            #raw {height:150px; width:310px; margin-left:0.5em}
        </style>
        <title> INDEX </title>
    </head>

    <body>
        <form id="frm">
            Profile: <select id="profiles">
            <option> </option>
            </select>
            <br></br>

            Format:<select id="formats">
            <option value="json"> JSON </option>
            <option value="xml"> XML </option>
            </select>
            <br></br>
            <div id="output"></div>
        </form>
        <textarea id="raw"></textarea>
    </body>

    <script>
        $.get("http://localhost:8080/profiles",function (profile_names) {
            $.each(profile_names, function (i, pname) {
                $("#profiles").append("<option>" + pname + "</option>");
            });
        }, "json");
        $("#formats, #profiles").change(function () {
            var format = $("#formats").val();
            $.get("http://localhost:8080/profile/" + $("#profiles").val() + "." + format,
                function (profile, stat, jqXHR) {
                    var cT = jqXHR.getResponseHeader("Content-Type");
                    $("#raw").val(profile);
                    $("#output").html('');
                    if (cT === "application/json") {
                        $.each($.parseJSON(profile), function (k, v) {
                            $("#output").append("<b>" + k + "</b> : " + v + "<br>");
                        });
                        return;
                    }

                    if (cT === "application/xml") {
                        xmlDoc = $.parseXML( profile ),
                        $xml = $( xmlDoc );
                        $($xml).each(function(){
                            $("#output").append($(this).text() + "<br/>");
                         });
                    }
                }, 
            "text");
        });
    </script>
</html>

Second, server.js file

var http = require('http');
var fs = require('fs');
var path = require('path');
var profiles = require('./profiles');
var xml2js = require('xml2js');

var index = fs.readFileSync('index.html');
var routes, mimes = {xml: "application/xml", json: "application/json"}

function output(content, format, rootNode) {
    if (!format || format === 'json') {
        return JSON.stringify(content);
    }
    if (format === 'xml') {
        return (new xml2js.Builder({rootName: rootNode})).buildObject(content);
    }
}

routes = {
    'profiles': function (format) {
        return output(Object.keys(profiles), format);
    },
    '/profile': function (format, basename) {
        return output(profiles[basename], format, basename);
    }
};

http.createServer(function (request, response) {
var dirname = path.dirname(request.url),
    extname = path.extname(request.url),
// $.get('http://localhost:8080/profile/' + $('#profiles').val() + '.' + format
    basename = path.basename(request.url, extname);

    extname = extname.replace('.', ''); //remove period


    response.setHeader("Content-Type", mimes[extname] ||'text/html');

    if (routes.hasOwnProperty(dirname)) {
        response.end(routes[dirname](extname, basename));
        return;
    }
    if (routes.hasOwnProperty(basename)) {
        response.end(routes[basename](extname));
        return;
    }
    response.end(index);    
}).listen(8080);

below is profiles.js file

module.exports = {
    ryan: {
        name: "Ryan Dahl",
        irc: "ryah",
        twitter: "ryah",
        github: "ry",
        location: "San Francisco, USA",
        description: "Creator of node.js"
    },
    isaac: {
        name: "Isaac Schlueter",
        irc: "isaacs",
        twitter: "izs",
        github: "isaacs",
        location: "San Francisco, USA",
        description: "Former project gatekeeper, CTO npm, Inc."
    }
};

at index.html file,

After if (cT === "application/xml") { is not working properly compare to JSON one.

Actually, the original example code was like this

if (cT === "application/xml") {
    profile = jqXHR.responseXML.firstChild.childNodes;
    $.each(profile, function (k, v) {
    if (v && v.nodeType === 1) {
        $("#output").append("<b>" + v.tagName + "</b> : " + v.textContent + "<br>");
    }
});

but above one was not working so I searched a way to show all the child node and text at the

selected one.

Is there any way for XML to show the same format as JSON selected at index.html file?

Thank you for understanding dissy question!!!

javascript
jquery
xml
node.js

Answer 1

I found the way exactly what I want to show for element name and text.

if (cT === "application/xml") {
    var xmlDoc =$.parseXML( profile );
    var $xml = $(xmlDoc);
    var kids = $xml.children().children();
    kids.each(function(){
        var tagName=this.tagName;
        var val=$(this).text();
        $("#output").append("<b>" + tagName + "</b> : " + val + "<br>");
    });     
}

I do not know why but when profile is parsed for 'tj', below is the result.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<tj>
  <name>TJ Holowaychuk</name>
  <irc>tjholowaychuk</irc>
  <twitter>tjholowaychuk</twitter>
  <github>visionmedia</github>
  <location>Victoria, BC, Canada</location>
  <description>Author of express, jade and many other modules</description>
</tj>

So first child of the $xml is <tj> </tj>. so I used children() method twice and then

I can iterate all of <tj> </tj>es child and then print child's name and text.

Is there someone who can explain my code clearly

Please let me know.

Thank you.