Create an array of objects from fields on a page

I have a page that displays hotel data in a list. I have this data on the page:

<input type="hidden" class="name" value="Hotel1" />
<input type="hidden" class=开发者_StackOverflow"latitude" value="-12.3456" />
<input type="hidden" class="longitude" value="12.3456" />

<input type="hidden" class="name" value="Hotel2" />
<input type="hidden" class="latitude" value="98.7654" />
<input type="hidden" class="longitude" value="-98.7654" />

I'd like to create an array of objects from those values, so that I can loop through each hotel and do something like this:

$.each(hotels, function (index, obj) {
    var name = obj.name;
    var lat = obj.latitude;
    var long = obj.longitude;
});

---

You might need to change how to select the DOM elements, but this will more-or-less do the right thing:

var $names = $('input[type="hidden"].name'),
    hotels = $names.map(function ()
    {
        var $this = $(this),
            $lat = $this.next(),
            $lng = $lat.next();

        return {
            name: $this.val(),
            lat: $lat.val(),
            lng: $lng.val()
        };
    }).get();

I used lng instead of long since long is a reserved word in many programming languages (though no, not in JS).

---

That's a bit of an odd structure for data, but here's something you could do:

var inputs = $("input[type=hidden]", containerElement);
var data = {};
for(var i = 0; i < inputs.length; i += 3) {
     var obj = {};
     obj.latitude = inputs[i + 1].value;
     obj.longitude = inputs[i + 2].value;
     data[inputs[i].value] = obj;
}

Then you can access the data like so:

data.Hotel1.longitude

---

First, group your input tags in separate fieldsets:

<fieldset>
    <input type="hidden" class="name" value="Hotel1" />
    <input type="hidden" class="latitude" value="-12.3456" />
    <input type="hidden" class="longitude" value="12.3456" />
</fieldset>
<fieldset>
    <input type="hidden" class="name" value="Hotel2" />
    <input type="hidden" class="latitude" value="98.7654" />
    <input type="hidden" class="longitude" value="-98.7654" />
</fieldset>

You can now build the object using jQuery:

var data = [];
$('fieldset').each(function(i, fieldset)
{
    data[i] = {};
    $(fieldset).find('input:hidden').each(function(j, input))
    {
        data[i][input.className] = input.value;
    }
});

This code works for any set you will use.

---

Assuming you have an equal number of .name, .latitude, and .longitude class'd elements you can use this:

var $names = $(".name");
var $lats = $(".latitude");
var $longs = $(".longitude");

var hotels = new Array();

$names.each(function(i, e){
    hotels.push({
        name: $names.eq(i).val(), 
        lat: $lats.eq(i).val(), 
        lng: $longs.eq(i).val()
    });
});

$.each(hotels, function (i, obj) {
    var name = obj.name;
    var lat = obj.lat;
    var lng = obj.lng;
        alert(name + "\n" + lat + "\n" + lng);
});

---

working example: http://jsfiddle.net/hunter/KY8BG/2/

---

var hotels = [];
$('input[type="hidden"].name').each(function(i, el){
    var $name = $(this),
        $lat = $name.next('input[type="hidden"].latitude'),
        $long = $lat.next('input[type="hidden"].longitude'),
        obj = {};
    obj.name = $name.val();
    obj.latitude = $lat.val();
    obj.longitude = $long.val();
    hotels.push(obj);
});

Demo →