Convert Json String to json Arrays in angular 6
17,858
this.clientService.getHeaders().subscribe(
(res) => {
console.log(res);
let result= <any>res;
this.mapper= result;
console.log(this.mapper);
this.ismapped=false;
}
);
No need to go into stringifying and then parsing. Just cast the response to any and then you can use it as an array.
Author by
nidhi
Updated on June 15, 2022Comments
-
nidhi almost 2 years
Hi I want to convert the RestController Response which is in Json String to json array here is my json array sting which i have printed in console.
'{"Impressions":["Budget","CTR","Campaign","Campaign state","Clicks","Conv. rate"],"Clicks":["Budget","CTR","Campaign","Campaign state","Clicks","Conv. rate"],"Revenue":["Budget","CTR","Campaign","Campaign state","Clicks","Conv. rate"]}'
I want to convert it to json array so that i can iterate it,
My requirement is to iterate the array and print key as label and value as slect options
Example:
Impression as label and "Budget","CTR","Campaign","Campaign state","Clicks","Conv. rate" as select options.
Here is my code for iteration
<div> <form *ngFor ="let map of mapper"> <mat-form-field> <mat-select placeholder="{{map}}"> <!--<mat-option>None</mat-option>--> <mat-option *ngFor="let option of map" [value]="option"> {{option}} </mat-option> </mat-select> </mat-form-field> </form> </div>
my .ts class
this.clientService.getHeaders().subscribe( (res) => { console.log(res); let resSTR = JSON.stringify(res); let resJSON = JSON.parse(resSTR); this.mapper=Array.of(resJSON._body); console.log(this.mapper); this.ismapped=false; } );
-
Venomy over 5 yearsWhat is the question?
-
nidhi over 5 years@Venomy I want to convert Json String in to Json array of type User defined Object class and use that array to iterate in *ngfor
-
phuzi over 5 yearsYou mean JSON string to JavaScript array. There's no such thing as a JSON array/object.
-
-
nidhi over 5 yearsHi Alex thanks for quick response, I have created a model MapHeader export class MapHeader { public Budget: string; public CTR: string; public Campaign: string; public Orders: string; public Clicks: string;} I want array to assign to this model for which I wrote this.mapper= Object.keys(JSON.parse(str)).map(arr => { return
${arr}: ${JSON.parse(str)[arr].join(', ')}
; }); this is throwing an error Type 'string[]' is not assignable to type 'MapHeader[]'. so that i can use mapper in html for *ngfor loop -
Alex Link over 5 yearsAre you sure you need class here? I think interface is enough export interface MapHeader { Budget: string; CTR: string; Campaign: string; Orders: string; Clicks: string; }
-
nidhi over 5 yearsI'am completely new to angular I'am not understanding what you reffering to. could you explain me?
-
nidhi over 5 yearsi tried with string[] and able to get array while iterating again i got an issue Cannot find a differ supporting object 'Campaign: Budget, CTR, Campaign, Campaign state, Clicks, Conv. rate ' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
-
Alex Link over 5 yearsIf you want to set custom type like MapHeader[], then use interface, not class: typescriptlang.org/docs/handbook/interfaces.html Test your data with simple <p *ngFor="let element of arr">{{element | json}}</p> and then transform data to the desired format
-
nidhi over 5 years"Impressions:Budget, CTR, Campaign, Campaign state, Clicks" "Clicks:Budget, CTR, Campaign, Campaign state, Clicks" this is what is getting printed how can i loop this again and print Impression as label and Budget, CTR, Campaign, Campaign state, Clicks as select option