"Using JavaScript to differentiate between elements with the same name in

Question

"Using JavaScript to differentiate between elements with the same name in

I am dealing with an XML file that contains multiple instances of the same element name, as shown below. I am currently only able to retrieve the first occurrence and would like to know how to access all 4 "comments" using JavaScript. Thank you!

<FRIENDSSTATUS>
  <STATUSFRIENDS id="2">
    <STATUS>Life begins at the end of your comfort zone</STATUS>
    <DATETIME>2012-10-30 10:32:28</DATETIME>
    <FIRSTNAME>Malcolm</FIRSTNAME>
    <LASTNAME>Landgraab</LASTNAME>
    <COMMENTS datetime="2012-11-18 22:13:28" firstname="Ian" lastname="Tellerman">rr</COMMENTS>
    <COMMENTS datetime="2012-11-18 22:13:39" firstname="Ian" lastname="Tellerman">hello</COMMENTS>
    <COMMENTS datetime="2012-11-19 14:36:24" firstname="Ian" lastname="Tellerman">test</COMMENTS>
    <COMMENTS datetime="2012-11-19 14:45:52" firstname="Ian" lastname="Tellerman">test4</COMMENTS>
   </STATUSFRIENDS>
  <STATUSFRIENDS id="3">
    <STATUS>Prometheus. Fantastic film!!!!</STATUS>
    <DATETIME>2012-10-30 10:32:28</DATETIME>
    <FIRSTNAME>Mansa</FIRSTNAME>
    <LASTNAME>Bendett</LASTNAME>
    <COMMENTS datetime="2012-11-18 22:14:46" firstname="Ian" lastname="Tellerman">wrong</COMMENTS>
  </STATUSFRIENDS>
</FRIENDSSTATUS>

Below are the javascript codes for retrieving the data:

xmlDoc = xmlhttp.responseXML;
$table = "<table border='1'>";

var element = xmlDoc.getElementsByTagName("FRIENDSSTATUS");
var elements = xmlDoc.getElementsByTagName("STATUSFRIENDS");
var comments = xmlDoc.getElementsByTagName("COMMENTS");

