Angular convert json to model object - dynamic property name

Question

I am trying to write a dashboard in Angular for metrics generated by DropWizard. The json (partial snnipet) returned by metrics is

[ {
  'gauges': {
      'TaskPoolService.converter': {
          'value': {        
              'poolSize': 4,
              'completedTaskCount': 153,
              'taskCount': 234
          }                 
      },                
      'TaskPoolService.loader': {
          'value': {        
              'poolSize': 4,
              'completedTaskCount': 473,
              'taskCount': 474
          }

       ....  (many more) .....               

  } ]

I want to convert it into model for use in template

class Guage { 
      metricName: string;
      poolSize: number;
      completedTaskCount: number;
      taskCount: number;
}

The above json should converted into following array

[
    {
        metricName: 'TaskPoolService.converter',
        poolSize: 4,
        completedTaskCount: 153,
        taskCount: 234
    },
    {
        metricName: 'TaskPoolService.loader',
        poolSize: 4,
        completedTaskCount: 473,
        taskCount: 474
    }];

I have shown only the partial listing of metrics in json and there may be many more metrics. And also, the new metrics may get added dynamically. In other words, metric name is not constant.

Is it possible to convert the property name (which is dynamic) such as TaskPoolService.converter into metricName: 'TaskPoolService.converter'

if not possible, whether json array can be referred in template directly as key, value pair in ngFor loop so that {{ key }} can output as TaskPoolService.converter

Saeed · Accepted Answer · 2018-05-28 15:38:54Z

1

This code create your json output mentioned in question. I hope it helps you.

var x = [{
  gauges: {
    "TaskPoolService.converter": {
      value: {
        poolSize: 4,
        completedTaskCount: 153,
        taskCount: 234
      }
    },
    "TaskPoolService.loader": {
      value: {
        poolSize: 4,
        completedTaskCount: 473,
        taskCount: 474
      }
    }
  }
}];

var output = [];

x.forEach(function(itm) {
  Object.entries(itm).forEach(function(ii) {
    Object.entries(ii[1]).forEach(function(tt) {
      output.push({
        metricName: tt[0],
        poolSize: tt[1].value.poolSize,
        completedTaskCount: tt[1].value.completedTaskCount,
        taskCount: tt[1].value.taskCount
      })
    })
  })
});

console.log(output);

edited May 28, 2018 at 15:38

answered May 28, 2018 at 15:32

Saeed

5,4983 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maithilish Over a year ago

perfect and clean solution... Thanks a ton

Collectives™ on Stack Overflow

Angular convert json to model object - dynamic property name

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related