lundi 25 décembre 2017

Http failure response for (unknown url) Angular 4

I am having two servers ON on system. One port serving Angular project and another one Laravel. I am using backend made in Laravel to give response in json format. I have made Angular project in which I have implemented an service to consume data from the port and display the list. As I can see in the network tab of developer tools in browser, Angular is retrieving the text from the backend server but however the list is not being displayed. It just shows that error. Here is the code

blog-list.component.html

<div>
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let blog of blogs"></mat-list-item>
</mat-list>
</div>

blog-list.component.ts

import { Component, OnInit } from '@angular/core';
import {NetworkOperationsService} from '../network-operations.service';
import {Blog} from '../blog';
import {Category} from '../category';

@Component({
selector: 'app-blog-list',
templateUrl: './blog-list.component.html',
styleUrls: ['./blog-list.component.css']
})
export class BlogListComponent implements OnInit
{
blogs : Blog[];
constructor(private networkOperationsService : NetworkOperationsService)
{}
ngOnInit()
{
this.getBlogs();
}
getBlogs() : void
  {
  this.networkOperationsService.getBlogs()
  .subscribe(blogs=>this.blogs = blogs);
  }
}

network-operations.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Blog} from './blog';
import {Category} from './category';
import {ApiConfigurations} from './api-configurations';


@Injectable()
export class NetworkOperationsService
{
 constructor(private http: HttpClient) { }

 getBlogs() : Observable<Blog[]>
  {
  return this.http.get<Blog[]>('http://localhost:8000/api/blogs');
  }
}

JSON Response

[{"id":1,"title":"My Second Blog","body":"Here is the body of my first blogger app","categories":"[1]","created_at":"2017-12-22 11:28:02","updated_at":"2017-12-22 11:32:15"},{"id":2,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[1]","created_at":"2017-12-22 17:12:26","updated_at":"2017-12-22 17:12:26"},{"id":3,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[]","created_at":"2017-12-22 17:12:40","updated_at":"2017-12-22 17:12:40"},{"id":4,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[5]","created_at":"2017-12-22 17:12:45","updated_at":"2017-12-22 17:12:45"},{"id":5,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[6]","created_at":"2017-12-22 17:12:51","updated_at":"2017-12-22 17:12:51"},{"id":6,"title":"Is Android a right choice for career","body":"A lot of people are trying to make android as their primary motive of their lives so please people stop there and watch for more choices and make your choices more sophesticatedly.","categories":"[8]","created_at":"2017-12-22 17:12:55","updated_at":"2017-12-22 17:12:55"},{"id":7,"title":"Dushyant SUthar","body":"Dushyant SUthar","categories":"Dushyant SUthar","created_at":"2017-12-25 11:20:06","updated_at":"2017-12-25 11:20:06"}]




Aucun commentaire:

Enregistrer un commentaire