asp.net mvc - Display JSON from classes -

i want display information classes view in mvc. want display information json.

this how json needs like:

{     "timestamp": "2017-06-20 12:12:10",     "categories": [     {       "name": "fiction",     },     {       "name": "roman",         } ] ,     "types": [     {       "name": "long story",     },     {       "name": "short story",           } ],     "books": [     {         "title": "song of ice , fire",         "booknumber": "1234567",         "aisle":         [             {                 "location": "fiction isle",             },             {                 "location": "roman aisle",             }         ]     } ] } 

this classes created

public class category {     public string name { get; set; } }  public class type {     public string name { get; set; } }  public class aisle {     public string location { get; set; } }  public class book {     public string title { get; set; }     public string booknumber { get; set; }     public list<aisle> aisle { get; set; } }  public class rootobject {     public string timestamp { get; set; }     public list<category> categories { get; set; }     public list<type> types { get; set; }     public list<book> books { get; set; } } 

i'm pretty new json , mvc, im kinda stuck on how proceed forward.

i created constructors this

public book() {     title = "song of ice , fire";     booknumber = "1234567"     public list<aisle> aisle { get; set; } }  public book(string _title, string _booknum) {     title = _title;     booknumber = _booknum } 

my mvc

public actionresult testing()         {             importbooks m1 = new importbooks();             return json(m1, jsonrequestbehavior.allowget);         } 

and view

@section scripts{ <script type="text/javascript">     $("#btngetbooks").click(function () {         var actionurl = '@url.action("testing", "books")';         $.getjson(actionurl, displaydata);     });      function displaydata(response) {         if (response != null) {             (var = 0; < response.length; i++) {                 $("#booklist").append();             }         }     } </script>  } <h2>testing</h2>  <input name="btngetbooks" id="btngetbooks" type="submit" value="get movies"> <p id="booklist"></p> 

i dont know whether constructors way go, not know how display data view.

please help!

if assuming correctly, able fetch , fill object mvc side. can following update html:

controller code:

    public actionresult testing()     {         list<rootobject> booklist = new list<rootobject>();         //sample data addition starts         rootobject rt = new rootobject();         rt.timestamp = datetime.now.tostring();          list<aisle> a1 = new list<aisle>();         a1.add(new aisle { location = "location" });         list<category> c1 = new list<category>();         c1.add(new category {             name = "categoryname"         });         list<models.type> t1 = new list<models.type>();         t1.add(new models.type         {             name = "typename"         });         rt.categories = c1;         list<book> b1 = new list<book>();         b1.add(new book         {             aisle = a1,             booknumber = "booknumber",             title = "title"          });         rt.books = b1;         rt.types = t1;         booklist.add(rt);         //sample data addition done here         //or fill booklist database or whatever datasource using         return json(booklist, jsonrequestbehavior.allowget);     } 

javascript code:

function displaydata(response) {         if (response != null) {             var strmainbook = '<ul class="yourclass">';             (var = 0; < response.length; i++) {                 strmainbook += '<li>' + response[i].timestamp + '</li>';                 var strbookcategory = '<ul class="yourclass">';                 (var j = 0; j < response[i].categories.length; j++) {                      strbookcategory += '<li>' + response[i].categories[j].name + '</li>';                  }                 strbookcategory += '</li>';                 strmainbook += strbookcategory;                  var strbooktype= '<ul class="yourclass">';                 (var j = 0; j < response[i].types.length; j++) {                     strbooktype += '<li>' + response[i].types[j].name + '</li>';                 }                 strbooktype += '</li>';                 strmainbook += strbooktype;                 strmainbook += '</ul>'                 $("#booklist").append(strmainbook);             }         }     }