Loop through 2 arrays in jquery and combine

Question

I have 2 arrays, one with cities, and another array with ID's... I would like to loop both, and then output some HTML

Right now im only looping cities, and then appending some HTML to a as following:

if ($jq(".area").length > 0) {

    var region = $jq(".hiddenFieldRegion").val();
    var cityIDs = $jq(".hiddenFieldChosenAreas").val();
    var strcities = $jq(".hiddenFieldChosenCities").val();
    //var cities = strcities.split('|');

    //Set region to be marked
    if (region) {
        $jq(".mapdk").attr("class", region);
    }

    //Appending to searchform
    if (strcities) {
        $jq.each(strcities.toString().split("|"), function (k, v) {
            var v = v.split("|");
            $jq("<option selected />").text(v[0]).appendTo("select.chosen-cities");
        });
    }

}

I would like the place where im appending to the searchform, add an attribute value, with an ID from the cityIDs array...

So i get some HTML like:

<option value="XXX">CityName</option>

Is that possible?

Answer 1

Assuming the order is the same in both arrays you can use the index parameter ( k ) of the each function:

if (strcities) {
    var aCityIDs = cityIDs.split("|");
    $jq.each(strcities.toString().split("|"), function (k, v) {
        var v = v.split("|");
        var id = aCityIDs[k];
        $jq("<option selected value='"+id+"' />").text(v[0]).appendTo("select.chosen-cities");
    });
}

Answer 2

Assuming your cities IDs and your cities names are orderred in the same way, you can access each name/id by this index in the arrays :

var cityIDs = $jq(".hiddenFieldChosenAreas").val();
var strcities = $jq(".hiddenFieldChosenCities").val();

var cityIDs_array = cityIds.split("|");
var strcities_array = strcities.split("|");

....

if (strcities) {
    $jq.each(strcities_array, function (k, v) {
        //var v = v.split("|"); Unnecessary if strcities is like "city1|city2|city3"
        $jq("<option value='"+cityIDs_array[k]+"' />").text(v).appendTo("select.chosen-cities");
    });
}

In this, way, you can access each city ID in your loop.
But I think you should store city name and city id in the same string. For example "city1:1|city2:2|city3:3" . Then, with some use of split function, you'll get id and name.

Answer 3

Another example:

var strict = ('aaa|eeee|dddd').split('|');
var id = ('1|2|3').split('|');

$.each(strict, function (k) {
            $("<option selected />").text(strict[k]).appendTo("select.chosen-cities").attr('value',id[k]);
        });

Answer 4

This is easy enough if your two arrays are in parity with one another with regards to indexing - loop over one, then look up a value in the other array at the same index.

//simulate environment
var strcities = 'one|two|three',
    cityIDs = '1|2|3';

//main code
var ids = cityIDs.split('|');
$.each(strcities.toString().split("|"), function (index, val) {
    var opt = $("<option />", {value: ids[index], text: val}).appendTo("select.chosen-cities");
    /* if (index == 2) opt.prop('selected', 'selected'); /*
});

A few points of note:

• you were splitting on | once in the $.each and again inside it. Since this would be illogical (any | would have disappeared after the first split) I removed it.
• you were adding selected to each option. If you simply want the first option to be selected, you don't need to add anything in. If you want a specific option to be selected, see the line I commented out, which selects the 3rd element.

http://jsfiddle.net/DhH3U/