Returning XML data parsed via jQuery

Question

What I was doing is read an XML file and get the data via jQuery into my HTML file.

As I have found in many tutorials I am using jQuery's .get() method. It serves me well except for one problem!

This is the XML file:

<?xml version="1.0" encoding="utf-8" ?>
<books>
  <book title="CSS Mastery" imageurl="images/css.jpg">
    <description>
      info goes here.
    </description>
  </book>

  <book title="Professional ASP.NET" imageurl="images/asp.jpg">
    <description>
      info goes here.
    </description>
  </book>

  <book title="Learning jQuery" imageurl="images/lj.jpg">
    <description>
      info goes here.
    </description>
  </book>
</books>

Here is my HTML file with jQuery codes:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" >
      $("document").ready(function() {
        $.get("one.xml", function(d) {
          var title = [];
          var description = [];

          $(d).find("book").each(function() {
            title.push($(this).attr("title"));
            description.push($(this).find("description").text());
          });

          console.log(title);
        });
      });
    </script>
  </head>
  <body>
    // BODY contents...
  </body>
</html>

What I want to do is I want the titles and descriptions to be returned so that i can use these arrays inside other functions. According to the jQuery code my title array is being printed in the console now but when I try to print the title array outside of the .get() method it says "title is undefined".

I have tried returning the arrays at the end of the function but no luck. I'm not sure if I have made my questions clear or not so I paste the code thats giving me the error below:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $("document").ready(function() {
        $.get("one.xml", function(d){
          var title = [];
          var description = [];

          $(d).find("book").each(function() {
            title.push($(this).attr("title"));
            description.push($(this).find("description").text());
          });
        });

        console.log(title);
      });
    </script>
  </head>
  <body>
    // BODY contents...
  </body>
</html>

In this block of code it is saying "title isn't defined and notice I am consoling the title array outside of the .get() method.

score 1 · Answer 1 · answered Apr 16 '12 at 17:56

1

just use like below :

title = [];
description = [];

If you dont use var before variable name it will be in global scope, so you can use those two variables inside other functions as well.

answered Apr 16 '12 at 17:56

M A Hossain Tonu

1,437
15
14

@Tonu Bhai, It'll work but it's a very bad practice :( BTW, `console.log` still won't work because it'll execute before the callback push data to that array. – Rifat Apr 16 '12 at 18:28
bad or good practice can be defined on situations :) in that case he have to use callback method within that scope. – M A Hossain Tonu Apr 16 '12 at 18:34
Again he can use __jQuery.deferred__ to use an additional callback with the .get()'s callback. – M A Hossain Tonu Apr 16 '12 at 18:43
I have tried declaring the variables without var keywords but nothing changed. Im not being impatient or something but i can't resist asking "so there's no way of getting that variable out of that function?" – Foysal Ahamed Apr 16 '12 at 18:45

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Its because of variable scope, take a look here. If you want to use title & description in any other function of javascript then you can directly call that javascript function immediate after saving title & description(inside callback function of $.get) like follows.

$("document").ready(function(){
$.get("one.xml", function(d){
    var title       = [];
    var description = [];
    $(d).find("book").each(function(){
        title.push($(this).attr("title"));
        description.push($(this).find("description").text());
    });
    call_to_your_function_with_title_and_desc(title, description)
});

edited May 23 '17 at 11:44

Community

1
1

answered Apr 16 '12 at 16:38

Hardik Patel

838
5
12

I have thought of this before but i was just curious that if there's any other way around. I am fairly new to jquery anyways i appreciate your help! thumbs up! – Foysal Ahamed Apr 16 '12 at 16:50
@FoysalAhmed - I understand your curiosity to learn jQuery but I always prefer that you search over questions already asked, if you dont found answer of your question then create new question... anyway best of luck...! – Hardik Patel Apr 16 '12 at 16:53
I have searched through google and stackoverflow but I didn't find anyone to use it in such way. all i have seen is most of the tutorials and solutions are about printing the recieved data from the xml file in the document. that's why i had to post the problem. and i thought there might be some way to do get the data returned outside of the function. – Foysal Ahamed Apr 16 '12 at 16:59

Returning XML data parsed via jQuery

2 Answers2