Angular 2 sees my Json object as an function

Question

I have a webapp that gets via Json stuff put it in objects to display them. I already did it two times with services and classes. But now i copy and paste the old code make some slight changes to make sure it redirect to the good classes but now i get an array with functions instead an array with objects.

Here is my constructor that calls upon the the service classes and send things to the console

constructor(private featureService : FeatureService, private scenarioservice : ScenarioService, private failuresService : FailuresService){
    //hier worden de features en failures opgehaald
    this.featureService.getFeatures().subscribe(res => {
      this.featureArray = res.getFeatureArray();
      console.log(res.getFeatureArray());
    });
      this.failuresService.getFailures().subscribe(res => {
      this.failureArray = res.getFailureArray();
      console.log(res.failures[0].method);
      console.log(this.failureArray);
    });

  }

}

Here is failuresService.getFailures:

import { Injectable } from "@angular/core";
import {Http, Response} from "@angular/http";
import {Failure} from "./Failure";
import {Failures} from "./failures";


@Injectable()
export class FailuresService {
  constructor(protected http: Http) {}


  getFailures() {
    return this.http.get('http://localhost:8080/testresultaten')
      .map((response: Response) => response.json())
      .map(({failures = [Failure]}) => new Failures(failures));// deze error is bullshit
  }
}

This is the Json that I get and want to get in an class:

{
  "failures:": [
    {
      "method": "canRollOneGame",
      "object": "BowlingGame.GameTest"
    },
    {
      "method": "canCountNighteeneight",
      "object": "FizzBuzz.FizzBuzzTest"
    }
  ]
}

Here are the Failure and Failures classes:

import {Failure} from "./Failure";
export class Failures {

  constructor(public failures : Failure[]){}
  public getFailureArray(): Failure[]{
    return this.failures;
  }

}


export class Failure{

  constructor(public method : String , public object : String ){  }
}

Answer 1

I could be wrong but this doesn't look right:

getFailures() {
    return this.http.get('http://localhost:8080/testresultaten')
      .map((response: Response) => response.json())
      .map(({failures = [Failure]}) => new Failures(failures));// deze error is bullshit
  }

That last mapping, I'm not sure what it is supposed to do. I've never seen that syntax (doesn't mean it's wrong). I get that you have an incoming array. But what this syntax does {failures = [Failure]} is what I think your problem is. I don't think that will do what you think.

Try this and see what happens:

.map(failures => { console.log ( failures ); new Failures(failures) } );// deze error is bullshit

If you try that with your old mapping, and then this new one, it'd be interesting to see what that console.log traces out. I think doing it your way, you won't see what you expect.

If that sorts you out, then you can try typing the incoming payload (though I'm not sure it'll work; it should be receiving JSON from the previous mapping).

.map( (failures: Array<Failure>) => { console.log ( failures ); new Failures(failures) } );

Answer 2

So if I read it correctly: Your goal is to create an array of Failure objects with the values coming from a JSON array where each of this has a method you'd like to execute somewhere in the code.

If thats the case then I understand what went wrong. As Tim Consolazion mentioned in the comments you only get the values for the Failure object not the Failure object itself (See custom created method error: "is not a function"). So in order to execute the commands from Failure you have to create for each object in your JSON array a Failure object. Something like this:

return this.http.get('http://localhost:8080/testresultaten')
  .map((response: Response) => {
      let content = response.json();
      let failureList: Failure[] = [];

      content.forEach(failure => {
                failureList.push(new Failure(failure.method, failure.object))
            });

      return failureList || {};
  }

What I wonder is where you found {failures = [Failure]}? I've never seen this before and I've no idea what this is for.

EDIT: I edited the question so it fits your class Failure. The failure in content.forEach(failure => { in an object from your JSON array. You can access the values of it like it is a normal object. In your case with failure.method and failure.object.

Answer 3

I found my problem in the Json the name was function: but in my code it was function so all that was necessary was to make sure it sends function instead of function: