?
Solved

JQuery JSON  from  Web Service

Posted on 2010-04-09
8
Medium Priority
?
482 Views
Last Modified: 2013-11-08
I am trying to use JQuery to get a JSON string from a Web Service.

I am successfully converting a list of object to a JSON string in the Web Service using the Serialize() method.  I can then retrieve the string in JQuery and display it in an alert.

My issue is that the JQuery $.each method is not parsing the JSON string to recognize the separation of the objects.  

The alert function in the code attached is producing a long string of all of the Objects instead of producing an alert for each Object.

I need to be able to execute a function on each of the objects.....PLEASE Help!
'''HTML SIDE LOCATED IN HEAD''''' 
       $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Service.asmx/GetJson",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (i, object) {
                        alert(object);
                    });
                }
            });
        });


'''WEB SERVICE SIDE''''
    Dim js As New System.Web.Script.Serialization.JavaScriptSerializer

        Dim str As String = js.Serialize(ListOfObjects)

        Return (str)

Open in new window

0
Comment
Question by:dtechfish
  • 3
  • 3
  • 2
8 Comments
 
LVL 5

Expert Comment

by:bklmnsh
ID: 30209552
you need to deserialize response into object
var objData = eval('(' + data.d + ')');
0
 

Author Comment

by:dtechfish
ID: 30212498
Thank you for your reply....I'm getting closer.  

The code above lets me realize the objects.  It seems to create the alert boxes for the correct number of objects now.   However I can not access the object data.  

What is the significance of the the .d after data in data.d?  It obviously needs it, but what does it do?

THanks!
0
 
LVL 83

Expert Comment

by:leakim971
ID: 30221498
Hello dtechfish,

Check this link : http://www.json.org/js.html

I think @bklmnsh mean var objData = eval('(' + data + ')');


>After that you can use :
Depend you json object/structure. If it's a basci structure (rows) you can use : obj.one_field_name where one_field_name is the key. You had something like : {"one_field_name":"value_of_the_field}, ... ,{"nth_field_name":"value_of_the_nth_field}


success: function (data) {
    var objData = eval('(' + data + ')');
    $.each(objData, function(i, obj) {
       alert(obj.one_field_name);
   }
}

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:dtechfish
ID: 30224856
If I do not put in the data.d I get ....

Line: 26
Error: Expected ']'

I'm not sure if this means that I have an error in the serializer or not.  I am using the built in funtion.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 30225256
Could you post your json string (data) :

To get it you may use a textarea :  in your page and use :

Additionaly, you may try to replace :
eval('(' + data + ')')

By:
eval('([' + data + '])')
success: function (data) {
    $("myta").val(data);
//    var objData = eval('(' + data + ')');
//    $.each(objData, function(i, obj) {
//       alert(obj.one_field_name);
   }
}

Open in new window

0
 

Author Comment

by:dtechfish
ID: 30227175
I attached a sample of the json string being returned from the asmx.
JSONString.txt
0
 
LVL 83

Expert Comment

by:leakim971
ID: 30231874
So you should use : eval(data);

