fetch data from XML file using $.ajax function

Question

Hello friends I am new on jQuery and trying to develop a Ajax function which help me to fetch data from XML file to my html file following is my code

HTML

<div id="myDiv"></div> <button>Get info</button>

XML UPDATED*

    <?xml version="1.0" encoding="utf-8"?>
<main><person>
    <name>Bhupesh</name>
    <last>Lohani</last>
</person>
<person>
<name>Kamal</name>
<last>Sandhu</last>
</person>

<person>
<name>Ravi</name>
<last>Kumar</last>
</person></main>

SCRIPT UPDATED*

    $(document).ready(function(e) {
   $("button").click(function(){
               var htmlStr = '';
               $.ajax({
                       type:'get',
                       url:"xml.xml",
                       cache: false,
                       dataType: "xml",
                       success:function(result){                          
                               var main = $(result).find('main');
                               $(main).each(function( index ) {
                                   var person = $(this).find('person')
                                       var name = $(person).find('name').text();
                                       var lastName = $(person).find('last').text();
                                       //console.log(name + ' | ' + lastName);
                                       htmlStr += '<p><b>' + name + '</b> - ' + lastName + '</p><br/>';
                               });
                               $("#myDiv").append(htmlStr);
                       }});
       });
});

Its not showing anything when i click on my button please help me guys

UPDATE

Friend i have did few modification in my code now its shoing like

BhupeshKamalRavi - LohaniSandhuKumar

I want every name and last name should be show like

Bhupesh - Lohani
Kamal - Snadhu
Ravi - Kumar

Please Help me friends

Thanks in advance..:)

Answer 1

Check the scope of htmlStr variable. Its only inside the each callback method. You need to define it outside the each call back scope. May be define it just under main variable.

var main= ... ;
var htmlStr = ''; 

As per your updated request. I see that you are not iterating over person, you are just iterating over 'main'. $(main).find('person') will result in assigning both person elements to 'person' variable. ANd subsequently, $(person).find('name') result in getting first name from both person elements.

you can quickly fix this by iterating over person.

        var main = $(result).find('main');
        var htmlStr = '';

        $('person', main).each(function (index) {
            var person = $(this);
            var name = $(person).find('name').text();
            var lastName = $(person).find('last').text();
            console.log(name + ' | ' + lastName);
            htmlStr += '<p><b>' + name + '</b> - ' + lastName + '</p><br/>';
        });
        $("#myDiv").append(htmlStr);