Question

我有一个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
        }],
      }
    }
  });


}

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

Answer 1

因此，正如评论中所提到的，您只需要提取信息以匹配您的目标数据结构。

为此，您可以先提取密钥，然后使用

重构数据

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循环数据并保留您感兴趣的数据。第二个参数（如果给定）将给你你的起始函数，其中每个下一次迭代将使用你的第一个参数的最后返回值。

如何从http.get响应

我通过此注入服务获得响应：

组件：

图表功能

1 个答案: