How to convert Json string to object in rxjs angular?

Question

I have two component one is lead board and other is lead card i am using drag and drop of angular material to generate board and i have generated board list using below code and i generate card of darg and drop using ngFor="let lead of leadGroup.group" i want to conver LeadStatusTitle in object so that i can display it on html page . I am not getting data for LeadStatusTitle

lead-board-Component.html

<div cdkDropListGroup>
  <div class="drag-container" *ngFor="let leadGroup of leadKeyValue$ | async">
    <h4>{{ leadGroup.LeadStatusTitle }}</h4>
    <div
      cdkDropList
      [cdkDropListData]="leadGroup.group"
      class="item-list"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="item-box" *ngFor="let lead of leadGroup.group" cdkDrag>
        <app-lead-card lead></app-lead-card>
      </div>
    </div>
  </div>
</div>

lead-card.Component.html

<div>{{ lead.Company }}</div>

lead-board.Component.ts

leadKeyValue$: Observable<
    {
      LeadStatusTitle: string;
      group: string[];
    }[]
  >;
  ngOnInit(): void {
    this.leads$ = this.store.select(getLeads);
    // this.store.dispatch(LeadActions.loadLeads());
    this.leads$.subscribe((x) => {
      this.leadKeyValue$ = from(x).pipe(
        groupBy((lead) => lead.LeadStatus),
        mergeMap((obs) => {
          console.log(obs);
          return obs.pipe(
            map((x) => JSON.stringify(x)),
            toArray(),
            map((items) => {
              return {
                LeadStatusTitle: obs.key,
                group: items,
              };
            })
          );
        }),
        toArray()
      );
    });
  }

When i binding {{ lead.Company }} in lead-card.Component.ts i am getting error TS2339: Property 'Company' does not exist on type 'string'. Thank you

Could you please add more details, what are you trying to do? And what have you tried so far to achieve that? — Amer
– Amer, Commented Feb 28, 2022 at 13:10
I am trying to bind this group by data to drag and drop in angular material so want to conver above json string into object so that i can bind it to ngFor — Sayali
– Sayali, Commented Feb 28, 2022 at 13:15
Could you please update the question to include the expected result that should be passed to the ngFor? — Amer
– Amer, Commented Feb 28, 2022 at 13:17
Added some more code ....i just want to convert it into object i am using json.parser(x) — Sayali
– Sayali, Commented Feb 28, 2022 at 13:21

Mike Jerred · Accepted Answer · 2022-03-01 10:14:27Z

1

It looks like you have not bound the input correctly:

<div class="item-box" *ngFor="let lead of leadGroup.group" cdkDrag>
    <app-lead-card lead></app-lead-card>
</div>

should look more like:

<div class="item-box" *ngFor="let lead of leadGroup.group" cdkDrag>
    <app-lead-card lead="lead"></app-lead-card>
</div>

You need to specify an @Input() attribute in your lead-card.Component.ts but you didn't post the code for that so I cannot check it.

I suggest you read the angular guide for this: https://angular.io/guide/inputs-outputs

answered Mar 1, 2022 at 10:14

Mike Jerred

10.7k5 gold badges25 silver badges48 bronze badges

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

2 Comments

Sayali Over a year ago

As I have use json.stringify I need to convert it in object ,now i am getting data in lead-carde.component.html but i am not getting LeadStatusTitile so i need to convert it first please tell me how should i do this

Sayali Over a year ago

Please help me with this

Collectives™ on Stack Overflow

How to convert Json string to object in rxjs angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related