0

I'm parsing XML and would like to store the values in an easy-to-read fashion.

I am getting mapShapes and mapPoints (so x and y coordinates). An (x,y) pair makes a point, a collection of points makes a Shape.

Here is some example XML that I would like to parse:

<?xml version='1.0'?>
<mapQuery id='10918014'>
    <mapShape id='429436'>
        <mapPoint id='4259799'>
            <x>-81.61508</x>
            <y>41.52184</y>
        </mapPoint>
        <mapPoint id='4259800'>
            <x>-81.61537</x>
            <y>41.52181</y>
        </mapPoint>
        <mapPoint id='4259801'>
            <x>-81.61538</x>
            <y>41.522198</y>
        </mapPoint>
        <mapPoint id='4259802'>
            <x>-81.61516</x>
            <y>41.52222</y>
        </mapPoint>
        <mapPoint id='4259803'>
            <x>-81.61508</x>
            <y>41.52184</y>
        </mapPoint>
    </mapShape>
</mapQuery>

I would like to end up with an array like

shapes[0].point[0].x[0] = first x point
shapes[0].point[0].y[0] = first y point

(this example XML only has one shape present, but there could be several.)

Thanks in advance for the help with an easy question =)

Here's some skeleton code:

shapeXmlHandler : function(xml){

    $(xml).find("mapShape").each(function(){
        $(this).find("mapPoint").each(function() {
            console.log('mapPoint: '+$(this).attr('id'));
            console.log('x :'+$(this).find("x").text());
            console.log('y :'+$(this).find("y").text());
        });
    });
}
2
  • What's the problem you're having? Looks good so far (except that I think you actually want shapes[0].point[0].x = first x point etc.)
    – Matt Ball
    Jun 8, 2011 at 18:59
  • good call. I'm not really sure how to accomplish the goal, but I'm pretty close. I don't really know what the best approach is for putting the xml data into an array while parsing over it, so I was asking for suggestions
    – sova
    Jun 8, 2011 at 19:02

1 Answer 1

1

Try using Array.push().

shapeXmlHandler : function(xml)
{
    var shapes = [];

    $(xml).find('mapShape').each(function()
    {
        var shape = [];

        $(this).find('mapPoint').each(function()
        {
            var $p = $(this),
                point = 
                {
                    x: $p.find('x').text(),
                    y: $p.find('y').text()
                };

            shape.push(point);
        });

        shapes.push(shape);
    });

    console.log(shapes);
}

This should log something like

[
    [
        {x: -81.61508, y: 41.52184},
        {x: -81.61537, y: 41.52181},
        ...
    ]
]

This can be done a bit slicker using .map() instead of .each():

shapeXmlHandler : function(xml)
{
    var shapes = $(xml).find('mapShape').map(function()
    {
        return $(this).find('mapPoint').map(function()
        {
            var $p = $(this);
            return {
                x: $p.find('x').text(),
                y: $p.find('y').text()
            };
        }).get();
    }).get();

    console.log(shapes);
}

And if there's any chance of working with JSON instead of XML, you don't need any custom parsing code at all! Just use $.parseJSON.

6
  • Thanks a lot for your thorough answer. Would give you two upvotes if I could =)
    – sova
    Jun 9, 2011 at 21:34
  • Thanks, no worries. Which approach did you end up using?
    – Matt Ball
    Jun 9, 2011 at 22:03
  • Is the .get() necessary for .map()? I don't get any console output unless I leave the .get() off, but it shows a lot more stuff than just the array (like all sorts of jQuery methods). I am using the first approach probably -- it's still uncertain if I even need to hold onto the input for too long so I might just pass it as I process it
    – sova
    Jun 13, 2011 at 19:32
  • It depends on what you want to do with the output. In most cases you'll want to use .get() so you're working with a simple vanilla JavaScript array rather than a jQuery object. The .get() call after .map() is idiomatic jQuery.
    – Matt Ball
    Jun 13, 2011 at 19:34
  • That said it's possible that nested .map() calls like that should actually omit the inner .get() call. I haven't played around with it to find out for myself.
    – Matt Ball
    Jun 13, 2011 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.