Convert Json String to json Arrays in angular 6

Question

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 I want to convert Json String in to Json array of type User defined Object class and use that array to iterate in *ngfor — nidhi
– nidhi, Commented Aug 9, 2018 at 11:58
You mean JSON string to JavaScript array. There's no such thing as a JSON array/object. — phuzi
– phuzi, Commented Aug 9, 2018 at 12:42

DEVCNN · Accepted Answer · 2018-08-09 12:49:22Z

2

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.

answered Aug 9, 2018 at 12:49

DEVCNN

6224 silver badges13 bronze badges

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

Comments

Alex Link · Accepted Answer · 2018-08-09 11:34:30Z

0

let str = '{"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"]}'

Object.keys(JSON.parse(str)).map(arr => {
  return `${arr}: ${JSON.parse(str)[arr].join(', ')}`;
});

Do whatever logic you want in return statement. Return it as a string, or as an array, or as an object.

answered Aug 9, 2018 at 11:34

Alex Link

1,24013 silver badges16 bronze badges

6 Comments

nidhi Over a year ago

Hi 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 a year ago

Are 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 a year ago

I'am completely new to angular I'am not understanding what you reffering to. could you explain me?

nidhi Over a year ago

i 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 a year ago

If 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

|

Collectives™ on Stack Overflow

Convert Json String to json Arrays in angular 6

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related