locked
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)

    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 PM
    Moderator
  • 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)

    Monday, April 7, 2014 6:30 PM