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

Answer 1

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.

Answer 2

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

Answer 3

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)