Jquery get information from XML and calculate

Question

I have a XML file with Platform, Task type and Time which takes to do each task. I need to do a calculation.

Following is my XML File.

<?xml version="1.0" encoding="UTF-8"?>

<platforms>
<sitecore>
    <task>
        <taskname>promobox</taskname>
        <time>10</time>
    </task>

    <task>
        <taskname>newswire</taskname>
        <time>30</time>
    </task>
</sitecore>

<siab>
    <task>
        <taskname>promobox</taskname>
        <time>20</time>
    </task>

    <task>
        <taskname>newswire</taskname>
        <time>15</time>
    </task>
</siab>
</platforms>

and my front-end html is like below.

Screenshot

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <link rel="stylesheet" href="css/custom.css">

    <title></title>
  </head>
  <body>

<div class="container">
<div class="col-md-8 col-centered">
<h2>Time Calculator</h2>
<form>
<div class="form-group">
    <label for="platform">Platform</label>
    <select class="form-control" id="platform">
      <option>BDE</option>
      <option>GCMS</option>
      <option>Sharepoint</option>
      <option>Siab</option>
      <option>Sitecore</option>
    </select>
  </div>
  
<div class="form-group">
    <label for="task">Task Type</label>
    <select class="form-control" id="task">
      <option>Newswire - Immediate</option>
      <option>Page creation - text only</option>
      <option>Promobox</option>
      <option>Banner of image creation</option>
      <option>Videocast</option>
    </select>
</div>

<div class="form-group">
 <label for="units">Units</label>
 <input type="number" min="0" class="form-control" id="units" placeholder="Number of Units">
</div>

<button type="submit" class="btn btn-primary">Calculate</button>
<button type="submit" class="btn btn-light">Clear All</button>

</form>


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Platform</th>
      <th scope="col">Task Type</th>
      <th scope="col">Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sitecore</td>
      <td>Promobox</td>
      <td>20</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td><strong>Total: 20 (mins)</strong></td>
    </tr>

  </tbody>
</table>
</div>
</div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

I need to get all platforms into one dropdown and specific task types to another dropdown.

Once you select a platform and task type enter the number of units and the pre-defined time in the XML will be multiplied by the number of units and it will show in the table. I am absolute beginner to Jquery and clueless where to start.

Do you have control over the server response? Can you send back JSON instead? — DJDaveMark, Jan 28 '18 at 16:23
What's the server-side techno? Does it serve different clients which need XML? — DJDaveMark, Jan 28 '18 at 17:54

DJDaveMark · Answer 1 · 2018-01-29T09:25:58.037

If you already have the XML in a variable as a string on the client-side, you could simply read the XML string into an XmlDoc.

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt, "text/xml");

Or use jQuery.readXML to parse it:

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
var xmlDoc = $.parseXML( xml ),
var $xml = $( xmlDoc ),
var $title = $xml.find( "title" );

If you have control of the server response, you could change it to JSON and simply use jQuery.readJSON and build the JSON keeping in mind how it would be used e.g.:

$.getJSON("rest/platforms", function( platforms ) {
    platforms.forEach(function( platform ){
        platform.name; // sitecore
        platform.tasks.forEach(function( task ){
            task.name; // promobox
            task.time; // 10
        });
    });
});

Jquery get information from XML and calculate

1 Answers1