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!

You have not shown a model for ImportBooks - but the json you have shown matched RootObject so if that is what you want to pass to the view, then its RootObject model = new RootObject(); // set some properties return return Json(model , JsonRequestBehavior.AllowGet); — user3559349
– user3559349, Commented Jul 31, 2017 at 13:38
And since your only sending one RootObject to the view, your loop makes no sense (its not a collection). And what is it you want to append to the <p id="bookList"> element (some <span>elements containing the values of your RootObject? You need to explain what the result you want is — user3559349
– user3559349, Commented Jul 31, 2017 at 13:40
@mike91 Your constructor won't be called in case of JSON or contract serialization and you will end up having null reference to your list. — Tejas Vaishnav
– Tejas Vaishnav, Commented Aug 2, 2017 at 12:55

Tejas Vaishnav · Accepted Answer · 2017-08-02 12:30:36Z

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); } } }

Collectives™ on Stack Overflow

Display JSON from classes

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related