Display Nested json in select Dropwdown angular

Question

Im new to angular and struggling to display nested json object in select dropdown. This is my json object.

[
  { 
    "cuisine":{ 
      "cuisine_id":1035,
      "cuisine_name":"Afghan"
    }
  },
  { 
    "cuisine":{ 
      "cuisine_id":1,
      "cuisine_name":"American"
    }
  }
]

And in my component HTML im displaying like this

<select class="form-control dropdown" name="processTemplate" id="processTemplate">
  <option *ngFor="let cuisineList of cusine1 | keyvalue">
     {{ cuisineList.value.cuisine_name | json }}
   </option>
 </select>

I would like to display only cuisine_name in select dropdown. Not sure where im going wrong. Any help is much appreciated

Is the posted JSON is a valid one?

Prashant Pimpale
– Prashant Pimpale

2020-01-07 09:20:36 +00:00
Commented Jan 7, 2020 at 9:20 — Prashant Pimpale
– Prashant Pimpale, Commented Jan 7, 2020 at 9:20
Yes @PrashantPimpale

vandu
– vandu

2020-01-07 09:26:42 +00:00
Commented Jan 7, 2020 at 9:26 — vandu
– vandu, Commented Jan 7, 2020 at 9:26

Nicholas K · Accepted Answer · 2020-01-07 10:22:31Z

1

Use:

{{ cuisineList.value.cuisine.cuisine_name }}

since you need to access cuisine_name of each cuisine object .

edited Jan 7, 2020 at 10:22

answered Jan 7, 2020 at 9:19

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

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

1 Comment

Sameer Over a year ago

a little correctionn cuisineList.value.cuisine.cuisine_name as she is using keyvalue pipe

Adrita Sharma · Accepted Answer · 2020-01-07 09:34:42Z

0

Try like this:

<select class="form-control dropdown" name="processTemplate" id="processTemplate">
  <option *ngFor="let cuisineList of cusine1 | keyvalue">
     {{ cuisineList.value.cuisine.cuisine_name }}
  </option>
</select>

Working Demo

answered Jan 7, 2020 at 9:34

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Mohammad Nasir · Accepted Answer · 2020-01-07 10:29:49Z

0

Grab the json array in a variable. Let's the variable is cuisines. Now Follow the snippet.

<select class="form-control dropdown" name="processTemplate" id="processTemplate">
  <option *ngFor="let cuisineList of cuisines">
     {{ cuisineList.cuisine.cuisine_name}}
   </option>
 </select>

answered Jan 7, 2020 at 10:29

Mohammad Nasir

8711 bronze badges

Collectives™ on Stack Overflow

Display Nested json in select Dropwdown angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related