Angular 4 : API response returns " "

Question

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 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].

you can use `ngFor` and then bind to image src like in [this S.O](https://stackoverflow.com/a/40798061/5621827) post — jitender, Apr 03 '18 at 04:37

score 2 · Answer 1 · answered Apr 03 '18 at 05:05

2

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..

answered Apr 03 '18 at 05:05

NitinSingh

2,029
1
15
33

ngOnInit() { this.CartdataService.i_cast_Product_Path.subscribe( (response : Images ) => { debugger; this.images = response; }); } – Nikson Apr 03 '18 at 05:31
Are you able to inspect the value being returned in debugger console? Just try hitting the service URL in browser and see its output to confirm that the service returns what you want. Unless the error is identified, it's difficult to come up with specific solution – NitinSingh Apr 03 '18 at 05:35
I got the expected outcome when using the same url in browser . – Nikson Apr 03 '18 at 05:36
Then use same object hierarchy while using the images object... NgFor (let img of Images.SImage). Else open the developer console, locate the script and place a debugger to identify the value. Apart, do u see any errors reported while running? – NitinSingh Apr 03 '18 at 07:10
Now I can see the API response in console of service ,but in component I can't retrieve the data from model – Nikson Apr 03 '18 at 07:12
This clearly means that the service output and the parsing template (Images data structure) are incompatible. Remove the response parsing code and update as [subscribe( (response : any) ]. Then evaluate the response object in the handler. You would need to go in several depths to decipher the structure returned. Or else, while the debugger is struck in the subscription, in console, write "response" and it will evaluate it for you. Post the structure of response here – NitinSingh Apr 03 '18 at 07:19

score 0 · Answer 2 · answered Apr 03 '18 at 04:57

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.

Angular 4 : API response returns " "

2 Answers2