if(xmlDoc.documentElement !== null){

var root;
if (navigator.userAgent.indexOf("Firefox") > 0)
var root = element[0].childElementCount;

if (navigator.userAgent.indexOf("MSIE") > 0)
var root = xmlDoc.documentElement.childNodes.length;

for(i=0; i<root; i++){
$strStats = "";
$strComments = "";
$strDateTime = "";
$strFirstname = "";
$strLastname = "";

$strCommentDateTime = "";
$strCommentFirstName = "";
$strCommentLastName = "";
$strStatusID = "";

if(navigator.userAgent.indexOf("Firefox") > 0){
for(y=0;y < elements[i].childElementCount;y++){

 $strStatusID = elements[i].getAttribute("id");
 if(strStatus = elements[i].getElementsByTagName("STATUS")){
    $strStats = strStatus[0].firstChild.nodeValue; 
 }

 if(strStatus = elements[i].getElementsByTagName("DATETIME")){
    $strDateTime = strStatus[0].firstChild.nodeValue; 
 }

 if(strStatus = elements[i].getElementsByTagName("FIRSTNAME")){
    $strFirstname = strStatus[0].firstChild.nodeValue; 
 }

 if(strStatus = elements[i].getElementsByTagName("LASTNAME")){
    $strLastname = strStatus[0].firstChild.nodeValue; 
 }
 if(strComm = elements[i].getElementsByTagName("COMMENTS")){ 
    $strComments = strComm[0].firstChild.nodeValue;
    $strCommentDateTime = comments[i].getAttribute("datetime");
    $strCommentFirstName = comments[i].getAttribute("firstname");
    $strCommentLastName = comments[i].getAttribute("lastname");
    $strComments += "<br>" + $strCommentFirstName + " " + $strCommentLastName + " " + $strCommentDateTime + "</br></br>";
}
$strStats = $strStats + " " + $strLastname + " " + $strFirstname + " " + $strDateTime;
$strFullName = $strFirstname + " " + $strLastname;
$strDateTime = "";
$strFirstname = "";
$strLastname = "";
}
}

javascript xml ajax dom

Answer 1

Answer №1

To store your XML data, create a variable named myXmlString. You can then access and manipulate it like so:

var parser=new DOMParser();
doc=parser.parseFromString(myXmlString,'text/xml');
var comments = doc.getElementsByTagName("COMMENTS") // This will retrieve an array of the comment elements.

Answer 2

To store your XML data, create a variable named myXmlString. You can then access and manipulate it like so:

var parser=new DOMParser();
doc=parser.parseFromString(myXmlString,'text/xml');
var comments = doc.getElementsByTagName("COMMENTS") // This will retrieve an array of the comment elements.

Answer 3

Answer №2

A demonstration showcasing how to retrieve the comments from the initial STATUSFRIENDS element can be seen in this jsFiddle example.

var parseXmlData;

if (typeof window.DOMParser != "undefined") {
    parseXmlData = function(xmlString) {
        return ( new window.DOMParser() ).parseFromString(xmlString, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" &&
       new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXmlData = function(xmlString) {
        var xmlDocObject = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDocObject.async = "false";
        xmlDocObject.loadXML(xmlString);
        return xmlDocObject;
    };
} else {
    throw new Error("No XML parser available");
}

var xmlSource = parseXmlData(xmlString); // assuming xmlString contains the XML content
var commentsCollection = xmlSource.documentElement.childNodes[0].getElementsByTagName("COMMENTS");
var results = "";

for(var j=0; j<commentsCollection.length; j++)
{
   results += commentsCollection[j].firstChild.nodeValue + "<br />";   
}

document.getElementById("commentsOutput").innerHTML = results;

Answer 4

A demonstration showcasing how to retrieve the comments from the initial STATUSFRIENDS element can be seen in this jsFiddle example.

var parseXmlData;

if (typeof window.DOMParser != "undefined") {
    parseXmlData = function(xmlString) {
        return ( new window.DOMParser() ).parseFromString(xmlString, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" &&
       new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXmlData = function(xmlString) {
        var xmlDocObject = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDocObject.async = "false";
        xmlDocObject.loadXML(xmlString);
        return xmlDocObject;
    };
} else {
    throw new Error("No XML parser available");
}

var xmlSource = parseXmlData(xmlString); // assuming xmlString contains the XML content
var commentsCollection = xmlSource.documentElement.childNodes[0].getElementsByTagName("COMMENTS");
var results = "";

for(var j=0; j<commentsCollection.length; j++)
{
   results += commentsCollection[j].firstChild.nodeValue + "<br />";   
}

document.getElementById("commentsOutput").innerHTML = results;

Answer 5

Answer №3

Here's an example:

let data = 'your JSON data as a string',
    parsedData;

try {
    parsedData = JSON.parse(data);
}
catch (error) {
    console.error('Error parsing JSON data:', error);
}

if (parsedData) {
    let items = parsedData.items,
        total = 0;

    for (let item of items) {
      total += item.price;
    }

    console.log('Total price:', total);
}

Answer 6

Here's an example:

let data = 'your JSON data as a string',
    parsedData;

try {
    parsedData = JSON.parse(data);
}
catch (error) {
    console.error('Error parsing JSON data:', error);
}

if (parsedData) {
    let items = parsedData.items,
        total = 0;

    for (let item of items) {
      total += item.price;
    }

    console.log('Total price:', total);
}

Answer 7

Answer №4

Unfortunately, I am unable to provide a complete code sample at this time, but JavaScript does have support for XPath which allows you to fetch Comments using the following Qpath query:

/FRIENDSSTATUS/STATUSFRIENDS[@id="3"]/COMMENTS

If you want to test the Xpath syntax, you can do so by visiting:

Answer 8

Unfortunately, I am unable to provide a complete code sample at this time, but JavaScript does have support for XPath which allows you to fetch Comments using the following Qpath query:

/FRIENDSSTATUS/STATUSFRIENDS[@id="3"]/COMMENTS

If you want to test the Xpath syntax, you can do so by visiting:

"Using JavaScript to differentiate between elements with the same name in

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A step-by-step guide on dynamically utilizing ng-outlet in AngularJS

You may encounter issues with invoking methods on a JavaScript object in Node.js after using res.send for response sending

Guide: Communicating with child component functions from parent component in React/Typescript

Error message: A function is being utilized with an undefined variable

Creating a row in a table based on the selected text field

What causes the "Cannot read properties of undefined" error in Vue when an array is initialized and output is still being displayed?

Change Scenery by Using Arrow Keys

How can I get electron to interact with sqlite3 databases?

What is causing the error when using Interfaces and Observable together?

Issues with JQuery Beginner using the .after Method

Vue router is unable to render or mount the component at the root path

Implementing interactive elements such as buttons and controls on an HTML5 canvas

What steps can be taken to restrict a user's access to a route through URL parameters?

Is there a way to extract the year, day, minute, hour, and second from the Date.now() function in Node.js?

Discovering if a value has been entered into an input field in AngularJS can be achieved by verifying its availability

ways to invoke javascript function on body loading

Is the model returned by the Mongoose .findOne method in case of an error?

Incorporating an HTML file into a DIV container while also displaying menu links

How to Send C# Array as a Parameter to a JQuery Function

Retrieve "N/A" values for any vacant spaces in the lxml xpath() function