How to parse a JSON object ? (From server-side to client-side...javascript)

Question

I have a jquery interacting with a server side Web Method. The Web method accepts a string 'memID' from the jquery and executes SQL queries based on it. Then I create a class:-

public class Member
{
    // Objects of Member. //
    public string id { get; set; }
    public string HPCode { get; set; }
    public string OPfromDate { get; set; }
    public string OPthruDate { get; set; }


    public Member(string ID, List<string> hpCode, List<string> opfromDate, List<string> opthruDate)
    {
        id = ID;
        for (int j = 0; j < hpCode.Count; j++){ HPCode = HPCode + (hpCode)[j] + '*' };
        for (int j = 0; j < opfromDate.Count; j++){OPfromDate = OPfromDate + (opfromDate)[j] + '*' };
        for (int j = 0; j < opthruDate.Count; j++){OPthruDate = OPthruDate+ (opthruDate)[j] + '*' };   
    }
}

This class is used to return the results of my SQL query to the client side:-

return JsonConvert.SerializeObject(member);

I used breakpoints and checked on the client side, indeed it is getting the return values. However I am not sure about what is the best way to parse these values and store them in variables on my javascript side so i can use them for client-side functionalities.

// Ajax function that sends member ID from client side to server side without a post back. 
function ajax() 
{
    $.ajax 
    ({
        url: 'Default.aspx/MyMethod',
        type: 'POST',
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ memID: mem_ID }),
        success: onSuccess, 
        fail : onFail

   });
}



// If client-to-server communication is successful. 
function onSuccess(data) 
 {
     confirm(data.d);
     var returnedstring = (data.d);
     var jsondata = $.parseJSON(data.d);

 }

Now how do I parse the 'data' ?? is there an eval function? or parse function?

Does anybody have any web examples? before this I was only passing back 1 value to my client side, so it was easy to get, now i am confused with multiple values.

UPDATE:-

I tried doing this on my javascript side:-

var returnedstring = (data.d);
var member = data.d.id;
var Hp = data.d.HPCode;

however when I use breakpoints and hover over them with my mouse, i get member and HP as undefined, however the returnedstring has all the correct values.. ... any idea?

SOLUTION (I couldn't figure out the other way suggested in the answers, but this works for me) :-

function onSuccess(data) 
 {
     // stores entire return in one string.
     var returnedstring = (data.d);

     // parses json returned data
     var jsondata = $.parseJSON(data.d);

     var member = jsondata.id;
     var HpCode = jsondata.HPCode;

}

Use Chrome / Firefox and run console.log(data) inside the success callback function. — Ja͢ck
– Ja͢ck, Commented Feb 14, 2013 at 0:01
console.log(data) doesnt work with either, no error messages, also with chrome and firefox - the update message that i was getting with IE with the confirm(data.d) command, that message is also not showing. — Philo
– Philo, Commented Feb 14, 2013 at 0:18
console.log(data) doesn't work .... did you open the JavaScript console to see what was output there? — Ja͢ck
– Ja͢ck, Commented Feb 14, 2013 at 0:20
yes, and this is all it had:- [MAIN] Connecting localhost:59160/Default.aspx slider.js:392 [MAIN] requesting to load modules slider.js:392 [MAIN] requesting to load modules — Philo
– Philo, Commented Feb 14, 2013 at 0:42

StriplingWarrior · Accepted Answer · 2013-02-13 22:24:11Z

3

Because you're using dataType: "json", data is already parsed out of the JSON string. That's why you're able to access data.d in Javascript.

To access the members, you can do something like this:

console.log(data.d.HPCode);

answered Feb 13, 2013 at 22:24

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

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

12 Comments

Pointy Over a year ago

Probably also worth mentioning that the code is not sending over the method parameter properly.

Philo Over a year ago

cool. As you can see I m very new to this technique. So how can I get 4 variables on my javascript side.. such that var memID = returned value of memID var HPCode = returned value of HPcode

Pointy Over a year ago

@Philosophia there's no need to call JSON.stringify() - jQuery will understand if you just give it the plain object. (The way it is now, the stringified object will look like an invalid query string.)

StriplingWarrior Over a year ago

@Pointy: jQuery will use its typical URL-style encoding if you send the object directly. .NET MVC will bind correctly for simple values like the one used here, but if the data becomes very complex (like properties with arrays), it can cause problems. JSON.stringify() will allow it to send even very complex objects in a way that the model binder will understand.

StriplingWarrior Over a year ago

@Philosophia: No, more like var HPCode = data.d.HPCode. The code I provided would log the result to the browser console, which may be useful as you try understanding how the data came across.

|

Collectives™ on Stack Overflow

How to parse a JSON object ? (From server-side to client-side...javascript)

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related