How to read JSON response containing an array of objects of a user-defined class?

Question

I am developing a ASP.NET WebForms website that uses JQuery to fetch some data from a ASP.NET ASHX handler. This data is an array of objects of a class that is user-defined. Following is the code of Handler:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using WRG_2._1.WRGCore;

namespace WRG_2._1.Handlers
{
    /// <summary>
    /// Summary description for ResponseFetcher
    /// </summary>
    public class ResponseFetcher : IHttpHandler, System.Web.SessionState.IReadOnlySessionState
    {
        public void ProcessRequest(HttpContext context)
        {
            List<Topic> comments = new List<Topic>() {
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },
                new Topic(){ Title=DateTime.Now.ToString() +":"+ DateTime.Now.Millisecond },

            };
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string sJSON = jss.Serialize(comments);
            context.Response.Write(sJSON);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }
}

I am fetching data from JQuery Ajax like this:

$(document).ready(function () {
            var url = '/Handlers/ResponseFetcher.ashx';
            $.ajax({
                url: url,
                type: "POST",
                data:
                    JSON.stringify({ val1: 2, val2: 3 })
                ,
                dataType: "json",
                cache: true,
                beforeSend: function () {
                    now = (new Date()).getTime();
                    if (localCache.exist(url)) {
                        tDiff = now - cacheTime;
                        if (tDiff < 20000) {
                            loadData(localCache.get(url));
                            return false;
                        }
                    }
                    return true;
                },
                complete: function (jqXHR, textStatus) {
                    localCache.set(url, jqXHR, loadData);
                }
            });

        });

        function loadData(data) {
            console.log(data);
            $(data.responseJSON).each(function (i) {

                $('#responsecontainer').html = data.responseJSON[i].Title;
            });
        }

The function loadData() is getting the data perfectly. But its not adding it to #responsecontainer div. Please help!

Note that the class Topic can have null variables too.

76484 · Accepted Answer · 2014-03-22 14:05:07Z

1

jQuery's .html is a method. You use it as a setter by passing the new value as the argument:

$('#responsecontainer').html(data.responseJSON[i].Title);

But this will iteratively fill #responsecontainer with each .Title in your data.reponseJSON objects, with each .Title replacing the last .Title, so you'll only ever see the last .Title. You probably want to append:

$('#responsecontainer').append(data.responseJSON[i].Title);

answered Mar 22, 2014 at 14:05

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KveRa · Accepted Answer · 2014-03-22 14:17:29Z

1

Returning it on that way you really have that responseJSON property on the data object?

on my experiences returning it on that way i've got the results directly on the data object:

$(data).each(function (i) {
    $('#responsecontainer').append(data[i].Title);
});

answered Mar 22, 2014 at 14:17

KveRa

1111 bronze badge

Comments

Aishwarya Shiva · Accepted Answer · 2014-03-22 16:29:11Z

0

The problem was with parsing of JSON response. I converted my code of loadData() function to:

function loadData(data) {
            var resdata = JSON.parse(data.responseText);
            console.log(resdata[0].Title);

            $(resdata).each(function (i) {
                $('#responsecontainer').append(resdata[i].Title);
            });
        }

And now its working. Thanks to all those who answered my question. Your answers gave me this hint. :)

answered Mar 22, 2014 at 16:29

Aishwarya Shiva

3,41616 gold badges61 silver badges113 bronze badges

1 Comment

76484 Over a year ago

Inside the .each callback, the current array element will be assigned to 'this', so an alternative way to achieve the same thing is: $('#responsecontainer').append(this.Title);

Collectives™ on Stack Overflow

How to read JSON response containing an array of objects of a user-defined class?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related