Assigning XML node values to jQuery variables

Page 1 of 1

7 Replies - 753 Views - Last Post: 28 December 2015 - 03:09 AM

#1 howardbc14   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 21-October 15

Assigning XML node values to jQuery variables

Posted 27 December 2015 - 02:23 PM

I first initialize a set of jQuery variables and collect them into an array.
var $score;
var $correct;
var $answered;
var $percentage;
var $stats=[$score,$correct,$answered,$percentage];

Using a for-loop, I then assign values for these variables based on their corresponding XML elements' text node values.

I wanted to see if this worked, so I created a <p> element in the HTML page and instructed jQuery to display the value of the $score variable.

I did not see a "0" posted anywhere in the HTML page.

I would like to know where I went wrong with the code.

XML file
<?xml version="1.0" encoding="utf-8"?>
<stats>
<jeopardy>
<score>0</score>
<correct>0</correct>
<answered>0</answered>
<percentage>0</percentage>
</jeopardy>
<jeopardy>
<score>0</score>
<correct>0</correct>
<answered>0</answered>
<percentage>0</percentage>
</jeopardy>
<jeopardy>
<score>0</score>
<correct>0</correct>
<answered>0</answered>
<percentage>0</percentage>
</jeopardy>
</stats>


jQuery file
var $score;
var $correct;
var $answered;
var $percentage;
var $stats=[$score,$correct,$answered,$percentage];

function importData(xml){
         var $i=0;
	 var $k=0;
	 var $length=$(xml).find('jeopardy').eq(1).children().length;
				
	 while ($i<$length && $k<$length){
	       $stats[$k]=$(xml).find('jeopardy').eq(1).children().eq($i).text();
	       $i++;
	       $k++;
	 }
}
		
$.ajax({
   type: 'GET',
   url: 'playerstats.xml',
   dataType: 'xml',
   success: importData
});

$('p').text($score);


HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p></p>
<script src="jquery-2.1.4.min.js"></script>
<script src="extract.js"></script>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Assigning XML node values to jQuery variables

#2 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: Assigning XML node values to jQuery variables

Posted 27 December 2015 - 02:33 PM

Line 26 executes before the xml has been loaded. It should be within importData().
Was This Post Helpful? 0
  • +
  • -

#3 howardbc14   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 21-October 15

Re: Assigning XML node values to jQuery variables

Posted 27 December 2015 - 02:50 PM

View Postandrewsw, on 27 December 2015 - 02:33 PM, said:

Line 26 executes before the xml has been loaded. It should be within importData().



I think I am missing something. Can you explain to me because I don't understand? I thought that since $.ajax() method is placed before the code to change the <p> element's text node, $.ajax() would be executed first.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: Assigning XML node values to jQuery variables

Posted 27 December 2015 - 03:01 PM

Ajax is asynchronous.
   success: importData

When the call has succeeded, the code of importData is executed. This line
$('p').text($score);

is executed as it is encountered in the code, it doesn't wait for the successful completion of the Ajax request.

Mind you, you aren't assigning a value to $score anyway.


It is in the success callback that you can process the XML and display some of it in the page.

View Posthowardbc14, on 27 December 2015 - 09:50 PM, said:

I thought that since $.ajax() method is placed before the code to change the <p> element's text node, $.ajax() would be executed first.

Yes, the Ajax call is executed, then line 26 is executed.. but the XML won't be available until the request is successful and then importData is executed.
Was This Post Helpful? 0
  • +
  • -

#5 howardbc14   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 21-October 15

Re: Assigning XML node values to jQuery variables

Posted 27 December 2015 - 03:20 PM

OK now I think I understand Ajax better.

How am I not assigning a value to $score. I thought I used .text()to assign the value and I am using array index number?

This post has been edited by andrewsw: 27 December 2015 - 03:25 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • no more Mr Potato Head
  • member icon

Reputation: 6957
  • View blog
  • Posts: 28,696
  • Joined: 12-December 12

Re: Assigning XML node values to jQuery variables

Posted 27 December 2015 - 03:24 PM 

var $stats=[$score,$correct,$answered,$percentage];

This doesn't (somehow) associate the array elements with the variables. All it does is fill the array with the variables' current values, which are undefined at that point.

Note that you don't have to quote the previous post in full, there is a Reply button further down the page, or use the Fast Reply box.
Was This Post Helpful? 0
  • +
  • -

#7 howardbc14   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 21-October 15

Re: Assigning XML node values to jQuery variables

Posted 27 December 2015 - 05:01 PM

I am building online Jeopardy! I have a XML file that I use to store player stats. Every time I attempt to assign XML node values to the jQuery variables (when the player clicks on a game tile), I get a web console error stating "Not well-formed". I wonder what is going on?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: Assigning XML node values to jQuery variables

Posted 28 December 2015 - 03:09 AM

"Not well-formed" indicates an XML syntax error.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1