Get JavaScript object from array of objects

Question

I have an array of four objects:

this return array of obejcts

var arrProducts = @Model.ViewModel_SessionObject.GetJsonProducts();

var arrProducts = [
{"RateCode":"IBE","RoomCode":"A1D","IDSharedAvailability":0,"TotalRooms":"4 rooms available","SelectedRooms":0},
{"RateCode":"PR2","RoomCode":"A1D","IDSharedAvailability":0,"TotalRooms":"4 rooms available","SelectedRooms":0},
{"RateCode":"IBE","RoomCode":"B2T","IDSharedAvailability":0,"TotalRooms":"7 rooms available","SelectedRooms":0},
{"RateCode":"PR2","RoomCode":"B2T","IDSharedAvailability":0,"TotalRooms":"7 rooms available","SelectedRooms":0}];

Is there a way that I can get the object when i click on anchor tag this view of my list of all object , to be more clear i want select or find the object by RoomCode and RateCode when i click on the anchor tag .

@foreach (var item in Model.ViewModel_SessionObject.HotelAvailabilityRSObject.RoomTypes)  // rooms Loop
{
    HotelDetailsRSRoomType RoomDetails = Model.ViewModel_SessionObject.HotelDetailsRSObject.GetRoomTypeByCode(item.RoomCode);
    if (RoomDetails != null)
    {
        <div style="border-left: 1px solid #fff;border-right: 1px solid #fff;padding: 10px;border-bottom:  1px solid #fff;background-color: #fff; ">

            <!--Rate describtion-->
            <br />
            <!--Rooms section-->
            <div id="rooms">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
                        <!--rooms Name-->
                        <label>@RoomDetails.RoomName</label><br />
                        <p>
                            <!--rooms Image-->
                            <img height="200" width="200" style="border:solid;" src=@RoomDetails.GetRoomURL() />
                        </p>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 font">
                        <!--rooms Describtion-->
                        <div class="comment">
                            <label>@RoomDetails.RoomDescription</label><br />
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-5">
                        @foreach (var rateitem in item.RateCodes)
                        {
                            <div style="background-color:#F9F9F9;border-bottom: 2px #c9c5c5 solid;">
                                <!--rooms Price-->
                                <label>@Model.ViewModel_SessionObject.HotelDetailsRSObject.GetRateCodeByCode(rateitem.RateCode).RateName</label><br />
                                <div class="tooltip" style="margin-left: 83px;">
                                    <img src="~/img/info.png" alt="Alternate Text" />
                                    <span class="tooltiptext">@Model.ViewModel_SessionObject.HotelDetailsRSObject.GetRateCodeByCode(rateitem.RateCode).RateDescription</span>
                                </div>
                                <div class="tooltip" style="margin-left: 42px;">
                                    @if (rateitem.CancellationPolicies[0].CancelTimestamp > DateTime.Today)
                                    {
                                        <img src="~/img/FreeCancellationPossible.png" alt="Alternate Text" />
                                        <span class="tooltiptext">@rateitem.CancellationPolicies[0].GetCancellationPolicyText()</span>
                                    }
                                    else
                                    {
                                        <img src="~/img/FreeCancellationNotPossible.png" alt="Alternate Text" />
                                        <span class="tooltiptext">@rateitem.CancellationPolicies[0].GetCancellationPolicyText()</span>
                                    }
                                </div>
                                <div class="tooltip">

                                    @if (rateitem.MealsIncluded.ToString() == "NoMeals")
                                    {
                                        <img src="~/img/NoMealsIncl.png" alt="Alternate Text" />
                                        <span class="tooltiptext">@rateitem.GetMealsText()</span>
                                    }
                                    else
                                    {
                                        <img src="~/img/MealsIncl.png" alt="Alternate Text" />
                                        <span class="tooltiptext">@rateitem.GetMealsText()</span>
                                    }
                                </div><br /><br /><br />
                                <label>@rateitem.GetAvailabilityText()</label>
                                <div id="btn_select" style='position:relative;background-color:#77d711;width:89px;height:40px;float: right;bottom: 67px;'>
                                    <p style='display:inline;color:#ffffff;float:right;margin-top: 10px;margin-right: 4px;'>
                                        @rateitem.TotalRate.ToString("N2")
                                        @Model.ViewModel_SessionObject.HotelAvailabilityRSObject.CurrencyCode
                                    </p>
// This is the anchor tag i want click on to select the object he has            <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href='javascript:SelectRooms(arrProducts);'></a>
                                </div><br /><br /><br />
                                <div id="btn_remove" style='position:relative;background-color:#11d7c9;width:89px;height:30px;float: right;display:none;'>
                                    <p style='display:inline;color:#ffffff;float:right;margin-top: 5px;margin-right: 20px;'>
                                        Remove
                                    </p>
                                    <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href='#'></a>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <!--End rooms section-->
        </div>
    }
}

I tried this function but it gives or return all objects when i click on anchor tag but i need specific object i selected by anchor :

<script type="text/javascript">
    function SelectRooms(arrProducts) {
        var filterObj = arrProducts.filter(function (e) {
            return e.
        });

     };
</script>

Answer 1

I'm not 100% sure what you want exactly but I guess your mistake was to not pass the roomcode/roomrate not to your function. If that's the case you may find this useful:

Get room by "RoomCode" as a single object:

function getRoom(arrProducts, code){
    //for modern browsers (> ie 11)
    return arrProducts.find(x => x.RoomCode === code);

    //for a bit older ones
    return arrProducts.filter(function(x) {
        return x.RoomCode === code;
    }).pop();

    //for really old ones
    for(var i = arrProducts.length; i--;;){
        if (arrProducts[i].RoomCode === code) return arrProducts[i];
    }

    return null;
}

Get rooms by "RoomRate" as an array:

function getarrProducts(arrProducts, rate) {
    //for modern browsers (> ie 11)
    return arrProducts.filter(x => x.RoomRate === rate);

    //for a bit older ones
    return arrProducts.filter(function(x) {
        return x.RoomRate === rate;
    });

    //for really old ones
    var results = [];
    for(var i = arrProducts.length; i--;;){
        if (arrProducts[i].RoomRate === rate) results.push(arrProducts[i]);
    }
    return results;
}

Update

In case you need the room by "RoomCode" and "RoomRate" you can do it like this:

function getRoom(arrProducts, code, rate) {
    //for modern browsers (> ie 11)
    return arrProducts.find(x => x.RoomCode === code && x.RoomRate === rate);

    //for a bit older ones
    return arrProducts.filter(function(x) {
        return x.RoomCode === code && x.RoomRate === rate;
    }).pop();

    //for really old ones
    for(var i = arrProducts.length; i--;;){
        if (arrProducts[i].RoomCode === code && x.RoomRate === rate) return arrProducts[i];
    }

    return null;
}

Docs:

• MDN: find
• MDN: filter

Answer 2

The method you pass to filter must return truthy value for any item(s) you want to return.

function SelectRooms(arrProducts) {
    var filterObj = arrProducts.filter(function (e) {
        return e.RateCode === "IBE" && e.RoomCode === "A1D";
    });
    return filterObj[0]; // first/single item
 };

Where you get the values from (IBE and A1D in the above example) is up to you