I am learning jQuery and am having issues trying to figure out how to select elements in a multidimensional array. I have a select list with database IDs and I want to set a var with the cost field in the database according to the id that selected. I have all the pieces except for translating the selected ID to a cost. Can someone please help me with getting this right please?

var rangeListData = [{"idrange_list":"1","range_cost":"0","target_range_name":"Self Only"},{"idrange_list":"2","range_cost":"1","target_range_name":"1 Space"},{"idrange_list":"3","range_cost":"2","target_range_name":"2 Spaces"},{"idrange_list":"4","range_cost":"3","target_range_name":"3 Spaces"},{"idrange_list":"5","range_cost":"4","target_range_name":"4 Spaces"},{"idrange_list":"6","range_cost":"5","target_range_name":"5 Spaces"}];

$('#slctPowerTarget').change(function () {
    var targetID = $('#slctPowerTarget').val();
    var cost $.grep(rangeListData, function(e) { return e.idrange_list == targetID }); // this is the line that is wrong
    $('#spanTotalEffectsCost').text(cost);

});

If I put targetID in where cost is it lists fine. But when I try to look this up nothing happens. It is not right somehow and I am not sure what else to try. I think I get how idrange_list == targetID is supposed to match them but not sure how to call the related range_cost.

Thanks for any help you can offer! I read through the docs at jquery but can't seem to wrap my head around them.

I am learning jQuery and am having issues trying to figure out how to select elements in a multidimensional array. I have a select list with database IDs and I want to set a var with the cost field in the database according to the id that selected. I have all the pieces except for translating the selected ID to a cost. Can someone please help me with getting this right please?

var rangeListData = [{"idrange_list":"1","range_cost":"0","target_range_name":"Self Only"},{"idrange_list":"2","range_cost":"1","target_range_name":"1 Space"},{"idrange_list":"3","range_cost":"2","target_range_name":"2 Spaces"},{"idrange_list":"4","range_cost":"3","target_range_name":"3 Spaces"},{"idrange_list":"5","range_cost":"4","target_range_name":"4 Spaces"},{"idrange_list":"6","range_cost":"5","target_range_name":"5 Spaces"}];

$('#slctPowerTarget').change(function () {
    var targetID = $('#slctPowerTarget').val();
    var cost $.grep(rangeListData, function(e) { return e.idrange_list == targetID }); // this is the line that is wrong
    $('#spanTotalEffectsCost').text(cost);

});

If I put targetID in where cost is it lists fine. But when I try to look this up nothing happens. It is not right somehow and I am not sure what else to try. I think I get how idrange_list == targetID is supposed to match them but not sure how to call the related range_cost.

Thanks for any help you can offer! I read through the docs at jquery. but can't seem to wrap my head around them.

• javascript
• jquery
• arrays
• multidimensional-array
• grep

Share Improve this question Follow asked Oct 22, 2013 at 5:39 user1518699user1518699 40722 gold badges1111 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can do this :-

// Get the Multidimensional Array first
var data = $.grep(rangeListData, function (e) {
    return e.idrange_list === targetID
});

// Get the range cost from the array
var cost = data[0].range_cost;

// Check the value in console for debugging purpose
console.log(cost);

Here is the final code. I also added an IF clause in there in case they select the default setting. This way it will reset instead of tossing an error and keeping page calculations working no matter if they change the drop downs or go back to "Select..."

$('#slctPowerRange').change(function () {
    var rangeID = $('#slctPowerRange').val();
    if (rangeID > 0) {
        var rdata = $.grep(rangeListData, function (e) { 
            return e.idrange_list === rangeID 
            });
        var rcost = rdata[0].range_cost;
    }
    else {
        var rcost = 0 ;
    }
    $('#hdnRangeCost').val(rcost);
});