CODEWITHSUNDEEP
angularjsjson
Gazano
Gazano

Reputation: 183

ng repeat dynamic with key objet json AngularJS

I have a small problem I would like to set up a ng-repeat dynamic with the values I receive from my JSON object,

First, i made my th from my table with the keys

Secondly, i would like to do my td in dynamic (without putting the name of the key ex: obj.NOM, obj.TYPE ...)

I managed to do something with an Object.keys but logic is not good so I need some help

this is my JSON object ( i show you just the little piece of code that I have a problem )

  "HEADER":[
{"NOM":"API-APP","TYPE":"string","DESCRIPTION":"Code application"},
{"NOM":"API-SIGNATURE","TYPE":"string","DESCRIPTION":"Signature de la requete API"},
{"NOM":"API-TIMESTAMP","TYPE":"integer","DESCRIPTION":"Timestamp en microseconde"}]

and this is my ng repeat 

<span><b>HEADER</b></span>
                <br>
                <br>
                <table class="table">

                    <th ng-repeat ="(key, itemHeader) in itemHead.HEADER[0] track by $index">{{key}}</th>
                    <tr  ng-repeat ="(key, itemHeader) in itemHead.HEADER track by $index" >
                        <td>{{getFirstPropertyValue(itemHeader,$index)}}</td>
                    </tr>
                </table>

I explain i made first a ng-repeat for th with the keys and I would like put my data (3 data per row) in td without put ( .NOM .TYPE .DESCRIPTION)

So I took the function object.key which works very well but that makes me just one element per row but I need 3 elements per row

this is my scope for the function object.key

$scope.getFirstPropertyValue = function(obj,index){
        return obj[Object.keys(obj)[index]];
    }

and this my result

enter image description here

thanks in advance for your help

Upvotes: 0

Views: 59

Answers (1)

Dixit
Dixit

Reputation: 1379

<table class="table">
    <thead>
        <tr>
            <th ng-repeat="(key, itemHeader) in itemHead.HEADER[0]">
                {{key}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in itemHead.HEADER">
            <td ng-repeat="column in row">
                {{column}}
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions