Return object with IEnumerable with AJAX

Question

I have some problem while getting the object from the controller via AJAX call.To be precise, I would like to get the object which contains property with IEnumerable type.

Class 1 :

public class ChartItem
        {
            public string cName { get; set; }
            public string label { get; set; }
            public decimal value { get; set; }
            public decimal value2 { get; set; }
            public string value2Cur { get; set; }
            public string value2Unit { get; set; }
            public string color { get; set; }
            public string strokeColor { get; set; }
            public string chartTitle { get; set; }
        }

Class 2 :

public class ReportParameter
        {
            public string ReportName { get; set; }
            public string DateFrom { get; set; }
            public string DateTo { get; set; }
            public string CountryId { get; set; }
            public string RegionId { get; set; }
            public string RepresentativeId { get; set; }
            public string CustomerId { get; set; }
            public ExportFormatType ReportFormat { get; set; }
            public EReport.ChartType ChartType { get; set; }
            public bool EmailFlag { get; set; }
            public IEnumerable<ChartItem> chartItems { get; set; }
        }

This is the controller that execute the call :

 [HttpPost]        
            public JsonResult ReloadReportSummary(EReport.ReportParameter rptParam)
            {
                EMAP.WEB_Bootstrap.Helper.ViewHelper viewHelper = new ViewHelper();
                IEnumerable<EReport.ChartItem> resultChart=null;

                try
                {
                    EReport.ReportParameter eRpt = new EReport.ReportParameter();

                    eRpt.ReportName = ((EReport.ReportName)Enum.Parse(typeof(EReport.ReportName), rptParam.ReportName)).ToString();

                    switch ((EReport.ReportName)Enum.Parse(typeof(EReport.ReportName), rptParam.ReportName))
                    {
                        case EReport.ReportName.CRPotentialCustomerList:

                            //reload the chart data 
                            resultChart =
                                from cp in db.CustomerProducts
                                join pr in db.Products on cp.ProductID equals pr.ProductID
                                group cp by cp.Product.ProductDescription into grp
                                select new EReport.ChartItem { label = grp.Key, value = grp.Count()};

                            break;

                        case EReport.ReportName.CRCustomerProductAppMasterPivot:

                            //reload the chart data 
                            resultChart =
                                from cp in db.CustomerProducts
                                join pr in db.Products on cp.ProductID equals pr.ProductID
                                group cp by cp.Product.ProductDescription into grp
                                select new EReport.ChartItem { label = grp.Key, value = grp.Count() };

                            break;
                        default:
                            break;
                    }



eRpt.chartItems = resultChart;
                ---EDITED----
                    var result = eRpt;        
                            return Json(new { Result = "OK", Record = result }, 
    JsonRequestBehavior.AllowGet);

                }

                catch (Exception ex)
                {   
                    return Json(new { Result = "ERROR"});
                }
            }

And this is the AJAX call :

$.ajax({
            url: urlReportSummary,
            data: JSON.stringify(rptParam),
            type: 'POST',
            contentType: 'application/json;',
            dataType: 'json',

            success: function (result) {                
                var len = result.Record.chartItem.length;               
            },
            error: function (ex) {
                alert(ex);
            }
        });

Actually I would like to go through each Record.chartItem's object and do some process there. But somehow the returned record not being recognized. Below is the error :

"TypeError: result.Record.chartItem is undefined".

May I know what is the correct way to get the list of data using AJAX ?

Thanks a lot

Answer 1

Change the success function as below and try

success: function (result) {                
            var len = result.Record.chartItems.length;               
        },

You have misspelled the property chartItems. I think now it will work