How to convert string to xml object in jquery

Question

I looked at Convert String to XML Document in JavaScript but I could not found a solution in my case, can somebody help me in my situation.

I have a string like below, I want to convert it to an XML Object, How can I do that?

<list>
<Response>
<cfgId>280</cfgId>
<recommendations>&lt;Rule&gt;
&lt;name&gt;simple rule&lt;/name&gt;
&lt;category&gt;none&lt;/category&gt;
&lt;severity&gt;warning&lt;/severity&gt;
&lt;ruleEvalResult&gt;true&lt;/ruleEvalResult&gt;
&lt;actionResult&gt; Current value of maxfilesperproc is  32
increase it to 1024&lt;/actionResult&gt;
&lt;/Rule&gt;</recommendations>
</Response>
</list>

Readable version of above xml

<list>

<Response>
<cfgId>280</cfgId>

<recommendations>
<Rule> <name>simple rule</name> <category>none</category> <severity>warning</severity>     <ruleEvalResult>true</ruleEvalResult> <actionResult>Current value of maxfilesperproc is  32
increase it to 1024</actionResult> </Rule>

</recommendations>

</Response>
</list>

Updated, Here is what i tried.

var xml;
$.post("/csm/rules.action",
  { sessiontoken:   sessiontoken,
    cfgid:          cfgid},
      function(xmldata)
      {

            xml=$(xmldata);


      }
);
var htmlTable = $('<table></table>');

$(xml).find('Response').each(function(){
  var cid = $(this).find('cfgId').text();
  alert(cid+", "+cfgid);
  if(cid==cfgid) {   

    // Now grab the entitiy string
    var newXmlString = $(xml).find('recommendations').text(); 
    // Convert the entities to HTML and return a jQuery object
    var newXml = $("<div/>").html(newXmlString);

    // NOW we can get at the inner XML
    var ruleseverity=$(newXml).find('severity').text();
    if(ruleseverity=="warning")  {
      var rulename=$(newXml).find('name').text();
      var rulecategory=$(newXml).find('category').text();
      var ruleresult=$(newXml).find('ruleEvalResult').text();
      var ruleactionresult=$(newXml).find('actionResult').text();
        htmlTable.append('<tr><td>RuleName:'+rulename+'</td><td>RuleResult: '+ruleactionresult+'</td></tr>');
    }           
  }
});

I am adding htmlTable later in the code '<div class="block">'+htmlTable+'</div>'

I does not alerts at all

Answer 1

Although it is a possible duplicate of Convert String to XML Document in JavaScript - we can use a little help from jquery decode html entities

I made a fiddle

// the $() creates a jQuery object of the outer XML
var xml = $('<list><Response><cfgId>280</cfgId><recommendations>&lt;Rule&gt;&lt;name&gt;simple rule&lt;/name&gt;&lt;category&gt;none&lt;/category&gt;&lt;severity&gt;warning&lt;/severity&gt;&lt;ruleEvalResult&gt;true&lt;/ruleEvalResult&gt;&lt;actionResult&gt; Current value of maxfilesperproc is  32 increase it to 1024&lt;/actionResult&gt;&lt;/Rule&gt;</recommendations></Response></list>');

UPDATE This is more correct:

http://jsfiddle.net/mplungjan/ppj3nquL/

var xmlString = '<list><Response><cfgId>280</cfgId><recommendations>&lt;Rule&gt;&lt;name&gt;simple rule&lt;/name&gt;&lt;category&gt;none&lt;/category&gt;&lt;severity&gt;warning&lt;/severity&gt;&lt;ruleEvalResult&gt;true&lt;/ruleEvalResult&gt;&lt;actionResult&gt; Current value of maxfilesperproc is  32 increase it to 1024&lt;/actionResult&gt;&lt;/Rule&gt;</recommendations></Response></list>';
var xmlDocument = $.parseXML(xmlString);
var $xml = $(xmlDocument);


var cfgid = 280;
var htmlTable = $('<table></table>');

$xml.find('Response').each(function() {
  var cid = $(this).find('cfgId').text();
  if (cid == cfgid) {
    // Now grab the entitiy string
    var newXmlString = $(this).find('recommendations').text();
    // Convert the entities to HTML and return a jQuery object
    var newXml = $("<div/>").html(newXmlString);

    // NOW we can get at the inner XML
    var ruleseverity = $(newXml).find('severity').text();
    if (ruleseverity == "warning") {
      var rulename = $(newXml).find('name').text();
      var rulecategory = $(newXml).find('category').text();
      var ruleresult = $(newXml).find('ruleEvalResult').text();
      var ruleactionresult = $(newXml).find('actionResult').text();
      htmlTable.append('<tr><td>RuleName:' + rulename + '</td><td>RuleResult: ' + ruleactionresult + '</td></tr>');
    }
  }
});
$("#container").append(htmlTable);

td {
  border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>