Getting data from Json returned by controller action

Question

I have a modal that I am trying to populate via sending a modal through a JSON obj from a controller action. It seems to be returning the model just fine, however I am having a hard time extracting the data from the model to populate HTML.. Below is my code.

If anyone can help correct my syntax in the JS, it would be greatly appreciated.

Controller action:

      [HttpGet]
    public ActionResult JobPollerParameters(int jobRequestId)
    {
        var model = new Dashboard.Web.Models.Tools.JobPollerMonitorResponseModel();

        try
        {
            using (var client = new DashboardAPIClient())
            {
                var response = client.GetJobRequestParemeters(jobRequestId);
                model.JobRequestParameters = response.JobRequestParameters;


            }
        }
        catch (Exception ex)
        {
            ExceptionHandling.LogException(ex);
            throw;
        }

        return Json( model.JobRequestParameters, JsonRequestBehavior.AllowGet);
    }

Modal which JSON data needs to be displayed on:

<div class="modal fade" id="paramsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header modal-header-primary">
            <a class="btn btn-xs btn-primary pull-right" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></a>
            <h4 class="modal-title" id="modalTitleText"></h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-3 font-weight-bold">Name:</div>
                <div class="col-md-9" id="modalName"></div>
            </div>
            <div class="row">
                <div class="col-md-3 font-weight-bold">Message:</div>
                <div class="col-md-9 text-break" id="modalMessage"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

JS function:

    $('#paramModalBtn').click(function () {

    var col = $('#requestId');
    var jobRequestId = col.data("id");

    //console.log(jobRequestId);

     $.ajax({
        url: '@Url.Action("JobPollerParameters", "Tools")',
         data: { "jobRequestId": jobRequestId},
        success: function(results){

            $modal = $('#paramsModal');
            $modal.modal("show");

            var name = JSON.parse(results.name);
            var message = JSON.parse(results.message)

            $('#modalName').text(name);
            $('#modalMessage').text(message);
        }
    });
});

Also for some context, I would like to show that the Model I am returning should be a list of "JobRequestParameters", of which I need Model.JobRequestParameters.Name, and JobRequestParameters.value.

If I log results in the console, I can see what I need is actually there.

JobParameterId: 118190
JobRequestId: 118190
Name: "CUSTOMERTYPE"
Value: "Notary Pre-Assessment"

Name and Value are what I need.

Answer 1

Here is the solution for deserializing the JSON object

    $("button").click(function () {

    var col = $('#requestId');
    var jobRequestId = col.data("id");

     $.ajax({
        url: '@Url.Action("JobPollerParameters", "Tools")',
         data: { "jobRequestId": jobRequestId},
        success: function(results){

            $modal = $('#paramsModal');
            $modal.modal("show");
            console.log(results);

            var name = JSON.stringify(results[0].Name);
            var value = JSON.stringify(results[0].Value);

            $('#modalName').text(name);
            $('#modalMessage').text(value);
        }
    });
});

Answer 2

The controller returns a string formatted as JSON, which can then be parsed into a JavaScript object and used as such.

You need to parse the data once and then you'll have an object you can use.

var obj = JSON.parse(results);
$('#modalName').text(obj.name);
$('#modalMessage').text(obj.message);