How do I retrieve child elements with javascript

Question

0.00/5 (No votes)

See more:

I have a xml file like this:
I can retrieve all <productcategory> elements, but I want to retrieve all child nodes <productgroup> of each one parent element <productcategory>
I am not sure how to do it with Javascript.
Please help me!

XML

<?xml version="1.0" encoding="UTF-8"?>
<productCatalog xmlns:atom="https://www.w3.org/2005/Atom" version="1.0">
<productCategory name="Software">
<productGroup name="Desktop OS">
    <propertygroupid>{...}
    <atom:link href="https://...." rel="list"/>

<productGroup name="Server OS">
     <propertygroupid>{...}
    <atom:link href="https://...."/>


<productCategory name="dfg">
<productGroup name="dfg1">
    <propertygroupid>{...}
    <atom:link href="https://...." rel="list"/>

<productGroup name="dfg2">
    <propertygroupid>{...}
    <atom:link href="https://...." rel="list"/>

<productGroup name="dfg3">
    <propertygroupid>{...}
    <atom:link href=".... " rel="list"/>

....

What I have tried:

HTML

<!DOCTYPE html>


<p id="demo"></p><br>
<p id="demo1"></p>
<pre>

JavaScript

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
		myFunction1(this);
    }
};
xhttp.open("GET", "test.xml", true);
xhttp.send();

function myFunction(xml) {
    var x,x1,x2,x3, i, xmlDoc, txt,txt1,txt2;
    xmlDoc = xml.responseXML;
	
    
    x = xmlDoc.getElementsByTagName('productCategory');
	txt = x.length +"<br>";
	
    for (i = 0; i &lt; x.length; i++) { 
        txt += i.toString()+". "+      x[i].getAttribute('name') + "<br>";
		
		var xx = x[i].hasChildNodes();
				
		x1 = "...  " + x[i].childNodes.length; 
		
		
		txt1 = " - ";
		
		txt += x1.toString()+ txt1 + xx.toString() + " ... "  +"<br>";
	
    }
	
    document.getElementById("demo").innerHTML = txt; 
}

function myFunction1(xml) {
    var x, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "<br>"+"productGroup"+"<br>"+"<br>";
	
	
    x = xmlDoc.getElementsByTagName('productGroup');
    for (i = 0; i &lt; x.length; i++) { 
        txt += x[i].getAttribute('name') + "<br>";
    }
    document.getElementById("demo1").innerHTML = txt; 
}

Posted 17-Sep-18 3:38am

Member 13987389

Updated 22-Sep-18 15:25pm

Bryian Tan

v2

Add a Solution

Comments

Er. Puneet Goel 17-Sep-18 9:41am

please format properly. Use Code tags for writing code. This way you get the solution quicker.

littleGreenDude 18-Sep-18 9:44am

Please see https://www.w3schools.com/xml/xml_parser.asp

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Answer 1 · 2018-09-22T15:26:00

Holy cow! I think I've got some code hiding away in a corner somewhere for processing RSS feeds that looks like that.

A really neat thing about XML retrieved with ajax, is that you can use all the element selecting functions as you would for regular html. So getElementsByTagName and querySelectorAll are rather useful here.

Here's some code that will enumerate the productCategory and productGroup elements, producing the following output:

-=== Software ===-
- Desktop OS
- Server OS
-=== dfg ===-
- dfg1
- dfg2
- dfg3
XHR finished loading: GET "http://localhost/snippets/sep18/xmlInput.xml".

function ajaxGet(url, onLoad, onError, resType=undefined)
{
	var ajax = new XMLHttpRequest();
	ajax.onload = function(){onLoad(this);}
	ajax.onerror = function(){console.log("ajax request failed to: "+url);onError(this);}
	ajax.responseType = resType;
	ajax.open("GET",url,true);
	ajax.send();
}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	ajaxGet('xmlInput.xml', onLoaded, undefined);
	
	function onLoaded(ajax)
	{
		var XML = ajax.responseXML;
		var categories = XML.getElementsByTagName('productCategory');
		var tmp = Array.from(categories);
		tmp.forEach( 
					 function(elem)
					 {
						console.log( `-=== ${elem.getAttribute('name')} ===-` );
						var groups = Array.from( elem.getElementsByTagName('productGroup') );
						groups.forEach(
										function(grp)
										{
											console.log( `- ${grp.getAttribute('name')}` );
										}
									);
					 }
					);
	}
}