duke duke - 6 months ago 29
Javascript Question

how to assign values to nested object through json object array

This is my model class:

public class SearchForFlight
{
public SearchForFlight()
{
Segments = new otherType();
}
public int AdultCount { get; set; }
public JourneyType JourneyType { get; set; }
public string Sources { get; set; }

public otherType Segments { get; set; }
}
public class otherType
{
public string Origin { get; set; }
public string Destination { get; set; }
public FlightCabinClass FlightCabinClass { get; set;}
public DateTime PreferredDepartureTime { get; set;
public DateTime PreferredArrivalTime { get; set; }
}


Now, My requirement is to post objects along with nested object to an external api.
The required form is something like this:

{
AdultCount: $("#AdultCount").val(),
JourneyType: $("#JourneyType :selected").text(),
PreferredAirlines: null,
Segments: [
{
Origin: $("#Origin").val(),
Destination: $("#Destination").val(),
FlightCabinClass: $("#FlightCabinClass").val(),
PreferredDepartureTime:$("#PreferredDepartureTime").val(),
PreferredArrivalTime: $("#PreferredArrivalTime").val(),
}
]
}


So, i have created another class OtherType and put all those nested objects into it.
I got the idea from this so question
How to send nested json object to mvc controller using ajax
Now, this is my Script tag with all the code inside to post simple objects along with nested objects.But nested objects value comes out to be null.
How should i model this code here.

<script>
$(document).ready(function () {
$("#btnPost").click(function () {
var sof = {
AdultCount: $("#AdultCount").val(),
JourneyType: $("#JourneyType :selected").text(),
PreferredAirlines: null,
Segments: [
{
Origin: $("#Origin").val(),
Destination: $("#Destination").val(),
FlightCabinClass: $("#FlightCabinClass").val(),
PreferredDepartureTime: $("#PreferredDepartureTime").val(),
PreferredArrivalTime: $("#PreferredArrivalTime").val(),
}
],
};

$.ajax(
{
url: "/api/Flight/SearchFlight",
type: "Post",
data: sof,
success: function (data) {
alert(data);
}
});
});
});
</script>


Posted Properties values for Origin, Destination comes out to be null.

The textbox rendered on view page are something like this:

@Html.TextBoxFor(model => model.Segments.Origin)


Any hint please.

Answer

Remove the array [] for Segments. Use contentType and stringify in your $.ajax func. Use the generated id for the Origin. It might not be "Origin". So,pls change it accordingly.

 <script>
            $(document).ready(function () {                 
                $("#btnPost").click(function () {
                    var sof = {
                        AdultCount: $("#AdultCount").val(),
                        JourneyType: $("#JourneyType :selected").text(),
                        PreferredAirlines: null,
                        Segments: {
                                Origin: $("#Origin").val(),
                                Destination: $("#Destination").val(),
                                FlightCabinClass: $("#FlightCabinClass").val(),
                                PreferredDepartureTime: $("#PreferredDepartureTime").val(),
                                PreferredArrivalTime: $("#PreferredArrivalTime").val(),
                            },
                    };

                    $.ajax(
                        {
                            url: "/api/Flight/SearchFlight",
                            type: "Post",
                            contentType: 'application/json',
                            data: JSON.stringify(sof),
                            success: function (data) {
                                alert(data);
                            }
                        });        
                });
            });
    </script>