Multiple (Two) ng-repeats on DataTable in AngularJS

Question

Now I know this is a very common topic but I'm not getting any solutions from the SO questions that I saw till now. I'm currently working on a page that has a DataTable whose data is coming from the controller and by using ng-repeat. However, the case here is that I have to use two ng-repeats on the table.

The JSON is as below:

{
  "mainData": [
    {
    "goal": "ValueOne",
    "array": [
      {
        "LowerKeyOne": "LowerValueOne",
        "LowerKeyTwo": "LowerValueOne",
        "LowerKeyThree": "LowerValueOne"
      },
      {
        "LowerKeyOne": "LowerValueTwo",
        "LowerKeyTwo": "LowerValueTwo",
        "LowerKeyThree": "LowerValueTwo"
      }
    ]
  },
 {
    "goal": "ValueTwo",
    "array": [
      {
        "LowerKeyOne": "LowerValueThree",
        "LowerKeyTwo": "LowerValueThree",
        "LowerKeyThree": "LowerValueThree"
      },
      {
        "LowerKeyOne": "LowerValueFour",
        "LowerKeyTwo": "LowerValueFour",
        "LowerKeyThree": "LowerValueFour"
      }
    ]
  }
  ]
}

The HTML is as below:

<div class="ibox-content table-responsive">
    <div ng-repeat="data in mainData">
        <div ng-repeat="cond in data.array">
            <table datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">
            <thead>
                <tr class="table-tr-th">
                    <th>Header</th>
                    <th>Other Header</th>
                    <th>Another Header</th>
                    <th>Extra Header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{data.goal}}</td>
                    <td>{{cond.LowerKeyOne}}</td>
                    <td>{{cond.LowerKeyTwo}}</td>
                    <td>{{cond.LowerKeyThree}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>
</div>

I've used many different options, like e.g -

Adding ng-repeat="(key, value) in JSONObject" ng-if="key=='mainData'" in <tbody>
Two ng-repeats, one in <tbody> and one in <tr> after <tbody>
Adding <div> tags before <table> and also tried adding before <tbody> (before <tbody> as it was suggested in one of the SO answers on the same topic)

The last option resulted me in the following error -

Error: Expected expression in form of "item in collection[ track by id]" but got "{0}"

Also tried using limitTo:1 filter, but no resulted no success.

Any helpful comment is welcome. Thanks!

@BharatGupta adding `track by data.goal` isn't helping. I'm getting the same error mentioned in question — HardikT, Jan 25 '17 at 04:45

Mistalis · Accepted Answer · 2017-02-03T07:57:07.487

3

Do you need something like this?

JSFiddle demo

<table ng-repeat="data in data.mainData | limitTo: 1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Other header</th>
      <th>Another header</th>
      <th>Extra header</th>
    </tr>
  </thead>
  <tbody ng-repeat="data in data.mainData track by @index">
    <tr ng-repeat="d in data.array">
      <td>{{data.goal}}</td>
      <td>{{d.LowerKeyOne}}</td>
      <td>{{d.LowerKeyTwo}}</td>
      <td>{{d.LowerKeyThree}}</td>
    </tr>
  </tbody>
</table>

Including the specific part of your needs for your comment and answer.

edited Feb 03 '17 at 07:57

answered Jan 24 '17 at 13:45

Mistalis

17,793
13
73
97

I did this, but this code results in two tables. What I need is a single table showing all 4 elements. – HardikT Jan 25 '17 at 04:15
hey thanks for your reply. I've tried placing `ng-repeat` in `` before but its throwing me error - **Cannot read property 'match' of undefined** I've the same code structure in another file and there its working all fine. Don't know what is going wrong here :/ – HardikT Jan 25 '17 at 09:04
@Trivedi Well if your data is different from the one you provided, I can't help you more... See [my working Fiddle](http://jsfiddle.net/Mistalis/uakzrjjn/), you maybe missed something in the synthax... – Mistalis Jan 25 '17 at 09:06
no, that's the problem. The object that is there in your fiddle and the object that I'm using are the same. Exact. I'm not able to understand what's going wrong here. Also, could you give me some idea on what should be done for the error ? – HardikT Jan 25 '17 at 09:27
@Trivedi This error tells you that your object is **undefined**. That's why it can't found the property (`match`) you are looking for. I think you have an error in your synthax, and trying to display an **inexisting** object (`undefined`). – Mistalis Jan 25 '17 at 09:28
I'm stumped right now. The object is correct, the code also looks right. I'm out of options to try here! Anyways, thanks for your help @Mistalis. And if you come across any other solution / option to try then do let me know. – HardikT Jan 25 '17 at 09:30
@Trivedi Create a Fiddle of your code. Else I can't do more for you. – Mistalis Jan 25 '17 at 09:31
its just a matter of accepting whose answer. Would you make the couple of changes made in my answer so that I will accept your answer? – HardikT Feb 03 '17 at 05:02

score 0 · Answer 2 · answered Jan 31 '17 at 13:08

@Mistalis's answer is almost correct, but in my case I had to make a few changes to get the solution and hence have posted this answer.

The solution is -

<table ng-repeat="data in data.mainData | limitTo: 1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Other header</th>
      <th>Another header</th>
      <th>Extra header</th>
    </tr>
  </thead>
  <tbody ng-repeat="data in data.mainData track by @index">
    <tr ng-repeat="d in data.array">
      <td>{{data.goal}}</td>
      <td>{{d.LowerKeyOne}}</td>
      <td>{{d.LowerKeyTwo}}</td>
      <td>{{d.LowerKeyThree}}</td>
    </tr>
  </tbody>
</table>

Not yet sure as to why had to write ng-repeat="data in mainData" twice.

Multiple (Two) ng-repeats on DataTable in AngularJS

2 Answers2

JSFiddle demo