In an angular project I'm desperately trying to get a usable response from an API call.
I tried it in many ways:

This is what the API is responding (tested in browser and postman):

{
  "cols": [
    [
      "Open", 
      "High", 
      "Low", 
      "Close", 
      "volume"
    ]
  ]
}

I tried it with http method in a service component with observables:

  getDfColumns(): Observable<DfColumns[]>{

    return this.http.get<DfColumns[]>(this.URLColumns);

  }

and the main component where I call the function with the get method:

DfCols!:any;

  getCols() {

    this.DfCols = this.indicatorService.getDfColumns().pipe(map((response: any) => response.json()));
    console.log(this.DfCols)
  }

returns an empty observable: Observable {source: Observable, operator: ƒ}

I also tried in the main component:

this.DfCols =  this.indicatorService.getDfColumns().subscribe(columns => {this.DfCols = columns;})

The result is an undefined

..and finally http method in a service component without an observable (I still don't get the purpose of observables in these simple API calls):

  getDfColumns(){
  
    return this.http.get(this.URLColumns);

  }

Nothing helps! What is wrong with that? How do I get the proper response?

Update Code:

main component (getCols() is trigger by button):

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
import { CallFunctionService } from 'src/app/services/call-function.service';
import {LoadIndicatorParamsService} from 'src/app/services/load-indicator-params.service';
//import { RestServiceDfinit } from 'src/app/services/rest-df-init.service';
import { DfIndicatorService } from 'src/app/services/rest-df-indicator.service';
import { DfColumns } from 'src/app/interface/df-indicator';
import { map } from 'rxjs/operators'

@Component({
  selector: 'app-formgroup-indicator',
  templateUrl: './formgroup-indicator.component.html',
  styleUrls: ['./formgroup-indicator.component.scss']
})
export class FormgroupIndicatorComponent implements OnInit {


  toggleAdd: boolean = false;
  toggleDelete: boolean = true;
  
  IndicatorGroup = new FormGroup({
    IndType: new FormControl(''),
    Ind: new FormControl(''),
    IndPeriod: new FormControl(''),
    IndOpt1: new FormControl(''),
    IndOpt2: new FormControl(''),
  });

  DfCols!:any;


  constructor(private callDfFunction: CallFunctionService, private IndicatorParams: LoadIndicatorParamsService, private indicatorService: DfIndicatorService) { }

  ngOnInit(): void {

  }

  getCols() {

    this.DfCols = this.indicatorService.getDfColumns().pipe(map((response: any) => response.json()));

    this.DfCols.subscribe((data:any) => console.log(data));
    console.log(this.DfCols)
  }

}

service component:

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs'
import { DfIndicatorRoot, DfColumns } from '../interface/df-indicator';
import {LoadIndicatorParamsService} from './load-indicator-params.service';
import { map } from 'rxjs/operators'


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


  URLColumns: string = "http://127.0.0.1:5000/df_columns/";



  constructor(private http: HttpClient) { 

  
  }
  getDfColumns(): Observable<DfColumns[]>{

    return this.http.get<DfColumns[]>(this.URLColumns);
    //console.log(this.DfColumns)
  }

The interface:

export interface DfIndicatorRoot {
    ind: string;
    params: DfIndicatorParams[];
  }
  
  export interface DfIndicatorParams {
    ind_type: string;
    period: number;
    optional_param_1: number;
    optional_param_2: number;
  }


  export interface DfColumns { cols:object}

CodePudding user response：

You cannot read an observable, you have to subscribe to it to get the value, like this

getCols() {
  this.indicatorService.getDfColumns().pipe(
    tap(() => console.log(response)),
    // I am not sure about this line it could be response.body just log it and check
    map((response: any) => response),
    take(1),
  ).subscribe((data) => {
    console.log(data)
    this.DfCols = data;
  });
}