Convert html list to xml through jQuery Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Convert html list to xml through jQuery without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am trying to convert the HTML input data added in list items into XML file. On button click opens a modal popup which will contain the xml data

<ul id="list">
            <li>
                <span class="name name-block">Hello</span><span>=</span><span class="name value-block">World</span>
                <span class="btn delete">Delete</span>
            </li>
            <li>
                <span class="name name-block">Happy</span><span>=</span><span class="name value-block">Coding</span>
                <span class="btn delete">Delete</span>
            </li>
        </ul>

My try

$(".show-xml").on("click", () => {
$("#dialog").dialog();
let xml = '<List>';
$("ul#list li").each(function(){
  const name = $(this).children('.name-block').val();
  const value = $(this).children(".value-block").val();
  if(name && value){
    xml += "<Item>n";
    xml += "<Name>" + name + "</Name>n";
    xml += "<Value>" + value + "</Value>n";
    xml += "</Item>n";
  }
}).appendTo('#dialog');

});

<List>
 <Item>
  <Name>Hello</Name>
  <Value>World</Value>
 </Item>
 <Item>
  <Name>Test Name</Name>
  <Value>Test Value</Value>
 </Item>
</List>

Answer

Here is best and easy concept to convert html to xml.. no need to use val(). instead of val() you need to use .text() || .html() working example as below

 $('#go').click(function() {
    var xml = '<List>';
     $("ul#list li").each(function(){
      var name = $(this).children('.name-block').text();
      var value = $(this).children(".value-block").text();
      if(name && value){
        xml += "<Item>n";
        xml += "<Name>" + name + "</Name>n";
        xml += "<Value>" + value + "</Value>n";
        xml += "</Item>n";
      }
    });
    xml += "</list>"
    $('.modal-body').append(xml);
    $("#myModal").modal('show');
    console.log(xml)
    })
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    
    </head>
    <body>
    <div class="form-group">
      <div class="col-sm-offset-6 col-sm-3">
        <button type="button" id="go" class="btn btn-primary">Open XML Modal Box</button>
      </div>
    </div>
<!--Modal if input is empty-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">you xml value printed below</h4>

      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

    <ul id="list">
                <li>
                    <span class="name name-block">Hello</span><span>=</span><span class="name value-block">World</span>
                    <span class="btn delete">Delete</span>
                </li>
                <li>
                    <span class="name name-block">Happy</span><span>=</span><span class="name value-block">Coding</span>
                    <span class="btn delete">Delete</span>
                </li>
            </ul>

    <!-- /.modal -->
    <!--End Modal-->
    </body>
    </html>
We are here to answer your question about Convert html list to xml through jQuery - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji