Answered by:
Deserialization differences

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...
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 iYes, 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