Separating data from httpclient in angular

Question

HI everyone I'm having issue in separating data from HTTPClient click on the link the image shows data fetching from api

I want to separate every column in separate variable. e.g all Ramp_Value in one variable, ProgressBar1_Value in another variable. etc so that i can use it in charts. or if you have any better method please let me know. Thanks in advance.

    export interface TrendForData {
          Dated?: string;
          ProgressBar1_Value?: number;
          Ramp_Value?: number;
          Ramp2_Value?: number;
          Ramp3_Value?: number;
          Ramp4_Value?: number;
          Ramp5_Value?: number;
          Random_Value?: number;
        }
       export class AppComponent implements OnInit {
        TrendDataMap: TrendForData = {};
          refreshTrendData() {
            this.service.getTrendData().subscribe(data=>{
             return this.DataTrend=data;
              
              console.log(this.DataTrend);
              });
          }
          
          setParams() {
            const responseObject = this.DataTrend;
            Object.keys(responseObject).forEach(key => {
              this.TrendDataMap[key] = responseObject[key];
            });
          }
         ngOnInit() {
    
        this.setParams();
    
        console.log(this.TrendDataMap.Dated);
        console.log(this.TrendDataMap.ProgressBar1_Value);
        console.log(this.TrendDataMap.Ramp2_Value);
        console.log(this.TrendDataMap.Ramp3_Value);
        console.log(this.TrendDataMap.Ramp4_Value);
        console.log(this.TrendDataMap.Ramp5_Value);
        console.log(this.TrendDataMap.Ramp_Value);
        console.log(this.TrendDataMap.Random_Value);
      }
}

I updated the code and I'm getting no error but also no data its saying undefine in browser console.

Answer 1

you can use it following, no good idea to separate every value to unique variable, i hope better stack his into object

    import { Component, OnInit, VERSION } from "@angular/core";

export interface TrendForData {
  Dated?: string;
  ProgressBar1_Value?: number;
  Ramp_Value?: number;
  Ramp2_Value?: number;
  Ramp3_Value?: number;
  Ramp4_Value?: number;
  Ramp5_Value?: number;
  Random_Value?: number;
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  TrendDataMap: TrendForData = {};
  getResult() {
    return {
      Dated: 1,
      ProgressBar1_Value: 2,
      Ramp_Value: 3,
      Ramp2_Value: 4,
      Ramp3_Value: 5,
      Ramp4_Value: 6,
      Ramp5_Value: 7,
      Random_Value: 8
    };
  }

  setParams() {
    const responseObject = this.getResult();
    Object.keys(responseObject).forEach(key => {
      this.TrendDataMap[key] = responseObject[key];
    });
  }
  ngOnInit() {
    this.setParams();

    console.log(this.TrendDataMap.Dated);
    console.log(this.TrendDataMap.ProgressBar1_Value);
    console.log(this.TrendDataMap.Ramp2_Value);
    console.log(this.TrendDataMap.Ramp3_Value);
    console.log(this.TrendDataMap.Ramp4_Value);
    console.log(this.TrendDataMap.Ramp5_Value);
    console.log(this.TrendDataMap.Ramp_Value);
    console.log(this.TrendDataMap.Random_Value);
  }
}

sandbox for play https://stackblitz.com/edit/angular-ivy-bh3rkd?file=src/app/app.component.ts