Answered by:
Consuming JSON from my wcf service using javascript

Question
-
I'm not sure if this is the correct forum or not the question relates to both WCF and javascript. My apologies if it should be posted in the WCF forum.
I have create a WCFService. The interface to an operationContract looks like this:
[OperationContract] [WebInvoke(UriTemplate = "GetAllPictures?evtkey={evtkey}&skipCnt={skipCnt}&takeCnt={takeCnt}", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST")] Collection<PictureNdx> GetAllPictures(int evtkey, int skipCnt, int takeCnt);
I want it to return JSON.
the web.config servicemodel looks like this:<system.serviceModel> <standardEndpoints> <webHttpEndpoint > <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="true"/> </webHttpEndpoint> </standardEndpoints> <services> <service name="JSONPhotoDBService.PhotoDBService" behaviorConfiguration="WebServiceBehavior"> <endpoint address="" binding="webHttpBinding" contract="JSONPhotoDBService.IPhotoDBService" behaviorConfiguration="JsonBehavior" bindingConfiguration="webHttpBindingWithJsonP" /> </service> </services> <behaviors> <endpointBehaviors> <behavior name="JsonBehavior"> <webHttp helpEnabled="true"/> </behavior> </endpointBehaviors> <serviceBehaviors> <behavior name="WebServiceBehavior"> <!-- To avoid disclosing metadata information, set the values below to false before deployment --> <serviceMetadata httpGetEnabled="true"/> <!-- To receive exception details in faults for debugging purposes, set the value below to true. Set to false before deployment to avoid disclosing exception information --> <serviceDebug includeExceptionDetailInFaults="false" /> </behavior> </serviceBehaviors> </behaviors> <bindings> <webHttpBinding> <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true"/> </webHttpBinding> </bindings> <protocolMapping> <add binding="basicHttpsBinding" scheme="https" /> </protocolMapping> <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" /> </system.serviceModel>
I call it from my javascript like this:
var url = "http://localhost/JSONPhotoDBService/PhotoDBService.svc/GetAllPictures?evtkey=" + selectedEvent + "&skipCnt=" + skipCnt + "&takeCnt=" + takeCnt; $.post(url, function (result, status) { if (status == 'success') { var baseURL = ViewModel.EventURL; for (var i = 0; i < result.GetAllPicturesResult.length; i++) { var photoNdx = { clubId: result.GetAllPicturesResult[i].ClubId, comments: result.GetAllPicturesResult[i].Comments, origname: result.GetAllPicturesResult[i].Origname, pictureId: result.GetAllPicturesResult[i].PictureId, thumbnail: baseURL + "/tn/tn" + result.GetAllPicturesResult[i].PictureId + ".jpg" }; dataArray.push(photoNdx); }; if (dataArray.length > 0) { skipCnt += dataArray.length; for (var i = 0; i < dataArray.length; i++) { ViewModel.PictureList.push(dataArray[i]); } } okToContinue = true; } });
The above works. But if I use this line in the (status == 'success') section:
var myJsonObj = JSON.Parse(result);
it fails with:
Unhandled exception at line 44, column 17 in ms-appx://7309397c-afbc-4c17-98bb-3ca2946e0b64/pages/pictgroupedItems/pictgroupedItems.js
If I look at the result it isn't a json string, its an object that contains a result.__proto__ and a result.GetAllPicturesResult objects.
The GetAppPicturesResult object contains my data.It doesn't look like the result is returning a JSON string, is it returning the json object directly?
Is my service even returning JSON?
What is the __Proto__ object?I'm consuming it in a Win8 store app, and obviously can make it work, but I also want a WCF service that returns JSON in a standard manner.
Thanks
Robotuner
Friday, April 4, 2014 5:07 PM
Answers
-
Are you sure that there's no extra characters in that string? I just cut-and-pasted it into a trivial JS program and did a JSON.parse on it; it worked for me with no problems.
Network Developer Experience Team (Microsoft)
- Proposed as answer by Jamles HezModerator Tuesday, April 15, 2014 8:36 AM
- Marked as answer by Jamles HezModerator Thursday, April 17, 2014 10:08 AM
Monday, April 7, 2014 6:30 PM
All replies
-
Can you run fiddler and get back what the web service is responding, and compare that to what the returned data looks like?
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.Friday, April 4, 2014 7:27 PMModerator -
the raw results from fiddler looks like json to me here is a the output from a call that returns two records:
{"GetAllPicturesResult":[{"ClubId":5,"Comments":"","Origname":"IMG_8194.JPG","PictureId":875512},{"ClubId":5,"Comments":"","Origname":"IMG_8195.JPG","PictureId":875513}]}
Because of that, my expectation was that
var url = "http://localhost/JSONPhotoDBService/PhotoDBService.svc/GetAllPictures?evtkey=" + selectedEvent + "&skipCnt=" + skipCnt + "&takeCnt=" + takeCnt; $.post(url, function (result, status) { if (status == 'success') { var baseURL = ViewModel.EventURL; var myJsonObj = JSON.parse(result); }
should work, . . . but it is returns a javascript runtime error: Invalid character.
Incidentally, I am referencing
<script src="/js/jquery-2.1.0.min.js"></script>
Robotuner
Friday, April 4, 2014 8:04 PM -
Are you sure that there's no extra characters in that string? I just cut-and-pasted it into a trivial JS program and did a JSON.parse on it; it worked for me with no problems.
Network Developer Experience Team (Microsoft)
- Proposed as answer by Jamles HezModerator Tuesday, April 15, 2014 8:36 AM
- Marked as answer by Jamles HezModerator Thursday, April 17, 2014 10:08 AM
Monday, April 7, 2014 6:30 PM