Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 } }
]
like image 412
kheya Avatar asked Dec 28 '22 20:12

kheya


2 Answers

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",
like image 154
Raynos Avatar answered Dec 30 '22 10:12

Raynos


$.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');
        }
    });
like image 36
Atticus Avatar answered Dec 30 '22 11:12

Atticus