JsonConvert.SerializeObject doesn't serialize my object to a JSON string

Question

I am using Entity Framework with Database First approach. I want to fill my pie chart with data coming from database. The chart will be shown in home page so I have created a method named FillChart inside the HomeController.

HomeController

public class HomeController : Controller
{
    private readonly IRoomRepository _roomRepository;

    public HomeController(IRoomRepository roomRepository)
    {
        _roomRepository = roomRepository;
    }

    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public ActionResult FillChart()
    {

        var dbRoomList = _roomRepository.GetAll().Select(x => new { x.DoorNumber, x.Fullness });
        var jsonString = JsonConvert.SerializeObject(dbRoomList.ToList());
        return Json(jsonString, JsonRequestBehavior.AllowGet);
    }
}

HTML

<canvas id="pieChart"></canvas>

Javascript

<script type="text/javascript">
$(document).ready(function () {
    debugger;
    $.ajax({
        url: "FillChart",
        method: "GET",
        dataType: 'json',
        success: function (data) {
            debugger;
            console.log(JSON.parse(data));
            var doorNumber = [];
            var fullness = [];

            for (var i = 0; i < data.length; i++) {
                doorNumber.push("Door Number" + data[i].DoorNumber);
                fullness.push(data[i].Fullness);
            }

            var chartData = {

                labels: doorNumber,
                datasets: [{
                    label: 'Oda Numarası ',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: fullness
                }]
            };

            var ctx = $("#pieChart");
            var barGraph = new Chart(ctx,
                {
                    type: 'pie',
                    data: chartData
                });
        },
        error: function (data) {

            console.log(data);
        },
    });
});

After the code line below is compiled:

var jsonString = JsonConvert.SerializeObject(dbRoomList.ToList());

jsonString value seems like it is not serialized:

"[{\"DoorNumber\":1,\"Fullness\":1},{\"DoorNumber\":2,\"Fullness\":0},{\"DoorNumber\":3,\"Fullness\":0},{\"DoorNumber\":4,\"Fullness\":0},{\"DoorNumber\":1,\"Fullness\":0}]"

But when I take a look at inside of jsonString with Text Visualizer it looks like this:

[{"DoorNumber":1,"Fullness":1},{"DoorNumber":2,"Fullness":0},{"DoorNumber":3,"Fullness":0},{"DoorNumber":4,"Fullness":0},{"DoorNumber":1,"Fullness":0}]

I am opening the browser in debug mode to inspect the changings of javascript code

and I saw that data.lenght is 151 instead of 5. The result of console.log(JSON.parse(data)); is:

I have checked the answer of this question even so I couldn't find any solution to my problem. What is the problem of my code?

Its just return Json(dbRoomList, JsonRequestBehavior.AllowGet); - your serializing it to JSON twice — user3559349
– user3559349, Commented Oct 6, 2017 at 21:28

David Liang · Accepted Answer · 2017-10-07 18:22:20Z

If you're returning Json() form the Controller, you don't need to use JsonConvert.SerializeObject() to serialize the object before sent. Controller.Json() method will create a JsonResult object that serializes the specified object to JavaScript Object Notation (JSON).

Also in your jQuery code, since you've already specified JSON as dataType, the data returning from the server / on success() callback is expected to be in JSON format. You don't need to parse it again.

Server-side

[HttpGet]
public ActionResult FillChart()
{
    var dbRoomList = _roomRepository.GetAll()
        .Select(x => new { x.DoorNumber, x.Fullness });

    return Json(dbRoomList, JsonRequestBehavior.AllowGet);
}

jQuery code

$.ajax({
    url: "FillChart",
    method: "GET",
    dataType: 'json',
    success: function (data) {
        // data should already be a JSON object

        var doorNumber = [];
        var fullness = [];

        for (var i = 0; i < data.length; i++) {
            doorNumber.push("Door Number" + data[i].DoorNumber);
            fullness.push(data[i].Fullness);
        }
       ...
    }
});

Other suggestion

I would put the fully qualified url in jQuery ajax url. I also prefer using Razor HTML helper to generate the url instead of manually putting relative path there, because sometimes relative urls point to site root instead of application root.

For example, if you publish your app to a folder called app1 on your server www.example.com. You can access the app by going to www.example.com/app1. But any relative url like /home/fillChart will actually point to www.example.com/home/fillChart instead of www.example.com/app1/home/fillChart.

So I would suggest you do this:

$.ajax({
    url: '@Url.Action("fillChart", "home", new { area = "" })',
    method: "GET",
    dataType: 'json',
    success: function (data) {
        // data should already be a JSON object

        var doorNumber = [];
        var fullness = [];

        for (var i = 0; i < data.length; i++) {
            doorNumber.push("Door Number" + data[i].DoorNumber);
            fullness.push(data[i].Fullness);
        }
       ...
    }
});

Fran · Accepted Answer · 2017-10-06 20:05:55Z

0

151 is the length of the raw json string.

You never set your JSON.Parse result to an a variable, then loop over the array variable.

You need to do this in your success handler

    success: function (data) {
        debugger;
        var jsonArray = JSON.parse(data);
        console.log(jsonArray);
        var doorNumber = [];
        var fullness = [];

        for (var i = 0; i < jsonArray.length; i++) {
            doorNumber.push("Door Number" + data[i].DoorNumber);
            fullness.push(data[i].Fullness);
        }

answered Oct 6, 2017 at 20:05

Fran

6,5801 gold badge26 silver badges37 bronze badges

Collectives™ on Stack Overflow

JsonConvert.SerializeObject doesn't serialize my object to a JSON string

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related