如何从来自 http.get 响应的对象中提取数据

Posted 2023-03-13

【中文标题】如何从来自 http.get 响应的对象中提取数据

【英文标题】：how to extract data from an object that came from http.get response

【发布时间】：2018-07-16 18:42:51

【问题描述】：

我有一个 API 响应以下 json 类型的对象：

 
    "triggerCount": 
        "ignition_state_off": 16,
        "ignition_state_on": 14,
        "exit_an_area": 12,
        "enter_an_area": 19,
        "door_unlocked": 1,
        "door_locked": 1,
        "fuel_level_below": 12
    

我通过这个注入的服务得到响应：

interface ITrigger
  triggerCount: ITriggerCount;


interface ITriggerCount
  [key:string]: number;



@Injectable()
export class DbApiService 

   private triggersUrl = 'http://localhost:3000/triggers';

  constructor(private http: HttpClient) 
   


getTriggerCount()
  return this.http.get<ITrigger>(this.triggersUrl)
  

我注入服务的组件：

export class TriggersComponent implements OnInit 


@Input() triggerCountChart = [];

triggers:any;
tempArray: any = [];

  constructor(private triggerService: DbApiService)  

  ngOnInit() 

    this.getTriggerCount()
    this.buildChart()

  


  getTriggerCount()


  this.triggerService.getTriggerCount().subscribe(data =>this.triggers = data;
    this.tempArray = this.triggers.triggerCount;
    console.log(this.triggers,this.tempArray);
         );

如您所见，我在控制台记录了响应结果，因此我可以看到它的外观和工作方式，这是我浏览器中控制台的屏幕截图：

我真正想做的是提取属性字符串，例如ignition_state_off，并将它们保存在字符串类型的数组中，提取它们的值并将它们保存在类型数字的数组中，以便使用这些数组来呈现图表.

图表函数

此图表当前使用我手动插入的数据，您可以在 trigglerlabels 数组和 triggerCountArray 中看到：

buildChart()

  let triggerLabels = ['ignition_off','ignition_on','enter-area','exit-area','door_unlocked','door_locked','fuel_drop'];

  let triggerCountArray = [12,13,22,32,14,8,17]

  this.triggerCountChart = new Chart('canvas-triggers', 
    type: 'pie',
    data: 
      labels: triggerLabels,
      datasets: [
         
          data: triggerCountArray,
         // borderColor: "#3cba9f",
          backgroundColor: ["#e8f1f2","#b9c0c1","#8d99ae","#3283a9","#006494","#283c4e"],
          fill: false
        ,

      ]
    ,
    options: 

      title: 
        display: true,
        text: 'applets created in percentage',
        fontSize:14
    ,
      legend: 
        display: true,
        position: "right",
        labels: 
          boxWidth : 40,
          fontSize : 14
        
      ,
      scales: 
        xAxes: [
          display: false
        ],
        yAxes: [
          display: false
        ],
      
    
  );

我希望我清楚地解释了这里的问题，我在网上查了很多地方都没有运气，请帮忙。

【问题讨论】：

您是否只是在寻找Object.keys( this.tempArray ) 和Object.values( this.tempArray )（请注意，它们的顺序可能不一定相同）。或者你只是想要Object.keys( this.tempArray ).reduce( (current, item) => current.labels.push( item ); current.values.push( this.tempArray[item] ); return current; , labels: [], values: [] )

是的，我只想要键（如果键是指诸如“ignition_state_off”之类的标签）和值。但对我来说重要的是它们保持有序，否则我怎么知道标签对应的每个值？但会试试看。

那么我相信使用 reduce 的那个是最简单的

使用这个我的数组将是标签和值。我将如何在我的图表函数中使用它们（我的图表函数在同一个类中）我应该在类级别声明它们吗？我试图 console.log(labels) 但编辑抱怨它找不到名称标签

因为我已经在类级别上声明了标签和值，所以效果很好。但是标签和值中的第一个元素都不存在，所以我有 7 个元素，但在标签和值中，每个元素都有 6 个元素。问题出在哪里？

【参考方案1】：

因此，如 cmets 中所述，您只需提取信息以匹配您的目标数据结构。

为此，您可以先提取密钥，然后使用重构数据

Object.keys( this.tempArray ).reduce( function( current, item ) 
  current.labels.push( item );
  current.values.Push( this.tempArray[item] );
  return current;
,  labels: [], values: []  );

其中Object.keys( this.tempArray ) 将对象中的所有键提取到字符串数组中，然后您可以使用Array.prototype.reduce 循环访问您的数据并保留您感兴趣的数据。第二个参数（如果给出）将给你你的起始函数，因为每次下一次迭代都将使用你第一个参数的最后一个返回值。