0

I'm trying to load the following url into the example and it just won't return any data. I have changed the Hero class to match:

https://bedtimetunes.restlet.net/v1/tuneses/

export class Hero {
 id: number;
 title: string;
 artist: string;
 date: number;
 likes: number;
 plays: number;
 contributors: string;
 tags: string;
}

In my hero.service I have:

  private headers = new Headers({"content-type": "application/json",   "accept": "application/json", "host": "bedtimetunes.restlet.net"});
  private heroesUrl = 'https://bedtimetunes.restlet.net/v1/tuneses/';  // URL to web api

The file is being properly loaded and I get the response 200 code, but I can't get it to display any data.

Any ideas? Thanks

Update: I fixed the previous problem, but a problem still persists. I'm getting an error on the final line of code

ERROR Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined TypeError: Cannot read property '0' of undefined

export class TunesComponent implements OnInit {
  sources: Array<Object>;
  constructor(http: Http) {
    http.get('https://bedtimetunes.restlet.net/v1/tuneses/')
              .map(response => response.json())
              .subscribe(sources => this.sources = sources);
   }

  currentIndex = 0;
  currentItem: Object = this.sources[ this.currentIndex ];

Sorry I am new to TypeScript.

Lewi Hirvelä
  • 1
  • 2
  • 1
    this is not JSON, so you have to implement your own XML parser to replace `res.json()` in tour of heroes example and call `yourParser.parse(res.text());` – Supamiu May 22 '17 at 11:57
  • 1
    Do you mean https://bedtimetunes.restlet.net/v1/tuneses/ ? It does return JSON when the header is specified. – Lewi Hirvelä May 22 '17 at 11:58
  • can you please share the code you have written for fetching and displaying data? – Alok Jha May 22 '17 at 12:39
  • Hi, I edited my post to show where the actual problem is. – Lewi Hirvelä May 22 '17 at 15:09
  • Moikka! You are trying to read `this.sources` before data has been retrieved here: `currentItem: Object = this.sources[ this.currentIndex ];`, so at that point (component initialization) `sources` is still undefined, you need to do this inside the callback (subscribe). Check the duplicate! :) – AT82 May 22 '17 at 17:04
  • Also I suggest you would move the actual http-requests to a service. But anyways, the correct implementation of setting `currentItem` is by declaring `currentItem: Object = {}` and then inside subscribe do this: `.subscribe(sources => {this.sources = sources; this.currentItem=this.sources[this.currentIndex]});`. – AT82 May 22 '17 at 17:11
  • Thanks, all working now. Now to fix other problems :D – Lewi Hirvelä May 22 '17 at 19:38
  • For anyone going through beginner problems like I was. I was getting a problem opening up a webapi and getting some null javascript errors. My fix was using ngIf in the template, so it checks if the values don't exist yet. works perfect now. – Lewi Hirvelä May 23 '17 at 18:07

0 Answers0