CODEWITHSUNDEEP
angular
Nikson
Nikson

Reputation: 940

Angular 4 : API response returns " "

I am working in an Angular4 application.In this I am trying to show the API response it displayed as [object object].

lemme explain it . This is my Json response enter image description here This is my service file.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient } from '@angular/common/http';
import { Data } from '@angular/router';

@Injectable()
export class CartdataService {

  public i_product_Path = new BehaviorSubject<any>('');
  i_cast_Product_Path = this.i_product_Path.asObservable();

  current_product :any;

  constructor(private http: HttpClient) { }

   get_Product_Path(pName: string) {
    this.current_product = pName.trim();
    this.http.get(`http://localhost:abc/api/data/GetImage/?imageName=${this.current_product}`);
  }

}

Here I am calling the API.

This is my Model file.

export interface Images {
  big_Images: BImage[];
  small_Images: Simage[];
  selected_Product_Images: SelectedImage[]
}

export interface BImage {
  big_Images: string;
}

export interface Simage {
  small_Images: string;
}

export interface SelectedImage {
  selected_Product_Image: string;
}

This is my component 

import { Component } from '@angular/core';
import { CartdataService } from './cartdata.service';
import { Images } from './model';

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

  constructor(private CartdataService: CartdataService) {}

   images : Images;

   ngOnInit() {
    this.CartdataService.i_cast_Product_Path.subscribe( (response : Images ) =>
    { this.images = response; });
  }
}

Here I am getting the API response ,What I want to do is I need to get display all the API values in a separate tags.

<span >
  {{images}}
</span>

By using the above code I got the output as [object object].

Upvotes: 0

Views: 66

Answers (2)

NitinSingh
NitinSingh

Reputation: 2068

For general debugging, put a debugger statement (or breakpoint within console 

ngOnInit() {
this.CartdataService.i_cast_Product_Path.subscribe( (response : Images ) =>
{
debugger;
this.images = response; });
}

(as per your data structure)

<span>
 <div ngFor(let img in images.Simage)>   
   <img src={{img}}>
 </div>
</span>

I guess you are trying to build a page where a small image links to a bigger image. If so, then you need to restructure your data structure to contain the big and small image in a single object and have the selected image outside.

export interface imageData = { smallImage: string, bigImage: string }
export interface imageCollection { images: imageData[], selectedImage: string }

Let know if this helps..

Upvotes: 2

Arash
Arash

Reputation: 1826

Right click on the web page and select Inspect, then go to the network tab and check what is coming from the Server. The response should be in the same format as your model is in you'r client i.e

export interface Images {
  big_Images: BImage[];
  small_Images: Simage[];
  selected_Product_Images: SelectedImage[]
}

The this.images that you are using in your HTML code is an object and you can't just print object like {{object}}. So if you add a debugger in your code to see what is your object conaint !!! Change you'r core like below.

  ngOnInit() {
    this.CartdataService.i_cast_Product_Path.subscribe(
      (response:Images) => { 
        this.images = response; 
        debugger;
      });
  }

Now keep you'r inspect open and reload your page, your code will get stock in the debugger line and you can see what it is inside this.images object.

another way is to write console.log(this.images) instead of debugger. in this case this.images's content will print in your Inspect>console part.

Upvotes: 0

Related Questions