success: function (data) {
    var objData = eval(data);
    $.each(objData, function(i, obj) {
       alert(obj.ID); // to display each ID
   }
}

Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
var myJSONObject = '[{"ID":28,"Name":"Name 1","StartDate":"\/Date(1272340800000)\/","EndDate":"\/Date(1272686400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":26.533333,"Longitude":77.5},{"ID":36,"Name":"Name 1","StartDate":"\/Date(1271131200000)\/","EndDate":"\/Date(1271476800000)\/","Locatio":"LOC1","Website":"URL","Website2":"","Latitude":24.554551,"Longitude":-81.806961},{"ID":42,"Name":"Name 1","StartDate":"\/Date(1268283600000)\/","EndDate":"\/Date(1268542800000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":25.771576,"Longitude":-80.139865},{"ID":24,"Name":"Name 1","StartDate":"\/Date(1253829600000)\/","EndDate":"\/Date(1254078000000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":24.935983,"Longitude":-80.614224},{"ID":23,"Name":"Name 1","StartDate":"\/Date(1251491400000)\/","EndDate":"\/Date(1251658800000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":24.935983,"Longitude":-80.614224},{"ID":22,"Name":"Name 1","StartDate":"\/Date(1247747400000)\/","EndDate":"\/Date(1247958000000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":32.290437,"Longitude":-64.788875},{"ID":21,"Name":"Name 1","StartDate":"\/Date(1247054400000)\/","EndDate":"\/Date(1247342400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":32.290437,"Longitude":-64.788875},{"ID":20,"Name":"Name 1","StartDate":"\/Date(1246671000000)\/","EndDate":"\/Date(1246930200000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":32.290437,"Longitude":-64.788875},{"ID":15,"Name":"Name 1","StartDate":"\/Date(1241964000000)\/","EndDate":"\/Date(1242439200000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":22.876231,"Longitude":-109.910403},{"ID":18,"Name":"Name 1","StartDate":"\/Date(1241870400000)\/","EndDate":"\/Date(1241989200000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":25.771576,"Longitude":-80.139865},{"ID":16,"Name":"Name 1","StartDate":"\/Date(1241177400000)\/","EndDate":"\/Date(1241373600000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":24.554551,"Longitude":-81.806961},{"ID":14,"Name":"Name 1","StartDate":"\/Date(1239721200000)\/","EndDate":"\/Date(1240095600000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":24.554551,"Longitude":-81.806961},{"ID":13,"Name":"Name 1","StartDate":"\/Date(1236342600000)\/","EndDate":"\/Date(1236452400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":24.776131,"Longitude":-80.909494},{"ID":9,"Name":"Name 1","StartDate":"\/Date(1234011600000)\/","EndDate":"\/Date(1234119600000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":26.121517,"Longitude":-80.107207},{"ID":12,"Name":"Name 1","StartDate":"\/Date(1234011600000)\/","EndDate":"\/Date(1234119600000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":26.121517,"Longitude":-80.107207},{"ID":8,"Name":"Name 1","StartDate":"\/Date(1231531200000)\/","EndDate":"\/Date(1231700400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":26.780301,"Longitude":-80.039148},{"ID":7,"Name":"Name 1","StartDate":"\/Date(1226408400000)\/","EndDate":"\/Date(1226518200000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":25.771576,"Longitude":-80.139865},{"ID":6,"Name":"Name 1","StartDate":"\/Date(1226066400000)\/","EndDate":"\/Date(1226095200000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":26.108113,"Longitude":-80.125984},{"ID":5,"Name":"Name 1","StartDate":"\/Date(1221262200000)\/","EndDate":"\/Date(1221287400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":25.771576,"Longitude":-80.139865},{"ID":4,"Name":"Name 1","StartDate":"\/Date(1218844800000)\/","EndDate":"\/Date(1218956400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":24.909797,"Longitude":-80.644589},{"ID":3,"Name":"Name 1","StartDate":"\/Date(1216243800000)\/","EndDate":"\/Date(1216594800000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":32.290437,"Longitude":-64.788875},{"ID":2,"Name":"Name 1","StartDate":"\/Date(1215646200000)\/","EndDate":"\/Date(1215990000000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":32.290437,"Longitude":-64.788875},{"ID":1,"Name":"Name 1","StartDate":"\/Date(1215057600000)\/","EndDate":"\/Date(1215212400000)\/","Location":"LOC1","Website":"URL","Website2":"","Latitude":32.290437,"Longitude":-64.788875}]';
	$(document).ready(function() {
		var  json = eval( myJSONObject ); 				   
		$.each(json, function(i, obj) {
			alert("item number " + i + " is : \nID = " + obj.ID + ", Name = " + obj.Name + ", StartDate = " + obj.StartDate + ", EndDate = " + obj.EndDate + ",Location = " + obj.Location + ", URL = " + obj.url + ",Latitude = " + obj.Latitude + ", Longitude = " + obj.Longitude );
		});
	});
</script>
</head>
<body>
</body>
</html>

Open in new window

0
 
LVL 5

Accepted Solution

by:
bklmnsh earned 2000 total points
ID: 30518881
Please refer this link to read more about 'd' member
http://encosia.com/2009/02/10/a-breaking-change-between-versions-of-aspnet-ajax/

The above link will help you to understand why the data returned from asp.net webservice is enclosed in 'd' property and how you can extract objects from the response.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question