How do I fix the first line in this ajax code that it doesnt show unexpected string

Question

1.00/5 (1 vote)

See more:

How can I fix the first line of the code that it doesnt display unexpected string and that it will load in a html file

JavaScript

function loadxmldata('Q1.xml'){
	// Create the XML request
	xmlReq = null;
 
	// If Mozilla browser is used
	xmlReq = new XMLHttpRequest();
	
	if((xmlReq==null));
	{
		// Failed to create the request
		return;
	}
 
	//function to handle the request
	xmlReq.onreadystatechange = function(){
		switch(xmlReq.readyState){
		case 0: // Uninitialized
			break;
		case 1: // Loading
			break;
		case 2: // Loaded
			break;
		case 3: // Interactive
			break;
		case 4: // Complete
		// Retrieve the data 
		getXMLData(
        //Retrieves each child element in the XML file.
			xmlReq.responseXML.getElementsByTagName('number')
			[0].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('street')
			[0].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('town')
			[0].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('city')
			[0].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('code')
			[0].firstChild.data +
            "<hr>" +
			xmlReq.responseXML.getElementsByTagName('name')
			[1].firstChild.data + 
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('desc')
			[1].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('price')
			[1].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('quantity')
			[1].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('stockholders')
            [1].firstChild.data +
			"<hr>" +
			xmlReq.responseXML.getElementsByTagName('name')
			[2].firstChild.data + 
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('desc')
			[2].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('price')
			[2].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('quantity')
			[2].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('stockholders')
            [2].firstChild.data +
			"<hr>" +
			xmlReq.responseXML.getElementsByTagName('name')
			[3].firstChild.data + 
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('desc')
			[3].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('price')
			[3].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('quantity')
			[3].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('stockholders')
            [3].firstChild.data +
			"<hr>" +
			xmlReq.responseXML.getElementsByTagName('name')
			[4].firstChild.data + 
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('desc')
			[4].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('price')
			[4].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('quantity')
			[4].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('stockholders')
            [4].firstChild.data+
			"<hr>" +
			xmlReq.responseXML.getElementsByTagName('name')
			[5].firstChild.data + 
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('desc')
			[5].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('price')
			[5].firstChild.data +
			"<br>" +
			xmlReq.responseXML.getElementsByTagName('quantity')
			[5].firstChild.data + 
            "<br>" +
			xmlReq.responseXML.getElementsByTagName('stockholders')
            [5].firstChild.data);
			break;
			default:
			break;
        }
    }
 
		// Open and then send the request
		xmlReq.open ('GET', URL, true);
		xmlReq.send (null);
}

this is the html file that it needs to run in

<!DOCTYPE html>
<html>
	<head>
		<title>
			Question 1 - HTML, AJAX, XML 
		</title>		
		<!-- Referencing the AJAX script file -->
		<script type="text/javascript" src="AJAX.js"></script>
		<script language="javascript">
			// This function is used to display the XML file
			function getXMLData(xmlFile){
				document.getElementById('display').innerHTML = xmlFile;
			}
		</script>
		<style>
			body{
				color:black;
				background-color:#F9C270;
				}
			h5{
				font-weight:bold;
				text-align:center;
				}
			header{
				font-weight:bold;
				font-size:56pt;
				text-align:center;
				font-family:Arial;
				color: #805500;
				}
			hr{
				outline-style:solid;               
				outline-color:white;               
				outline-width:5px;               
				outline-offset:5px;
				}
		</style>
	</head>
	<body onLoad="loadxmldata('Q1.xml')">
		<header>Bracken Candy Holders</header>
		<hr/>
		<p>
			<!-- The XML data will be displayed here -->
			<div id="display"></div>
		</p>
		<div><img src="smarties.jfif" id="smarties" height="150" width="150" id="smarties"/></div>
		<div><img src="jellytots.png" id="smarties" height="150" width="150" id="jellytots"/></div>
		<div><img src="jellybeans.jpg" id="smarties" height="150" width="150" id="jellybeans"/></div>
		<div><img src="sourstraw.jpg" id="smarties" height="150" width="150" id="sour straw"/></div>
		<div><img src="jawbreakers.jpg" id="smarties" height="150" width="150" id="jawbreakers"></div>
		<hr/>
		<footer>
			<h5>Copyrigth © Bracken Candy Holders</h5>
		</footer>
	</body>
</html>

What I have tried:

I have tried changing the ('Q1.xml') to (Q1.xml) then it will say unexpected token '.'
The code needs to work that it can display the xml file in html.

Posted 21-Nov-21 23:59pm

Killer (zombiekiller1448)

Updated 22-Nov-21 0:42am

v3

Add a Solution

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)

Chris Copeland · Answer 1 · 2021-11-22T00:05:00

Solution 1

The problem is here:

JavaScript

function loadxmldata('Q1.xml'){
                      ^^

When you declare a function you don't put strings or numbers in the parameter list. You define variables which would be populated when the function is invoked. By looking at your code I can see you're calling xmlReq.open ('GET', URL, true); which means your code is expecting a variable named URL which should be the name of the file. Therefore you need to adjust your script:

JavaScript

function loadxmldata(URL){

Then when you call the function you would pass in the name of the XML file, like so:

JavaScript

loadxmldata('Q1.xml');

The 'Q1.xml' will be populated into the URL variable and then used further down in the function.

Posted 22-Nov-21 0:05am

Chris Copeland

Comments

Killer (zombiekiller1448) 22-Nov-21 6:38am

when change to that of what you said , the output still doesn't show up when the html file is running the script

Chris Copeland 22-Nov-21 6:43am

If your console is not producing an error message (which it should do if some part of the script is not working properly) then you may need to debug your Javascript and step through the code line-by-line and see what isn't working.

For example, it may be failing to load the Q1.xml file. In your switch(xmlReq.readyState) block you only return if the ready state is something unexpected. Also, you haven't got an error event handler setup:

xmlReq.addEventListener('error', function (e) {
  console.log('An error occurred!');
});

At this stage on you can debug and identify what error is being produced. If you can provide us with information about the error, we might be able to provide some support.

Killer (zombiekiller1448) 22-Nov-21 6:57am

none further details or display has been occurred when added this code to the ajax file and i have updated the question so that more details can be shown

Chris Copeland 22-Nov-21 8:19am

Again, you need to debug your Javascript code to see what happens when it runs. This means putting in breakpoints and stepping through the code to see what happens. Without any errors visible in the console, you're reliant on debugging the code.

Debugging in Chrome
Debugging in Firefox
Debugging in Edge

It's important to get used to debugging code because this will be your primary way of testing and analysing code when it's not working correctly. Every good developer will switch to debugging when their code isn't working as intended.