Using Jquery to retrieve data from an XML file and perform calculations

I am dealing with an XML file that contains information about various platforms, task types, and the time each task takes to complete. My goal is to perform a calculation using this data.

Below is a snippet of 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>

The front-end HTML structure is as follows:

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>
  
...
... (Truncated for brevity)
...
  
</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>

In order to streamline the process, I need to merge all platforms into one dropdown menu and have specific task types in another dropdown. Once a platform and task type are selected, along with entering the number of units, the predefined time from the XML file will be multiplied by the number of units and displayed in a table format. As I am a novice in jQuery, I am currently unsure where to begin with implementing this functionality.

javascriptjqueryhtmlcssxml

Answer №1

If you happen to already possess the XML as a string within a variable on the client-side, one quick method is to convert the XML string into an XmlDoc.

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

Another alternative is to utilize jQuery.readXML for parsing:

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" );

In case you have control over the server response, consider converting it to JSON and then utilizing jQuery.readJSON to work with the data effectively:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring HTML elements between pages

I'm currently working on a project with 4 tabbed views, each housed in separate HTML pages. Each view contains several SVG charts created using d3.js. Now, the client wants to be able to easily cut, paste, or move charts from one tabbed view to anothe ...

javascriptjqueryhtmld3.jssvg

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

Streamline email error management within nested middleware functions

I have implemented an express route to handle password resets, which includes finding the user and performing some error handling. However, I am now faced with the challenge of adding additional error handling within a nested function, and I am uncertain a ...

javascriptnode.jsexpress

attempting to switch a container with a single click

I want to create a div container that expands and contracts each time an event handler is clicked. However, when the page loads, I have to click the event handler twice for it to expand the first time. After that, it works with just one click. Ideally, I&a ...

javascriptjqueryhtmltoggle

Tips for specifying image dimensions for an image inserted using regex

Here we have a snippet of PHP code from a WordPress plugin that inserts an image into the content using preg_replace. The issue at hand is that the inserted image does not have specified dimensions, which causes a slight slowdown in page rendering as it is ...

phphtmlregexwordpress

Implementing auto-complete functionality using JQuery and SQL databases

Currently, I am utilizing JQuery in my ASP.net webpage and I am seeking information on whether there is a method to implement AutoComplete with SQL. Specifically, my task involves performing a "select" operation on the database, resulting in an array of ...

jqueryautocomplete

Creating an error handler in PHP for dynamically adding or removing input fields is a crucial step in ensuring smooth and

I designed a form with multiple fields, including a basic input text field and dynamic add/remove input fields. I successfully set the first field as required using PHP arguments, but I'm struggling to do the same for the additional fields. I need as ...

javascriptphpjqueryforeacherror-handling

javascript please input the number of seconds, ensuring it is a non-negative value

I'm encountering a JavaScript issue where I need users to enter a number of seconds in an input field. The catch is that the number of seconds entered can't be less than zero. How should I approach this logic in the code? function sec(){ // ...

javascriptinputtime

Selenium is encountering difficulty in identifying the CSS path for a secondary element appearing on the webpage

I am attempting to use a CSS selector in Selenium to interact with a specific link, but it is failing to identify the correct one. There are two occurrences of a link named "Cancel" on the page. The xpath for the first instance of the Cancel link is: //h ...

cssxpathseleniumcss-selectors

Filtering an array results in an empty output

My task involves iterating through multiple date intervals, like: 09/06/2023 - 15/06/2023 28/05/2023 - 02/06/2023 17/06/2023 - 18/06/2023 29/06/203 - 04/07/2023 ...and so on I want to extract the day numbers for a specific month only, for example, June ( ...

javascriptarraysmomentjs

Using Rails and Stripe: Sending out a form and effectively managing errors with AJAX

Lately, I've been struggling with integrating Stripe into my platform. One of the major issues I'm facing is setting up a subscription using AJAX, which I haven't quite cracked yet. On top of that, I need to ensure the credit card informatio ...

jqueryruby-on-railsrubyajaxstripe-payments

What is the best way to read a file or Stream synchronously in node.js?

Kindly refrain from lecturing me on asynchronous methods. Sometimes, I prefer to do things the straightforward way so I can swiftly move on to other tasks. Unfortunately, the code below is not functioning as expected. It closely resembles code that was po ...

javascriptnode.js

Altering row heights in Bootstrap

Here's the code snippet I'm working with: <body> <div class="container-fluid h-100 border"> <div class="row h-50"> <div class="col-sm-12 bg-danger">Row1</div> </div> < ...

htmlbootstrap-4

A collection of dropdown fields sharing identical names but containing distinct IDs

I am looking to create an array of select fields with the same list of option values. The goal is to prevent a value that is selected in one field from appearing in another field. For example, if "a" is selected in the first field, it should not be avail ...

javascriptphpjqueryhtmlmysql

Leveraging deep linking to launch the email application in react native

I am currently exploring the deeplink URL for the mail app on iOS. A scenario I have set up involves displaying an alert that, when the user clicks 'ok', redirects them to the default mail app. const openEmailApp = () => { if (Platform.OS ...

javascriptiosreactjsreact-nativedeep-linking

Unexpected database query result in Node.js

In my newuser.js file for a node.js environment with a mongodb database managed through mongoose, I have the following code: //newuser.js //This code is responsible for creating new user documents in the database and requires a GET parameter along with a ...

javascriptnode.jsmongodbmongoose

Adding information to a MySQL database using JavaScript and invoking a PHP script

I'm currently facing an issue with my code that involves calling a .php file to insert data into a MySQL database. However, I am unable to get the .php file to run successfully. Can anyone provide some suggestions? As someone who is new to scripting, ...

javascriptphpmysql

How to iterate through an array of objects in Javascript and extract an array of strings

I am dealing with an array of objects that looks like this: [{"key":"aaa","value":true},{"key":"bbb","value":false},{"key":"ccc","value":true}] My goal is to iterate through it and extract an array containing only the keys: ["aaa", "bbb", "ccc"] I am u ...

javascriptarraysnode.jsloops

Switching Formview mode using javascript

Currently, I have a formview on my website and I am looking to change the formview mode using JavaScript. Specifically, I want the formview to switch between insert mode and edit mode based on different interactions with buttons. I have a repeater on my p ...

javascriptasp.netformview

The Ajax call is failing to trigger the success function

Can anyone assist me? My success function isn't working properly. The beforesend is functioning correctly and I've verified the variable s. It has a true value before the ajax call, so all validations are correct. Please take a look... function ...

javascriptjqueryajax