JSON to Array binding in select Typescript

Question

JSON

{
    "bloodGroup":[
      {"Id":1, "Value":"O +ve", "Description":"OPositive"}, 
      {"Id":2, "Value":"O -ve", "Description":"ONegative"}, 
      {"Id":3, "Value":"AB +ve", "Description":"ABPositive"}
    ],
    "Gender":[
      {"Id":1, "Value":"Male", "Description":"Male"}, 
      {"Id":2, "Value":"Female", "Description":"Female"}
    ]
}

Pipe:

  transform(aList: Lookup[], lookUpName: string): Lookup[] {
    if (!aList || !lookUpName || aList.length === 0) {
        return aList;
    }

  return Array.of(aList[lookUpName])
}

Lookup Class (autogenerated from nswag):

export interface ILookup {
    name?: string | undefined;
    value?: string | undefined;
    description?: string | undefined;
}

HTML:

  <option *ngFor="let gender of aList | lookupFilter:'Gender'" [value]="gender.Id">
              {{gender.Value}}
  </option>

The select doesn't bind the required values. What am i doing wrong?

i think the issue is with Pipe. can you update question with complete pipe class — Sudarshana Dayananda
– Sudarshana Dayananda, Commented Jul 20, 2019 at 4:11
is it needed to use lookupFilter. cannot it used as <option *ngFor="let gender of aList.Gender" [value]="gender.Id">{{gender.Value}}</option> — Sudarshana Dayananda
– Sudarshana Dayananda, Commented Jul 20, 2019 at 4:14
Seems a good option, didn't think of it as it was a different scenaio before so i was using the filterPipe. Will give it a try @SudarshanaDayananda — A Coder
– A Coder, Commented Jul 20, 2019 at 4:20
Worked just like that, thank you @SudarshanaDayananda Still i'm curious why didn't this work. Anyways will use the method u proposed. — A Coder
– A Coder, Commented Jul 20, 2019 at 4:22

Sudarshana Dayananda · Accepted Answer · 2019-07-20 04:25:51Z

1

Change Array.of(aList[lookUpName]) to aList[lookUpName]. Everything will work fine.

 transform(aList: Lookup[], lookUpName: string): Lookup[] {

    if (!aList || !lookUpName || aList.length === 0) {
        return aList;
    }
    return aList[lookUpName];
}

StackBlitz.

answered Jul 20, 2019 at 4:25

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

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

1 Comment

A Coder Over a year ago

I was trying to convert JSON to array to bind the values to select, so select works directly with json which i don't know. Thanks again. Will mark your name for my future work, please help out.

Collectives™ on Stack Overflow

JSON to Array binding in select Typescript

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