CODEWITHSUNDEEP
htmljsonangulartypescript
jrmusante1
jrmusante1

Reputation: 33

Processing JSON data in angular 7

So I'm very new to Angular, html, and Typescript... With that said I'm following this tutorial https://www.youtube.com/watch?v=f7w5c6IlmaA

I've got the JSON data to show in the console just fine. However at 24:12 in his video I get the same error as him, except it doesn't work.

I've tried to push the city name to the console from home.component.ts and still getting the same error.

Here's some code that may explain my stupidity, thanks!

home.component.ts file

import { Component, OnInit } from '@angular/core';
import {WeatherService} from '../weather.service';


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


  location = {
    city: 'orlando',
    code: 'us'

  };

  weather: any;

  constructor(private weatherService: WeatherService) {

  }

  ngOnInit() {
    this.weatherService.getWeather(this.location.city, this.location.code).subscribe(result => {
      console.log(result);

      this.weather = result;
      // console.log(this.weather.city.name);
    });
  }

}

weather.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {



  apiKey = 'Promise I didn't mess this part up';
  url;


  constructor(private http: HttpClient) {

    this.url = 'http://api.openweathermap.org/data/2.5/forecast?q=';
  }


  getWeather(city, code) {

    return this.http.get(this.url + city + ',' + code + '&APPID=' + this.apiKey).pipe(map(result => {
      console.log(result);
    }));
  }

}

Upvotes: 0

Views: 390

Answers (2)

TheParam
TheParam

Reputation: 10571

You forgot to return restult after console log replace below method

getWeather(city, code) {

    return this.http.get(this.url + city + ',' + code + '&APPID=' + this.apiKey).pipe(map(result => {
      console.log(result);
      return result;
    }));
  }

Hope this help! :)

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222722

You are not returning anything from your service, you should return it as,

getWeather(city, code) 
      return this.http.get(this.url + city + ',' + code + '&APPID=' + this.apiKey).pipe(map(result => {
          console.log(result); 
          return result;
        }));
 }

Upvotes: 1

Related Questions