locked
Deserialization differences RRS feed

  • Question

  • User1007087005 posted

    I followed this Hands on labs: http://www.asp.net/web-api/tutorials/hands-on-labs/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs

    When I run the solution, I can see this as the returned message:

    HTTP/1.1 200 OK
    Cache-Control: no-cache
    Pragma: no-cache
    Content-Type: application/json; charset=utf-8
    Expires: -1
    Server: Microsoft-IIS/8.0
    X-AspNet-Version: 4.0.30319
    X-SourceFiles: =?UTF-8?B?RDpcd29ya1xXZWJDYW1wc1RLXEhPTFxhc3BuZXR3ZWJhcGlzcGFcU291cmNlXEV4Mi1DcmVhdGluZ0FTUEFJbnRlcmZhY2VcRW5kXEdlZWtRdWl6XGFwaVx0cml2aWE=?=
    X-Powered-By: ASP.NET
    Date: Wed, 22 Oct 2014 12:01:37 GMT
    Content-Length: 4
    
    true

    The provided solution deals with the return value in this way:

    $scope.correctAnswer = (data === "true");

    This works nicely. Data is of type string.

    When creating my own solution using Visual Studio Update 3 and all up-to-date packages, data is of type boolean. Now the comparison keeps failing.

    I am new to Single Page Applications and AngularJS. I am quite confused where this difference is coming from. Which package or referenced assembly has changed? How can I fix it?

    Wednesday, October 22, 2014 8:56 AM

Answers

  • User-40287846 posted

    Hi,

    Try this, because === is compare against data with data type 

    $scope.correctAnswer = (data === true);
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 22, 2014 9:18 AM

All replies

  • User-40287846 posted

    Hi,

    Try this, because === is compare against data with data type 

    $scope.correctAnswer = (data === true);
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 22, 2014 9:18 AM
  • User1751268424 posted

    Hi,

    I did a test on my VS2013 update 3, it is ok. I can not find any problem on yours.

    here my app module:

    (function () {
        'use strict';
    
        angular.module('app', [
            // Angular modules 
            'ngAnimate',
            'ngRoute'
    
            // Custom modules 
    
            // 3rd Party Modules
            
        ]);
    })();

    Here the controller:

    (function () {
        'use strict';
    
        angular
            .module('app')
            .controller('controller1', controller1);
    
        controller1.$inject = ['$scope']; 
    
        function controller1($scope) {
            $scope.title = 'controller1';
            var data = "true";
            $scope.data = data;
            $scope.correctAnswer = (data === "true");
            activate();
    
            function activate() { }
        }
    })();

    Here my page: (index.html)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
    <head>
        <title>Demo</title>
    </head>
    <body ng-controller="controller1">
        <div>
            data: {{data}} <br />
            correct answer: {{correctAnswer}}
        </div>
    </body>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-animate.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="controller1.js"></script>
    </html>

    here the result:

    data: true 
    correct answer: true

    When I change the controller:

    (function () {
        'use strict';
    
        angular
            .module('app')
            .controller('controller1', controller1);
    
        controller1.$inject = ['$scope']; 
    
        function controller1($scope) {
            $scope.title = 'controller1';
            var data = "false";
            $scope.data = data;
            $scope.correctAnswer = (data === "true");
            activate();
    
            function activate() { }
        }
    })();

    Here the result:

    data: false 
    correct answer: false

    The result: I found no problem.

    Wednesday, October 22, 2014 9:28 AM
  • User1007087005 posted

    Thank you. That did the trick.

    I'm still wondering which package or referenced assembly did change since the Hands on labs has been created. It's so cumbersome to follow any tutorials which just do not work correctly after new versions of the IDE, packages, etc. have been released... Frown

    Wednesday, October 22, 2014 9:30 AM
  • User1007087005 posted

    Thank you, for your tests.

    This is the code for getting the data:

            $scope.sendAnswer = function (option) {
                $scope.working = true;
                $scope.answered = true;
    
                $http.post('/api/trivia', { 'questionId': option.questionId, 'optionId': option.id }).success(function (data, status, headers, config) {
                    $scope.correctAnswer = (data === true);
                    $scope.working = false;
                }).error(function (data, status, headers, config) {
                    $scope.title = "Oops... something went wrong";
                    $scope.working = false;
                });
            };

    As I mentioned in my initial post. data is of type string in the provided Hands on labs source code. When creating the solution manually, data is of type boolean.

    There seems to be a difference in the deserialization process. But I have no idea which component/package is doing the deserialization. Probably it's AngularJS or Newtonsoft.JSON or ...?

    Wednesday, October 22, 2014 9:39 AM
  • User1751268424 posted

    As I mentioned in my initial post. data is of type string i

    Yes, it is, 'var data = "false"' string on my test. Am I wrong?: 

    var data = "false";
    Wednesday, October 22, 2014 9:48 AM
  • User1007087005 posted

    You are absolutely right.

    But with all up-to-date packages data is of type boolean. Not of type string. The deserializer creates a boolean instead of a string from the HTTP message.

    Wednesday, October 22, 2014 9:58 AM