CODEWITHSUNDEEP
jqueryajaxjsonasp.net-mvc-3
kheya
kheya

Reputation: 7612

How do I return JSON and loop through the returned json in jQuery in MVC app?

I have an MVC controller that returns JSON. I want to read/get that JSON using jQuery and loop through the json items/rows.

Basically I am reading bunch of comments and then show the comments one by one.

Does anyone have code sample to do it?

I get the json correctly. See returned data below.

    $.ajax(
    {
        type: "GET",
        url: "/comment/GetComments",
        dataType: "json",
        data: "blog_id=100&page_size=5&page_no=1",
        success: function (result) {
            //loop the data.. how do I loop json?
        },
        error: function (req, status, error) {
            alert('Error getting comments');
        }
    });

    My controller:

    [HttpGet]
    public ActionResult GetComments(string blog_id, int page_size, int page_no)
    {            
        try
        {                
            List<Comment> comments = ReadCommentsFromDB();

            if(comments .Count > 0)                
                return Json(new { comments = cmts.ToJson() }, JsonRequestBehavior.AllowGet);
            else
                return Json(new { comments = "none" },, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return Json(new { comments = ex.ToString() }, JsonRequestBehavior.AllowGet);
        }
    }

Thanks

EDIT:

How do I loop these json returned by controller? I need to loop 3 times and then for each row, I need to have access to all keys and values in that row.

[{ "_id" : { "$oid" : "4dc8" }, "eid" : { "$oid" : "4da" }, "user" : "bob", "text" : "First comment!!", "dt" : { "$date" : 1304966277978 } }, 
 { "_id" : { "$oid" : "4dc8" }, "eid" : { "$oid" : "4da" }, "user" : "bob", "text" : "Second comment!!", "dt" : { "$date" : 1304966347677 } }, 
 { "_id" : { "$oid" : "4dc8" }, "eid" : { "$oid" : "4da" }, "user" : "bob", "text" : "Third comment!!", "dt" : { "$date" : 1304966493240 } }
]

Upvotes: 4

Views: 5808

Answers (4)

Adam Tuliper
Adam Tuliper

Reputation: 30152

Remove [HttpPost] from your controller method to allow get requests in conjunction with JsonRequestBehavior.AllowGet

What internal server error do you get? what is the message?

Upvotes: 1

Leons
Leons

Reputation: 2674

The answer to your first problem is to allow Json to work in a GET. Json normally only work for a post. You allow Json in GET by using the following return method in your controller (using one of your return statements).

return Json(new { comments = "none" }, JsonRequestBehavior.AllowGet)

Edit: You can also return JsonResult instead of ActionResult as seen below.

public ActionResult GetComments(string blog_id, int page_size, int page_no)    
{           
    try        
    {
        List<Comment> comments = ReadCommentsFromDB();

        // Assuming that Comments will be an empty list if there are no data
        return Json(comments, JsonRequestBehavior.AllowGet)
    }
    catch (Exception ex)
    {
        return Json(new { comments = ex.ToString() }, JsonRequestBehavior.AllowGet));
    }
}

Upvotes: 2

Raynos
Raynos

Reputation: 169383

success: function(result) {
    $.each(result["comments"], function(key, value) {
        // loop
    });
}

Your result should be a json object 

{
    "comments": ...
}

As for the get failing try :

type: "GET",
url: "/comment/GetComments?blog_id=100&page_size=5&page_no=1",
dataType: "json",
//data: "blog_id=100&page_size=5&page_no=1",

Upvotes: 4

Atticus
Atticus

Reputation: 6720

$.ajax(
    {
        type: "GET",
        url: "/comment/GetComments",
        dataType: "json",
        data: "blog_id=100&page_size=5&page_no=1",
        success: function (result) {
            jQuery.each(result['comments'], function(key,val){
               // do stuff :)
            });
        },
        error: function (req, status, error) {
            alert('Error getting comments');
        }
    });

Upvotes: 3

Related Questions