how to assign values to nested object through json object array

Question

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.

Segments is an object, not a collection so you cannot create an array. Just use data: $('form.Serialize(), to serialize all values of all form controls, or if you do want to write all this manually, then use Segments.Origin = $("#Segments_Origin").val(), etc (and note that your element will have id="Segments_Origin", not id="Origin") — user3559349
– user3559349, Commented May 16, 2016 at 11:50
YUPP u r right i have changed those id values already but i have to post all these values to certain air portal rest api so i was trying to post data as given in documentation of api otherwise it replies Bad Request @StephenMuecke — duke
– duke, Commented May 16, 2016 at 11:55
using $('form').serialize() will correctly serialize all your form controls assuming you have generated you view correctly. — user3559349
– user3559349, Commented May 16, 2016 at 11:57

Karthik M R · Accepted Answer · 2016-05-16 11:54:43Z

1

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>

edited May 16, 2016 at 11:54

answered May 16, 2016 at 11:49

Karthik M R

9901 gold badge7 silver badges12 bronze badges

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

2 Comments

duke Over a year ago

for the good sake, at last api returned 200 status code. i was just strict about to give rest api data in format mentioned in document however ur suggesstion worked @Karthik M R

Karthik M R Over a year ago

If you are using nested objects, the best practise is to use JSON.stringify function and mention application/json. If you don't use JSON.stringify then, the default behaviour of jquery is to send the data as application/x-www-form-urlencoded

Collectives™ on Stack Overflow

how to assign values to nested object through json object array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related