JSON data not coming through from Django REST API

Question

I have a Django REST API with an Angular Front-end. I am getting no errors on the front-end, but no json data is logging to the console.

I have a service like so:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class WeatherstatsService {

  constructor(private http:Http) {
    console.log("Hello World");

    this.getWeatherData();
    // this.getWeatherDataRecords();
  }

  weatherdata: any = {};

  private _WeatherStatsUrl = 'http://127.0.0.1:8000/weatherstats/weatherdata';

  getWeatherData() {
    return this.http.get(this._WeatherStatsUrl)
      .map((res:Response) => res.json());
  }

  getWeatherDataRecords() {
    this.getWeatherData().subscribe(weatherdata => {
      console.log(weatherdata)
    })
  }
}

feeding a component like so:

import { Component, OnInit } from '@angular/core';
import { WeatherstatsService } from '../weatherstats.service';

@Component({
  selector: 'weather-stats',
  templateUrl: './weather-stats.component.html',
  styleUrls: ['./weather-stats.component.css']
})
export class WeatherStatsComponent implements OnInit {

  data: any;

  constructor(private weatherstatsservice: WeatherstatsService) { }

  ngOnInit() {

    console.log(this.weatherstatsservice.getWeatherData().subscribe(data => this.data = data));

  }

}

I am new to both Django and Angular, when I test the API in the browser I get the data I want. What could be happening that means I can't see my json data? (With apologies to people who tried to help on similar issue just now - My brain is exploding with all this new stuff!)

Console:

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
    closed
    :
    false
    destination
    :
    SafeSubscriber {closed: false, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}
    isStopped
    :
    false
    syncErrorThrowable
    :
    false
    syncErrorThrown
    :
    false
    syncErrorValue
    :
    null
    _parent
    :
    null
    _parents
    :
    null
    _subscriptions
    :
    Array(1)
    0
    :
    MapSubscriber {closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}
    length
    :
    1
    __proto__
    :
    Array(0)
    __proto__
    :
    Subscription

Ah yeah! I guess that's bad? Or is it good? One is running on port 8000 and the other on port 4200 — Davtho1983, Nov 30 '17 at 18:22
The terminal feed for the django server says: [30/Nov/2017 18:36:37] "GET /weatherstats/weatherdata/ HTTP/1.1" 200 6365027 so I'm assuming it is receiving the request and serving the data — Davtho1983, Nov 30 '17 at 18:44
Well you are console logging the subscription, so that looks correct to me. You might perhaps want to console log the actual response, right? :) — AT82, Nov 30 '17 at 18:49
Yes! I guess it sounds dumb, but I am very new to Angular! What change should I make? — Davtho1983, Nov 30 '17 at 18:51

score 4 · Accepted Answer · answered Nov 30 '17 at 18:51

4

You are now console logging the subscription, so the output you are getting in your console is correct. To console log the response, do:

this.weatherstatsservice.getWeatherData()
  .subscribe(data => {
    this.data = data;
    console.log(this.data)
  })

answered Nov 30 '17 at 18:51

AT82

71,416
24
140
167

and if this is new stuff I can suggest reading of this: https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2 A very common pitfall is to try and reach data outside of subscribe, so a heads up :) – AT82 Nov 30 '17 at 18:56

JSON data not coming through from Django REST API

1 Answers1