使用jQuery从XML节点创建数组

Question

I'm trying to isolate lat/lon points in xml file to array. I am getting hung up on pushing the lat/lon child nodes text to the array. Ideally I would like the array to read as:

point 1 = lat1, lon1
point 2 = lat2, lon2

Here's what I have so far:

 $.ajax({
        type: "GET",
        url: "points.xml",
        dataType: "xml",
        success: function (xml) {
            //find each TP
            var areaPlots = $(xml).find('plot_area').each(function () {                     $(this).find('area').each(function () {
                    var areas = $(this);
                    $(areas).find('point').each(function () {
                        var points = $(this);
                        $(points).find('lat_num').each(function () {
                          var latitude = $(this).text();    
                        $(points).find('lon_num').each(function () {
                          var longitude = $(this).text();                                                                                                           
                        })
                    })
                })
            })      
             //end of success function
        }

XML:

<plot_area>
 <area>  
  <point>
   <lat_num>42.00861</lat_num> 
   <lon_num>-94.00351</lon_num> 
 </point>
 <point>
  <lat_num>43.00921</lat_num> 
  <lon_num>-89.00024</lon_num> 
 </point>
 <point>
  <lat_num>02.008427</lat_num> 
  <lon_num>-74.99588</lon_num> 
 </point>
 </area>
</plot_area>

How do I push each point's lat/lon pair to an array?

Answer 1

Maybe you can create an object point and then for each point the xml, create a property 'point[n]' with an incrementing number appended to it using a counter . The name of the first property would then become 'point1'.

Then add an array with the 'lat' and 'lon' values to that property.

That way you can obtain your 'lat' and 'lon' values in an array like this:

point.point1;
point.point2;
point.point3;

For example:

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "points.xml",
        dataType: "xml",
        success: function (xml) {

            var point = {};
            var counter = 1;

            //find each TP
            var areaPlots = $(xml).find('plot_area').each(function () {

                $(this).find('area').each(function () {
                    var areas = $(this);
                    $(areas).find('point').each(function () {
                        var points = $(this);
                        var name = "point" + counter;
                        point[name] = [];

                        $(points).find('lat_num').each(function () {
                            point[name].push($(this).text());
                            $(points).find('lon_num').each(function () {
                                point[name].push($(this).text());
                            });
                        });
                        counter++;
                    });
                    console.log(point.point1);
                    console.log(point.point2);
                    console.log(point.point3);
                });
                //end of success function
            });
        }
    });
</script>

The console.log statements will result in:

["42.00861", "-94.00351"]
["43.00921", "-89.00024"]
["02.008427", "-74.99588"]