Json failed to parse on ajax post request

Question

I have an ajax request, gets string from input field and sends it to the server, expecting to receive collection of objects. I am supposed to receive a collection of Notes, which note has object Logbook, object Category, object User, however, If I remove those and not include them, the parsing is working properly.

Way to retrieve the collection:

public ICollection<NoteViewModel> SearchByTextAsync(string text)
        {
            var notes = this.dbContext.Notes
                //.Include(l => l.Logbook)
                //    .ThenInclude(x => x.LogbookManagers)
                //.Include(x => x.Logbook)
                //    .ThenInclude(s => s.Business)
                //.Include(c => c.Category)
                //.Include(u => u.User)
                .Where(n => n.Text.Contains(text))
                .ToList();

            var mappedNotes = this.mappingProvider.MapTo<ICollection<NoteViewModel>>(notes);
            return mappedNotes;
        }

If I simply remove the four includes I do, parsing is working fine! How am I supposed to retrieve the collection with the included objects?

Ajax call

$("#target").keyup(function (event) {
    var request = $.ajax({
        url: "/Management/Management/GetNotesAsyncJson",
        type: "POST",
        data: { "data": event.target.value },
        dataType: 'json'
    });

    request.done(function (data) {
        $.each(data, function (index) {
            var textToPrepend =
                "<div class='pricing-option' id='idPlace'>" +
                "<i class='material-icons'> mode_comment</i>" +
                "<h1 class='note-title' id='titlePlace'>admin@admin.admin</h1>" +
                "<hr />" +
                "<p id='textPlace'>" + data[index].text + "</p>" +
                "<hr />" +
                "<p id='priorityPlace'>" + data[index].prioritytype + "</p>" +
                "<hr />" +
                "<div class='price'>" +
                "<div class='front'>" +
                "<span class='note-title'>@Model.Category?.Name </span>" +
                "</div>" +
                "<div class='back'>" +
                "<i class='material-icons' id='editNote' data-Id='@Model.Id'>edit</i>" +
                "<i class='material-icons' id='deleteNote' data-Id='@Model.Id'>remove_circle</i>" +
                "<i class='material-icons' id='archiveNote'>archive</i>" +
                "</div>" +
                "</div>" +
                "</div>";

            $('.pricing-table').prepend(textToPrepend)
        });
    })
    request.fail(function (data) {
        console.log(data);
        console.log(data.responseText)
    })
});

Controller

public JsonResult GetNotesAsyncJson(string data)
        {
            var notes = this.noteService.SearchByTextAsync(data);
            var model = new SearchViewModel();
            model.Notes = notes;

            return Json(model.Notes);
        }

Answer 1

Solution: Json was in self reference loop and couldnt parse the properties. I solved it by adding [JsonIgnore] to the properties causing this.

Answer 2

In your controller

[HttpPost({data})] 
public JsonResult GetNotesAsyncJson(string data)
{
  var notes = this.noteService.SearchByTextAsync(data);
  var model = new SearchViewModel();
  model.Notes = notes;

  return Json(model.Notes);
}

If that not working try to use JSON.stringify in your ajax code something like this

$("#performActionButton").click(function (event) {
        var data = { data: event.target.value };
        $.ajax({
            url: '/url',
            data: data,
            type: 'POST',
            traditional: true,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {

            }
        });
    });