jQuery grep return on Multidimensional Array

Question

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.

palaѕн · Accepted Answer · 2013-10-22 05:46:32Z

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

answered Oct 22, 2013 at 5:46

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1518699 Over a year ago

Excellent! This did the trick. I see I was forgetting to select what I needed from the object that was filtered down. Since it was lots of objects, not just a standard array. I needed to find the object, then find what I needed in that object. Its a two step process in jQuery it seems. Also I see you added === which was a good call too. Thanks for helping my sleep deprived mind work through this new language for me!

user1518699 · Accepted Answer · 2013-10-23 01:23:38Z

0

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

answered Oct 23, 2013 at 1:23

user1518699

4072 gold badges11 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery grep return on Multidimensional Array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related