How to get only values from a json to feed into ng-2 charts?

Question

I have a nested json with different fields and its values and i want to get all the values of a particular field in an array to provide datasource to ng-2 charts in this format

chartData = [
{ design_names: [testname1,testname2,.....], label: 'xyz' },
 ];

So far i have fetched the json data from the external file and stored it as object in charts.component.ts .

charts.component.ts

export class ChartComponent implements OnInit {
 inputdesignloadtime : InputDesignLoadTime[];


constructor(private configService : ConfigService) { }

getinputdesigndata(): void{
this.configService.getinputdesigndata().subscribe(inputdesignloadtime =>{
  this.inputdesignloadtime = inputdesignloadtime;
  console.log(this.inputdesignloadtime);
})
}

ngOnInit():void {
this.getinputdesigndata();
}
}

also in service,

 export interface InputDesignLoadTime{
 Design_Name : string;
}

getinputdesigndata(): Observable<InputDesignLoadTime[]>{
return this.http.get<InputDesignLoadTime[]>(this.configUrl);
}

this is a subset of my json -

 [ {
    "Test Data": [
     {
    "First Test": {
    "Design_Name": "testname",
    "Output": "1",
    "Data Info": [
      {
        "Test Name": "ft",
        "Time": 10,
      }
     ]
  }
},
{
  "First Test": {
    "Design_Name": "testname2",
    "Output": "1",
    "Data Info": [
      {
        "Test Name": "ft2",
        "Time": 10,
      }
     ]

  }
},

So, right now i am getting the entire json as object in this.inputdesignloadtime but i want only the design names in an array like

   names=[testname1,testname2,....etc]

The json you have, is that an array? It isn't well formed here so I can't tell if it is an array of objects, or a single object — Ayyash, Jul 21 '19 at 05:06
its an array of objects. Here i have just included the first two objects of the array. — Meghna Dhar, Jul 21 '19 at 05:59

score 0 · Answer 1 · answered Jul 21 '19 at 05:16

I am assuming the output looks like this

[
    {
        "Test Data": [
            {
                "First Test": {
                    "Design_Name": "testname",
                    "Output": "1",
                    "Data Info": [
                        {
                            "Test Name": "ft",
                            "Time": 10,
                        }
                    ]
                }
            },
            {
                "First Test": {
                    "Design_Name": "testname2",
                    "Output": "1",
                    "Data Info": [
                        {
                            "Test Name": "ft2",
                            "Time": 10
                        }
                    ]
                }
            }
        ]
    }
]

So all you need to do is map: I'm using too many vars for clarity

let y = inputdesignloadtime[0]["Test Data"]
let f = y.map(n => n["First Test"]["Design_Name"]);
let output = new Array();
output.push({"design_names": f, "label": "xyz"});

So now output has the desired format.

How to get only values from a json to feed into ng-2 charts?

1 Answers1