Json array result isn't mapped from $http using "tns-core-modules": "^1.6.0"

[matt4446]

Should this be a new issue? I'm not sure how visible the closed issues are ... It is the same problem as the last one.

I can still see the result as a string, but the ".Json()" command is still an object that is not an array.

previous issue 41

response
            .map(response => response.json())
            .subscribe((items : Array<IProvider>) => {
                this.list = items; //<- items is a object ?

                // items.forEach((item) => {  
                //     this.logger.Notify("item");
                //     this.logger.Notify(item.Name);
                // });

                 this.logger.Notify("items available:" + items.length);
            },(error) => {
                this.logger.Error("Could not map items");
                this.logger.Error(error);
            });

Thanks, Matt

[hdeshev]

I just tested a similar example and changed the sample-ng-http code to return a JSON array from the API, and it works fine. The code looks the same as above, and I get a real array.

https://github.com/NativeScript/sample-ng-http/blob/master/mobile/app/main-page.ts#L37-L40

Could it be that your API returns the array wrapped in some intermediate object?

[matt4446]

Could it be because I call call .Text() before .Json() ?
That would be the only significant difference left. I do not have cli setup on this computer at the competition ... but if I find some more free time then I could probably test it.

Component:

1. ask the service for an observable

Service ...

1. get the response
2. add a subscription for logging only
3. pass back the observable to the component to subscribe to use the data

Component

1. add a subscription mapping the json
2. add a subscription to check text and json (debug reasons)...

Fiddler:

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 230
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=170e38c71d59efb5dfca6f0eaa2fd85ce28c52449f5051b1f95fe4abb6901d8a;Path=/;Domain=breakouttrampoliningwebservices.azurewebsites.net
Date: Sat, 20 Feb 2016 11:30:06 GMT

[{"Id":1,"Name":"BUCS","Logo":"content/logos/bucs-logo.jpg","CompetitionCount":3},{"Id":2,"Name":"SUTL","Logo":"content/logos/sutl.jpg","CompetitionCount":8},{"Id":1008,"Name":"South East Region","Logo":null,"CompetitionCount":4}]

[matt4446]

I've updated my fork: https://github.com/matt4446/sample-ng-http. The Web version works but mobile does not. I tried http & https to see if there was a difference but the mobile version failed.

Android - Mobile (Genymotion): - Failed
Usual problem: undefined.

Web - Chrome: - Success.
I've updated the web version to include 'ngFor', which worked correctly. Listing the Name property in each item in the array.

h:\test\sample-ng-http\sample-ng-http\mobile>tns run android
Executing before-prepare hook from h:\test\sample-ng-http\sample-ng-http\mobile\hooks\before-prepare\nativescript-dev-typescript.js
Found peer TypeScript 1.8.2
node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: Cannot re-export name that is not defined in the module.
Project successfully prepared

:config phase:  createDefaultIncludeFiles
...
removed
...
BUILD SUCCESSFUL

Total time: 9.466 secs
Project successfully built
Successfully deployed on device with identifier '192.168.39.101:5555'.
JS: Page loaded
JS: BOOTSTRAPPING...
JS: DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
JS: HTTP: [object Object]
JS: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE.
JS: items: [{"Id":1,"Name":"BUCS","Logo":"content/logos/bucs-logo.jpg","CompetitionCount":4},{"Id":2,"Name":"SUTL","Logo":"content/logos/sutl.jpg","CompetitionCount":8},{"Id":1008,"Name":"South East Region","Logo":null,"CompetitionCount":4}]
JS: DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask
JS: EXCEPTION: Error trying to diff '[{"Id":1,"Name":"BUCS","Logo":"content/logos/bucs-logo.jpg","CompetitionCount":4},{"Id":2,"Name":"SUTL","Logo":"content/logos/sutl.jpg","CompetitionCount":8},{"Id":1008,"Name":"South East Region","Logo":null,"CompetitionCount":4}]' in [people in MainPage@4:11]
JS: ORIGINAL EXCEPTION: Error trying to diff '[{"Id":1,"Name":"BUCS","Logo":"content/logos/bucs-logo.jpg","CompetitionCount":4},{"Id":2,"Name":"SUTL","Logo":"content/logos/sutl.jpg","CompetitionCount":8},{"Id":1008,"Name":"South East Region","Logo":null,"CompetitionCount":4}]'
JS: ORIGINAL STACKTRACE:
JS: Error: Error trying to diff '[{"Id":1,"Name":"BUCS","Logo":"content/logos/bucs-logo.jpg","CompetitionCount":4},{"Id":2,"Name":"SUTL","Logo":"content/logos/sutl.jpg","CompetitionCount":8},{"Id":1008,"Name":"South East Region","Logo":null,"CompetitionCount":4}]'
JS:     at new BaseException (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/facade/exceptions.js:15:23)
JS:     at DefaultIterableDiffer.diff (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/differs/default_iterable_differ.js:102:19)
JS:     at NgFor.ngDoCheck (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/common/directives/ng_for.js:94:40)
JS:     at AbstractChangeDetector.ChangeDetector_MainPage_0.detectChangesInRecordsInternal (viewFactory_MainPage:119:48)
JS:     at AbstractChangeDetector.detectChangesInRecords (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:105:18)
JS:     at AbstractChangeDetector.runDetectChanges (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:82:14)
JS:     at AbstractChangeDetector._detectChangesInViewChildren (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:189:18)
JS:     at AbstractChangeDetector.runDetectChanges (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:86:14)
JS:     at AbstractChangeDetector.detectChanges (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:71:73)
JS:     at ChangeDetectorRef_.detectChanges (/data/data/org.nativescript.helloworldng/files/app/tns_modules/angular2/src/core/change_detection/change_detector_ref.js:21:73)
JS: ERROR CONTEXT:
JS: [object Object]

usual undefined output.

[matt4446]

TJ ran into the same problem with Android by the looks of it. The code below works on mobile. I could obviously do without the JSON.parse(items) line.

public ngOnInit() {
        this.http.get('http://breakouttrampoliningwebservices.azurewebsites.net/Api/Providers/List/Enabled')
            .map(response => {
                return response.json()
            })
            .subscribe((items: any) => {
                console.log('items: ' + items);
                items = JSON.parse(items)
                this.people = items;
            }, error => console.dump(error))
    }

[vakrilov]

Hey @matt4446
We have released a hot-fix for a similar issue in the NativeScript modules with this PR. It is already included in the current (0.0.33) of the nativescript-angular package. Can you try to update to this version to see if the problem is healed.

[matt4446]

I have a correct length for the array ... I shall take a look a closer look after work, but I believe it is fixed now. Thanks.