Parse Django REST API response with Angular 4

Question

I've built a Django REST API using the Django Restapiframework, and it uses a serializer to return a json response:

from rest_framework import serializers
from .models import WeatherStatistics

class WeatherStatisticsSerializer(serializers.ModelSerializer):

    class Meta:
        model = WeatherStatistics
        fields = '__all__'

In my Angular 4 front-end project I have a service:

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)
    })
  }
}

And I also have a component that uses that service:

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() {

    this.data = this.weatherstatsservice.getWeatherData();
  }

}

At the moment all I want it to do is log the json data from my api to the console oninit. So far tho, it does nothing. How do I get the json from Django into Angular?

Answer 1

First, you haven't subscribed to your http call, and you can't set asynchronous data in synchronous manner, you need to do it like this:

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

Second, you have a typo, .json is a function, call it as such

.map((res:Response) => res.json());

Answer 2

That's because you just make the request but no subscribe to it's value when it's come back from backend. If you want to get data from your component I sugget to use

In your component.

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

or call this.weatherstatservice.getWeatherDataRecords() from service (but you won't be sure when it's comeback from server so you should make an observer to this or just use first method) and then grab data from service.