Display JSON from classes

Question

I want to display my information from my classes to my view in mvc. I want to display information as JSON.

This is how my JSON needs to look 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 and fire",
        "bookNumber": "1234567",
        "aisle":
        [
            {
                "location": "fiction isle",
            },
            {
                "location": "roman aisle",
            }
        ]
    }
]
}

this is the classes i 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 to JSON and mvc, so im kinda stuck on how to proceed forward.

I created some constructors like this

public Book()
{
    title = "Song of ice and 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 my 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) {
            for (var i = 0; i < 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 are the way to go, but i really do not know how to display data into my view.

Please help!

Answer 1

If I am assuming correctly, you are able to fetch and fill object properly from MVC side. You can do following to update your 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 from database or whatever datasource you are using
        return Json(bookList, JsonRequestBehavior.AllowGet);
    }

Javascript code:

function displayData(response) {
        if (response != null) {
            var strMainBook = '<ul class="yourclass">';
            for (var i = 0; i < response.length; i++) {
                strMainBook += '<li>' + response[i].timestamp + '</li>';
                var strBookCategory = '<ul class="yourclass">';
                for (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">';
                for (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);
            }
        }
    }