-1
<div (ng-repeat='item in items') >
    {{item.name}} //works
    {{item["name"]}} // works
</div>

how do i repeat item[property] dynamically without using ".name" or ['name']?

patrick moon
  • 1
  • 3
  • Possible duplicate of [Dynamically access object property using variable](http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) – Matthew Green Jun 01 '16 at 19:40
  • What's wrong with `item[property]`? You just need to define it somewhere on a scope, like `$scope.property = 'name';` – vp_arth Jun 01 '16 at 19:46
  • it would be ok if it's just one property. I don't know how many properties there within an item (ie length of the item...not items) – patrick moon Jun 01 '16 at 20:17

2 Answers2

0

To dynamically go through properties, you're going to need to call Object.keys(item) and then iterate through them. It's best to prune your data from within your controller, to minimize the finagling you'll need to do within your HTML.

If you do want to try to do this within your HTML-Angular structures, you could define:

$scope.returnAllKeyValues = function(obj){
    var x = Object.keys(obj),
        arr = [];

    for(var i = 0; i<x.length; i++){
        arr.push(obj[x[i]]);
    }

    return arr;
}

What this function does is it takes in your JSON object, then parses through it and collects all the values for every key within it.

Then, within your HTML, you can write something like this:

<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in items">
          <span ng-init="keyValues = returnAllKeyValues(item)">
              <span ng-repeat="keyValue in keyValues">{{key}} </span>
          </span>
       </li>
    </ul>
</div>

Here you see, within your original ngRepeat, we initialized the array keyValues with all the values from item's keys via the function defined above. Then, ng-repeat through that, and you have everything printed without knowing what they are.

Here is a Fiddle with it working: http://jsfiddle.net/RkykR/2771/

Gibryon Bhojraj
  • 755
  • 5
  • 12
  • I think I see where you're going but Fiddle doesn't seem to work. I added returnAllkeyValues in angular controller and it crashed. Please re-look.Thanks – patrick moon Jun 01 '16 at 22:06
  • I started this with a csv file and using your suggestion I'm back to the origianl csv with obj in string it returned. I was looking for a little more control to create a table with this. I think arr.push(obj[x[i]] created the obj returned: "John 25 boy object:3" – patrick moon Jun 01 '16 at 22:28
  • Sorry, I used the wrong Fiddle link. This one should work now. – Gibryon Bhojraj Jun 01 '16 at 22:48
  • If you want more control, you can put an `If` statement before `arr.push` to filter out values you don't want. That's the tradeoff with dynamically creating the table and manually listing which values you want. If you know what values you want in your table, listing them explicitly is the most straightforward path. – Gibryon Bhojraj Jun 01 '16 at 22:52
0

This was what i was looking for....Thanks

https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat

patrick moon
  • 1
  • 3