Ionic 2 Angular 2 getting REST JSON data

Question

I am probably just making a stupid mistake somewhere, but I just don't see it anymore.

I have a very simple Ionic 2 Angular 2 app. Please don't bother the architecture, I'm just trying to get it to work first. I am trying to fill my array 'configuredModules' with Module objects that I get from a REST JSON service. I have created a button which logs the array to the console, so I can see what the value of the array is, but is always undefined. What am I doing wrong?

export class Module {
    type: string;
    physicalLocationName: string;
}

and my main class:

import { Component, OnInit } from '@angular/core';
import { Module } from './module';
import { HttpModule, Http, Response} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/toPromise';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit{
  configuredModules: Module[];
  http: Http;

  constructor(public navCtrl: NavController,private _http: Http) {
    this.http = _http;
  }

  getConfiguredModules(){
      this.getModules()
        .then(modules => this.configuredModules = modules);
        console.log('finished configuredModules');
  }

  getModules(): Promise<Module[]> {
    return       this.http.get('http://localhost:8080/rest/modules/configuredModules')
           .toPromise()
           .then(response => response.json().data as Module[])
          ;
  }

  ngOnInit() {
      this.getConfiguredModules();
  }

  buttonClicked(){
    console.log('button clicked');
    console.log(this.configuredModules.values);
  }
}

If I look in my network tab of Chrome, I can see the following coming in (under response):

{"modules":[{"type":"myTestType","physicalLocationName":"myTestPhysicalLocation"}]}

So I know the data is coming in, but it doesn't fill my array. Any suggestions? I think my code looks identical towards the Heroes tutorial of Angular 2: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

Did you try console.log(JSON.stringify(this.configuredModules)); ? — stwissel
– stwissel, Commented Oct 17, 2016 at 18:23
exactly where it is undefined? in button click event? it should be console.log(this.configuredModules); — micronyks
– micronyks, Commented Oct 17, 2016 at 18:24
I take it the array is undefined? I also tried to log it witout the .values, then I just get undefined. If I use the .values as in my example above, it says: TypeError: Cannot read property 'values' of undefined. Which leads me to believe configuredModules is undefined. I tried to JSON.stringify it, same result: undefined — Rens Groenveld
– Rens Groenveld, Commented Oct 17, 2016 at 18:30
what is .values? AFAIK nothing is there like .values. Simply use as mentioned in my above comment. — micronyks
– micronyks, Commented Oct 17, 2016 at 18:31
Ah my IDE (Atom) gives it as an option. I figured it would print the values in the array. Or at least something. printing without the .values gives me 'undefined' — Rens Groenveld
– Rens Groenveld, Commented Oct 17, 2016 at 18:36

Fabio Antunes · Accepted Answer · 2016-10-17 18:36:31Z

2

Your error is in this function:

getModules(): Promise<Module[]> {
  return this.http.get('http://localhost:8080/rest/modules/configuredModules')
    .toPromise()
    .then(response => response.json().data as Module[]);
}

Remove the .data after the json() function and add .modules instead. That's what's coming from your API, so it should look like this:

getModules(): Promise<Module[]> {
    return this.http.get('http://localhost:8080/rest/modules/configuredModules')
           .toPromise()
           .then(response => response.json().modules as Module[]);
  }

Then on your button clicked function, remove the values, so it looks like this:

buttonClicked(){
  console.log('button clicked');
  console.log(this.configuredModules);
}

answered Oct 17, 2016 at 18:36

Fabio Antunes

22.9k17 gold badges83 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rens Groenveld Over a year ago

That's exactly it! Thank you very much Fabio! Do you have any idea why the tutorial of Angular 2 (Heroes tutorial) is set up different?

Fabio Antunes Over a year ago

Because their API is different than yours. Your API returns an object key with {"modules":[{"type":"myTestType","physicalLocationName":"myTestPhysicalLocation"}]} but API good practices tell us that we should always wrap our API responses inside a data object, have a look at this

Rens Groenveld Over a year ago

Thank you very much mate! You're a champ!

Collectives™ on Stack Overflow

Ionic 2 Angular 2 getting REST JSON data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related