CODEWITHSUNDEEP
javascriptangularjsjsonhtml
LadyCode
LadyCode

Reputation: 1

How to display variable key values of json in ng-repeat?

I have following JSON:

[
   {
      "item0":"red",
      "item1":"green"},
   {
      "item0":"blue",
      "item1":"black",
      "item2":"purple"
   }
   {
      "item0":"yellow"
   }
]

Now I want these values to populate in my HTML by ng-repeat. But since my Key value is changing in JSON everytime, I am unable to use the code. Following is the structure of my HTML:

<div ng-repeat="upsell in upsellData">       
  <div class="style-select prefilled">
    <div class="col-sm-3">
         <input type="text" class="form-control" readonly value="{{upsell.item0}}">
     </div>
    <div class="col-sm-3">
         <input type="text" class="form-control" readonly value="{{upsell.item1}}">
     </div>
  </div>
</div>

This just diplays 0th element, 1st element, 2nd element etc.. but my key values can vary according to data.

Can someone please help me in getting the values for variable number of keys through ng-repeat?

I also tried with $index and nested ng-repeat, but didn't got desired result.

Thanks in advance for your help.

Upvotes: 0

Views: 130

Answers (3)

Hardik Kanjariya ツ
Hardik Kanjariya ツ

Reputation: 636

You can use nested-repeat [ng-repeat within ng-repeat] as (key, val) pair :

<div ng-repeat="upsell in upsellData">       
  <div class="style-select prefilled">
    <div class="col-sm-3" ng-repeat="(key, val) in upsell">
      <input type="text" class="form-control" readonly value="{{val}}">
    </div>
  </div>
</div>

Upvotes: 0

Victor Ribeiro da Silva Eloy
Victor Ribeiro da Silva Eloy

Reputation: 4159

use nested ng-repeats, using (key,value) in the inner ng-repeat

<div ng-repeat="upsell in upsellData">       
  <div class="style-select prefilled">
    <div class="col-sm-3" ng-repeat="(key,value) in upsell">
         <input type="text" class="form-control" readonly value="{{value}}">
     </div>
  </div>
</div>

Upvotes: 0

M K
M K

Reputation: 9416

You can do something like this:

<div ng-repeat="upsell in upsellData">       
  <div class="style-select prefilled">
    <div class="col-sm-3" ng-repeat="(key, value) in upsell">
      <input type="text" class="form-control" readonly value="{{ value }}">
    </div>
  </div>
</div>

Otherwise, I would consider rearranging your data before iterating over it.

Upvotes: 3

Related Questions