Cannot show value after AJAX call (ASP.NET MVC)

Question

I have two <p> fields where I need to assign text

Here is html code:

 <p id="appId" style="visibility: hidden;"></p>
<p id="calculationId" style="visibility: hidden;"></p>

I make AJAX call like this

  $('#openCalculationConsumables').click(function() {
    addConsumables();
});

function addConsumables() {
    var patientName = $('#patientsId').val();
    var finding = $('#findingvalue').val();
    var procedure = $('#procedurevalue').val();
    var model = {
        findingValue: finding,
        procedureValue: procedure,
        patientId:patientName
    }
    $.ajax({
        url: '@Url.Action("AddIndividualCalculation", "Calculations")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function (data) {
            $('#masters_data').load('@Url.Action("IndividualCalculationConsumables", "Calculations")', function() {
                var list = data;
                $('#calculationId').text(list[0].calcid);
                $('#appId').text(list[0].appid);
            });

        }
    });
}

And here is my back end code:

  public JsonResult AddIndividualCalculation(string findingValue, string procedureValue,int patientId)
    {
        using (var ctx = new ApplicationDbContext())
        {
            Calculation calc = new Calculation
            {

            };
            ctx.Calculations.Add(calc);
            ctx.SaveChanges();
            int calculationId = calc.Id;
            Appointment app = new Appointment
            {
                Calculation_id = calculationId,
                FindingContent = findingValue,
                ProcedureContent = procedureValue,
                Patient_id = patientId

            };
            ctx.Appointments.Add(app);
            ctx.SaveChanges();
            int appointmentId = app.Id;
            var items = new
            {
                appid = appointmentId,
                calcid = calculationId
            };


            return Json(items,JsonRequestBehavior.AllowGet);
        }
    }

I set breakpoint and see , that I have values in items. In console log I have this {appid: 1006, calcid: 1006}

But I cant assign it to <p> and have this error.

Cannot read property 'calcid' of undefined

Where is my problem?

Thank's for help.

Answer 1

$('#masters_data').load('@Url.Action("IndividualCalculationConsumables", "Calculations")', function() {
    var list = data;
    $('#calculationId').text(list[0].calcid);
    $('#appId').text(list[0].appid);
});

list[0] is not defined as you are returning just an anonymous object not a list of objects

new {
   appid = appointmentId,
   calcid = calculationId
};