Finding an XML element value using Jquery

Question

I have an XML file that I need to find the item of specific PK using Jquery and Ajax so far I get to know the object but I have two questions :

1. Is there a better idea than doing a loop to find the pk value?
2. the XML is large and I need to know if there is a better way to query it than loading it into memory, does XSLT help better? or is there anyway to do it better than jquery?

Here is my code

$.ajax({
    url: 'xml/products.xml',
    dataType: 'html',
    success: function(xml) {
        $(xml).find('pk').each(function() {
            if ($(this).text() == "1")
            //do something
        });
    }
});

And here is my xml

<products>
<item>
    <pk>1</pk>
    <name>test</name>
</item>
<item>
    <pk>2</pk>
    <name>test2</name>
</item>
<item>
    <pk>3</pk>
    <name>test3</name>
</item>
<item>
    <pk>4</pk>
    <name>test4</name>
</item>
</products>

Solution 1

First, you have to write correct XML string, like you have to complete/ending same tag which has been started last one. on above sample code, you have done mistake with closing . it is wrong xml syntax. please make correction as below: 1 test

Here i have made on sample bins for parsing XML data or tags, Instead of Ajax i have just parse xml data on button click event because on bins Ajax call is not possible to call external file.

Here is Demo: http://codebins.com/bin/4ldqp7u

HTML

<div>
  <input type="button" id="btnxml" value="Get XML Data" />
  <input type="button" id="btnreset" value="Reset" style="display:inline"/>
  <div id="result">
  </div>
</div>
<div id="xmldata">
  <products>
    <item>
      <pk>
        1
      </pk>
      <name>
        test
      </name>
    </item>
    <item>
      <pk>
        2
      </pk>
      <name>
        test2
      </name>
    </item>
    <item>
      <pk>
        3
      </pk>
      <name>
        test3
      </name>
    </item>
    <item>
      <pk>
        4
      </pk>
      <name>
        test4
      </name>
    </item>
  </products>
</div>

JQuery:

$(function() {
    $("#btnxml").click(function() {
        var xml = "<rss version='2.0'>";
        xml += $("#xmldata").html();
        xml += "</rss>";
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);

        var result = "";
        if ($xml.find("item").length > 0) {

            result = "<table class='items'>";
            result += "<tr><th>PK</th><th>Name</th></tr>";

            $xml.find("item").each(function() {
                result += "<tr>";
                result += "<td>" + $(this).find("pk").text() + "</td>";
                result += "<td>" + $(this).find("name").text() + "</td>";
                result += "</tr>";
            });

            result += "</table>";
            $("#result").html(result);
        }


    });

    //Reset Result 
    $("#btnreset").click(function() {
        $("#result").html("");
    });

});

CSS:

#xmldata{
  display:none;
}
table.items{
  margin-top:5px;
  border:1px solid #6655a8;
  background:#55a5d9;
  width:20%;
}
table.items th{
  border-bottom:1px solid #6655a8;
}
table.items td{
  text-align:center;
}
input[type=button]{
  border:1px solid #a588d9;
  background:#b788d9;
}

Demo: http://codebins.com/bin/4ldqp7u

Solution 2

At the very least, you can use a more specific query than just "pk". In this example, $(xml).find("products item pk") should be faster.

Comments

[Lamis]

I'm not sure why I feel this answer is good but far from what I wanted....I have external xml file so I do need the ajax call on click...and my question was how to get a specific node by id

[gaurang171]

Hi, i have modify bins and needful changes to find Pk item by specific node id from xml data. please click on following link and check is it useful for you..? codebins.com/bin/4ldqp7u/2

[user1788736]

@gaurang171 if we have multiple tag names, how we can get values of those tags ? For example how to get values of strings in inside for each ?<dict> <key>id</key> <string>1</string> <key>name</key> <string>fruits</string> <key>category</key> <string>US Fruits</string> <key>categoryIcon</key> <string>somsite.com/categories/1.jpg</string> <key>country</key> <string>US</string> </dict>