Question

I’m working on a simple XML phonebook app to learn JQuery, and I can’t figure out how to do something like this:
When the user enters the first name of a contact in a textbox I want to find the entire record of that person. The XML looks like this:

<phonebook>
<person>
    <number> 555-5555</number>
    <first_name>Evelyn</first_name>
    <last_name>Remington</last_name>
    <address>Edge of the Abyss</address>
    <image>path/to/image</image>
</person>
<person>
    <number>[phone] 2223230</number>
    <first_name>Max</first_name>
    <last_name>Muscle</last_name>
    <address>Mining Belt</address>
    <image>path/to/image</image>
</person>
</phonebook>

and the best I’ve been able to do with the jQuery is something like this:

var myXML;
function searchXML(){
  $.ajax({
     type:"GET",
     url: "phonebook.xml",
     dataType: "xml",
     success: function(xml){myXML = $("xml").find("#firstNameBox").val())}
  });
 }

What I want it to do is return the entire <person> element so I can iterate through and display all that person’s information. Any help would be appreciated.

Answer 1

Well, I’m not sure how you want to choose the <person> or how you want to display the result, but this example will find Evelyn, and place the related info into a variable;

var myXML; 

function searchXML(){
  $.ajax({
     type:"GET",
     url: "phonebook.xml",
     dataType: "xml",
     success: function(xml){
              // Filter Evelyn out of the bunch
            myXML = $(xml).find("person").filter(function() {
                return $(this).find('first_name').text() == "Evelyn";
            });

              // Store a string with Evelyn's info in the display variable
            var display = myXML.children().map(function() {
                return this.tagName + '=' + $(this).text();
            }).get().join(' ');

              // alert the result
            alert(display);
        }
  });
}
searchXML();

---

EDIT:

When you say that you want to “return” the <person>, be aware that you can’t simply return it as you would in a regular function. The rest of your code has likely finished executing before the AJAX response was received, so any attempt to access the <person> in the myXML variable will result in a value of undefined.

Instead, you need to perform whatever manipulation you want inside the success callback, or you need to place it inside another function, and call that function from within the success callback.

The example I gave does the work inside.

I’m still not sure how it is that you want to select which person, though. If you wanted to operate on each one, then you would do so in a loop. For example, you could use:

$(xml).find("person").each(function() {
    // do your processing...
});