How to properly display Key Value Pairs using AngularJS

Question

How do I correctly display key value pairs using AngularJS?

Here is my HTML:

<ul class="item-property-list">
    <li ng-repeat="(key, value) in item.item_properties">
    {{key.key}} <strong>&nbsp;{{value.value}}</strong>
    </li>
</ul>

Here is the JSON data:

"item_properties":
          [
                        {
               "key": "Size",
               "value": "S"
            },
                        {
               "key": "Color",
               "value": "Red"
            }
         ]

Here is the output:

S Red

I would like to have:

Size: S
Color: Red

Check out this answer: http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular — Aaron, Apr 14 '15 at 19:14

score 1 · Answer 1 · answered Apr 14 '15 at 19:14

1

Just access it directly:

 <li ng-repeat="element in item.item_properties">
    {{element.key}} <strong>&nbsp;{{element.value}}</strong>
    </li>

answered Apr 14 '15 at 19:14

elmalto

1,008
1
14
23

Why didn't I think of that! Thank you! – edallmighty Apr 14 '15 at 19:15
or {{value.key}} {{value.value}} using original (key,value) pair – ABOS Apr 14 '15 at 19:17

score 0 · Answer 2 · answered Apr 14 '15 at 19:15

(key, value) is for iterrating over an object that has keys and values. item_properties is an array, so repeat normally. Then take the repeated object and access your "key" property on it. Note that your "key" property is not a key in the KVP sense. In {color:'red'} color is a true key.

<ul class="item-property-list">
    <li ng-repeat="item_property in item.item_properties">
    {{item_property.key}} <strong>&nbsp;{{item_property.value}}</strong>
    </li>
</ul>

How to properly display Key Value Pairs using AngularJS

2 Answers2