CODEWITHSUNDEEP
javascriptjqueryarraysmultidimensional-arraygrep
user1518699
user1518699

Reputation: 407

jQuery grep return on Multidimensional Array

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.com but can't seem to wrap my head around them.

Upvotes: 1

Views: 6601

Answers (2)

user1518699
user1518699

Reputation: 407

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);
});

Upvotes: 0

palaѕн
palaѕн

Reputation: 73886

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);

Upvotes: 4

Related Questions