CODEWITHSUNDEEP
javascriptjquery
Light
Light

Reputation: 1097

How to iterate through the element attribute value in jquery?

I want to iterate through element attribute value and get the following values:
1. Email
2. Department

The Element Attribute value looks like:

<div id="divEntityData">
<div data="

<ArrayOfDictionaryEntry xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<DictionaryEntry>
<Key xsi:type="xsd:string">Email</Key>
<Value xsi:type="xsd:string">[email protected]</Value>
</DictionaryEntry>

<DictionaryEntry>
<Key xsi:type="xsd:string">Department</Key>
<Value xsi:type="xsd:string">IT</Value>
</DictionaryEntry>


<DictionaryEntry>
<Key xsi:type="xsd:string">AccountName</Key>
<Value xsi:type="xsd:string">abc</Value>
</DictionaryEntry>

<DictionaryEntry>
<Key xsi:type="xsd:string">PrincipalType</Key>
<Value xsi:type="xsd:string">User</Value>
</DictionaryEntry>

</ArrayOfDictionaryEntry>
">
</div>
</div>

So far i tried like this but not got proper output:

$(document).ready(function(){
var d = $("#divEntityData").find("div").attr("data");
//console.log();
for (var i=0; i<$(d).length; i++) {
    console.log($(d)[i]);
}
});

Upvotes: 3

Views: 783

Answers (3)

PeterKA
PeterKA

Reputation: 24648

var xml = $.parseXML( $('#divEntityData > div[data-xml]').data('xml') );
var xObj = {};
$(xml).find('DictionaryEntry').each(function(i,v) {
  xObj[ $(v).find('Key').text() ] = $(v).find('Value').text();
});
console.log( xObj );
console.log( xObj.Department );
console.log( xObj.Email );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divEntityData">
<div data-xml='

<ArrayOfDictionaryEntry xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<DictionaryEntry>
<Key xsi:type="xsd:string">Email</Key>
<Value xsi:type="xsd:string">[email protected]</Value>
</DictionaryEntry>

<DictionaryEntry>
<Key xsi:type="xsd:string">Department</Key>
<Value xsi:type="xsd:string">IT</Value>
</DictionaryEntry>


<DictionaryEntry>
<Key xsi:type="xsd:string">AccountName</Key>
<Value xsi:type="xsd:string">abc</Value>
</DictionaryEntry>

<DictionaryEntry>
<Key xsi:type="xsd:string">PrincipalType</Key>
<Value xsi:type="xsd:string">User</Value>
</DictionaryEntry>

</ArrayOfDictionaryEntry>
'>
</div>
</div>

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You need to do XML DOM parsing. 

var txt = $("#divEntityData").find("div").attr("data");
var parser;
var xmlDoc;
if (window.DOMParser) {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
} else { // Internet Explorer
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(txt); 
}

Now, you can perform operations on xmlDoc to get data.

For e.g.

xmlDoc.getElementsByTagName("DictionaryEntry")[0].childNodes[0].nodeValue // Gives you Email
xmlDoc.getElementsByTagName("DictionaryEntry")[0].childNodes[1].nodeValue // Gives you [email protected]

Upvotes: 6

depperm
depperm

Reputation: 10756

Changing the jquery though provides some results:

$(document).ready(function(){
    var d = $("ArrayOfDictionaryEntry").find("DictionaryEntry");
    d.each(function(){
        var key=$(this).find('Key').text();
        var val=$(this).find('Value').text();
        console.log(key+' '+val);
    });
for (var i=0; i<$(d).length; i++) {
    console.log($(d)[i]);
}
});

Upvotes: 1

Related Questions