Angular 4 http not returning response

Question

I have created a simple service to get data via a http request. The data is in json form and I use the map function so that it matches the Blog data type. However when I invoke the method "getBlogs" from the service to get the data nothing is returned. Any thoughts on what I am missing?

The Component.

import {Http} from '@angular/http';
import {forEach} from '@angular/router/src/utils/collection';
import {BlogService} from '../services/blog.service';
import {Component, OnInit} from '@angular/core';
import {Blog} from '../blog/blog';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

@Component({selector: 'app-blog-list', templateUrl: './blog-list.component.html',
styleUrls: ['./blog-list.component.css'],
providers: [BlogService]})
export class BlogListComponent implements OnInit {

  blogArray: Blog[] = [];
  blogTitle: string;
  loading: boolean;
  private blogsUrl = 'http://www.mocky.io/v2/59a49eb3100000be05b2aba6';

  constructor(private blogService: BlogService, private http: Http) {}

  ngOnInit() {
    this.blogService
      .getBlogs(this.blogsUrl)
      .subscribe(res => {
        this.blogArray = res;
        console.log('theBlogArray', this.blogArray);
      });
  }

}

The Service

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import {Headers, Http } from '@angular/http';
import { Injectable } from '@angular/core';
import {Blog} from '../blog/blog';

@Injectable()
export class BlogService {


  private loading: boolean;
  constructor(private http: Http) {}


  getBlogs(url: string): Observable<Blog[]> {
    this.loading = true;
    return this.http.get(url)
      .map((response) => response.json());
  }

}

As mentioned in the answers it might be a CORS issue. However, I do not get any errors at all in the console. Just in case I enabled the CORS chrome extension (it's called Allow-Control-Allow-Origin: *) on my browser, which is what I usually do when I have CORS issues and I made sure to put it in the header of mocky, again as suggested. Nothing yet, no complain from the console and webpack compiles successfully.

If I hard code the values of the json request into an array in the service an access it via component, the values are returned and I can console.log them and display them on the html.

Rahul Singh · Accepted Answer · 2017-08-30 19:16:53Z

1

ngOnInit() {
    this.blogService.getBlogs(this.blogsUrl)
      .subscribe(res => {this.blogArray = res;
console.log('theBlogArray: ', this.blogArray);// this will work and use it in template like{{blogArray}}
);


  }

You are getting the data the only thing is that you are console logging it outside as it is a async call you cannot log in synchronous context.

Update

I tried this same url using angular it is giving some CORS issue there is something wrong with the backend there please check console. you will get error

edited Aug 30, 2017 at 19:16

answered Aug 30, 2017 at 18:38

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Fernando Ania Over a year ago

I don't even get a print statement showing on the console when I do this.

Rahul Singh Over a year ago

@FernandoAnia console.log(this.blogArray) try this

Fernando Ania Over a year ago

didn't make a difference

Rahul Singh Over a year ago

@FernandoAnia any error in console. I guess you are not getting data from the service

Fernando Ania Over a year ago

No errors at all. You can follow the link to see the response mocky.io/v2/59a49eb3100000be05b2aba6. I also checked the response on postman and it is returning data.

|

Rajez · Accepted Answer · 2017-08-30 18:59:51Z

0

The console print outside of the subscription will not wait for response.So try like

ngOnInit() {
    this.blogService.getBlogs(this.blogsUrl)
        .subscribe(res => {
           this.blogArray = res;
           console.log('theBlogArray: ', this.blogArray);
    }, Err => console.log(Err));
}

.

// Service   
import 'rxjs/add/operator/catch';

return this.http.get(url)
  .map((response) => response.json())
  .catch(Err);

edited Aug 30, 2017 at 18:59

answered Aug 30, 2017 at 18:37

Rajez

4,0771 gold badge16 silver badges21 bronze badges

3 Comments

Fernando Ania Over a year ago

Same as I said to the other guy, when I try to console.log from the subscribe function nothing shows up in the chrome console

Fernando Ania Over a year ago

I don't have access to the fetch method as I am using the http class from @angular/http

Rajez Over a year ago

@Fernando Ania Is your problem resolved? still need any help?

Fernando Ania · Accepted Answer · 2017-08-30 21:50:35Z

The reason why I was not seeing the response from the http request was because I was making a reference to the blog-list component inside the main app component without importing blog-list in the main app component.

I was doing this

<app-nav-bar></app-nav-bar>
<app-blog-list></app-blog-list>

Which required me to do this

import { Component } from '@angular/core';
import { BlogListComponent } from './blog-list/blog-list.component';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
    }

I am still unsure why I am able to access the value of the hard coded array from the service and not from the http request without importing blog-list.component into the main app.

blog.service

public blogExample: Blog;
  private loading: boolean;

  constructor(private http: Http) {
    this.blogExample = {
      id: 1,
      title: 'title',
      content: 'content'
    };
  }

blog-list.component

ngOnInit() {
    this.blogService
      .getBlogs(this.blogsUrl)
      .subscribe(res => {
        this.blogArray = res;
        console.log('theBlogArray', this.blogArray);
      });

    console.log('blogExample', this.blogService.blogExample);

  }

Collectives™ on Stack Overflow

Angular 4 http not returning response

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related