Ng-repeat angular js

Question

I have my json from the server as

[
   {
      "guid":"54db86c947b39358ab2c266a",
      "modified":0,
      "created":0,
      "name":"iOS",
      "criteria":[
         {
            "name":"Supportability",
            "value":1,
            "reasons":[
               "we do not know the tech"
            ]
         },
         {
            "name":"Core Image",
            "value":1,
            "reasons":[
               "Some reason",
               "Reason 2"
            ]
         },
         {
            "name":"Deployment",
            "value":1,
            "reasons":[
               "no servers"
            ]
         },
         {
            "name":"Hardware",
            "value":1,
            "reasons":[
               "hardware too expensive"
            ]
         },
         {
            "name":"Security",
            "value":1,
            "reasons":[
               "plain text password"
            ]
         },
         {
            "name":"Application",
            "value":0.85,
            "reasons":[
               "332 out of 1600 apps are not package for W10"
            ]
         }
      ],
      "type":"Software"
   },
   {
      "guid":"54db81ab47b3187eceaef46e",
      "modified":0,
      "created":0,
      "name":"Windows 8",
      "criteria":[
         {
            "name":"Supportability",
            "value":1,
            "reasons":[
               "we do not know the tech"
            ]
         },
         {
            "name":"Core Image",
            "value":1,
            "reasons":[
               "Some reason",
               "Reason 2"
            ]
         },
         {
            "name":"Deployment",
            "value":1,
            "reasons":[
               "no servers"
            ]
         },
         {
            "name":"Hardware",
            "value":1,
            "reasons":[
               "hardware too expensive"
            ]
         },
         {
            "name":"Security",
            "value":1,
            "reasons":[
               "plain text password"
            ]
         },
         {
            "name":"Application",
            "value":0.405,
            "reasons":[
               "332 out of 1600 apps are not package for W10"
            ]
         }
      ],
      "type":"Software"
   },
   {
      "guid":"54db81ab47b3187eceaef46f",
      "modified":0,
      "created":0,
      "name":"Windows 10.1",
      "criteria":[
         {
            "name":"Supportability",
            "value":1,
            "reasons":[
               "we do not know the tech"
            ]
         },
         {
            "name":"Core Image",
            "value":1,
            "reasons":[
               "Some reason",
               "Reason 2"
            ]
         },
         {
            "name":"Deployment",
            "value":1,
            "reasons":[
               "no servers"
            ]
         },
         {
            "name":"Hardware",
            "value":1,
            "reasons":[
               "hardware too expensive"
            ]
         },
         {
            "name":"Security",
            "value":1,
            "reasons":[
               "plain text password"
            ]
         },
         {
            "name":"Application",
            "value":0.85,
            "reasons":[
               "332 out of 1600 apps are not package for W10"
            ]
         }
      ],
      "type":"Software"
   }
]

How do i use ng-repeat in table so that I get the table as

<th>Criteria</th>
<th>iOs</th>
<th>windows</th>..(basically json.name)

and my table body as

<tr>
<td>Supportability (json.criteria[0].name)</td>
<td>1</td>(value for iOs)
<td>1</td>(value for Windows10.1)
<td>...................and so on.
</tr>

<tr><td>Core Image</td>
<td>1</td> ......

</tr>

?

I don't see any angular code at all in your samples? Your data has too many layers for us to write a solution for you..... show us something you tried that didn't give the result you expected. — Claies, Feb 12 '15 at 01:52
also, it seems your data isn't formatted in the same structure to make repeating across columns work; your data seems to be formatted to repeat across rows. — Claies, Feb 12 '15 at 01:56
Looks like you're wanting to do some pivoting on your data. This is outside of what angular can do, so you need to transform the data yourself in JS so you can get the right structure to pass into the `ng-repeat`. — David Williams, Feb 12 '15 at 02:02
(

Criteria {{tech.name}}

{{criteria.name}} {{criteria.value}}

) This is what i have been trying.. How do i format my json to get it as table row and not coloumn? — Prajwal Kadariya, Feb 12 '15 at 02:08
Please update your question instead of posting unreadable code in the comments — Claies, Feb 12 '15 at 02:20
possible duplicate of [How can I iterate over the keys, value in ng-repeat in angular](http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular) — Wayne Ellery, Feb 13 '15 at 14:07

score 0 · Answer 1 · answered Feb 12 '15 at 02:20

As other comments have said, this data structure is not suitable for tables. Not optimal this way either, but if you really want to, you can manage it using divs. But you have to use multiple ng-repeats over the same data (not good).

<div class="section">
  <div class="header">&nbsp;</div>
  <div class="body" ng-repeat="y in mydata[0].criteria">
      {{y.name}}
  </div>
</div>
<div class="section" ng-repeat="x in mydata">
  <div class="header">{{x.name}}</div>
  <div class="body" ng-repeat="y in x.criteria">
      {{y.value}}
  </div>
</div>

plunkr: http://plnkr.co/edit/FpsTe36oYh5t6a0XI2Dc?p=preview

I'll say it again, you're better off restructuring your data to suit your output.

Thanks Malik. So how should i reformat it so that i can achieve the table using ng-repeat? — Prajwal Kadariya, Feb 12 '15 at 03:23

Ng-repeat angular js

1 Answers1