Multidimensional arrays with angular

Question

I am currently trying to display array data in a table using angular. Here is my HTML:

            <table>
            <thead>
                <tr>
                    <th>Location</th>
                    <th>User</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Amount</th>
                    <th>Transaction Type</th>
                    <th>Direct Object</th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in index.users">
                    <td ng-repeat="transaction in users.transactions">
                     {{transaction.transLocale}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.transDate}}</td>
                    <td>{{user.transTime}}</td>
                    <td>{{user.transAmount}}</td>
                    <td>{{user.transType}}</td>
                    <td>{{user.directObject}}</td>
                </tr>
            </tbody>
        </table>

And here is my js:

app.controller('IndexController', function(){
    this.users = userHistory;
}); 



var userHistory = [
{
    name: 'Bobby',
    transactions: 
     [{
        transDate: '1/15/15',
        transTime: '4:30pm',
        directObject: 'Matt',
        transAmount: '11',
        transType: 'debt',
        transLocale: 'B-dubs'
    },{
        transDate: '1/12/15',
        transTime: '7:30pm',
        directObject: 'Matt',
        transAmount: '9',
        transType: 'credit',
        transLocale: 'MickDs'       
        }]
 },

{   name: 'Jake',
    transactions: [
     {
        transDate: '1/11/15',
        transTime: '1:30pm',
        directObject: 'Matt',
        transAmount: '5',
        transType: 'credit',
        transLocale: "Jason's"
    }, {
        transDate: '1/12/15',
        transTime: '7:30pm',
        directObject: 'Matt',
        transAmount: '9',
        transType: 'debt',
        transLocale: 'MickDs'       
    }]
},
    {
    name: 'Clayton',
    transactions: {
        transDate: '1/14/15',
        transTime: '2:30pm',
        directObject: 'Matt',
        transAmount: '15',
        transType: 'credit',
        transLocale: "Chen's"
    }
}];

I can't seem to print the data inside of the transactions array? I am just starting out in angular so I am not quite sure what is going on. Any insight would be wonderful, I am trying to learn more than trying to get it to work. Thanks!

You are printing out {{user.transDate}} whereas it's an attribute of transaction {{transaction.transDate}}. Change others similarly — cbayram
– cbayram, Commented Jan 8, 2015 at 17:24
When I printed out transaction.transLocale it inserted the user names, not the location data — sanch
– sanch, Commented Jan 8, 2015 at 17:28

devqon · Accepted Answer · 2015-01-08 17:30:13Z

1

Bind the first ng-repeat to the tbody:

<tbody ng-repeat="user in users">
    <tr ng-repeat="transaction in user.transactions">
        <td>{{transaction.transLocale}}</td>
        <td>{{user.name}}</td>
        <td>{{transaction.transDate}}</td>
        <td>{{transaction.transTime}}</td>
        <td>{{transaction.transAmount}}</td>
        <td>{{transaction.transType}}</td>
        <td>{{transaction.directObject}}</td>
    </tr>
</tbody>

It is okay to have multiple tbody elements in your table.

edited Jan 8, 2015 at 17:30

answered Jan 8, 2015 at 17:19

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sanch Over a year ago

" change users.transactions in user.transactions in your view." what do you mean by this?

Dan Atkinson · Accepted Answer · 2015-07-08 23:32:08Z

It will help you find the plunker I made:- http://plnkr.co/edit/1GhzyeszaeGPAC2cu4ib?p=preview

<tbody>
  <tr ng-repeat="user in index.users">
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transLocale}}
        <br>
      </span>
    </td>
    <td>{{user.name}}</td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transDate}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transLocale}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transTime}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transAmount}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transType}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.directObject}}
        <br>
      </span>
    </td>
  </tr>
</tbody>

Dan Atkinson · Accepted Answer · 2015-07-08 23:38:35Z

0

Try this

<tbody>
  <tr ng-repeat="user in users">
    <table>
      <tbody>
        <tr ng-repeat="transaction in user.transactions">
          <td>{{transaction.transLocale}}</td>
          <td>{{user.name}}</td>
          <td>{{transaction.transDate}}</td>
          <td>{{transaction.transTime}}</td>
          <td>{{transaction.transAmount}}</td>
          <td>{{transaction.transType}}</td>
          <td>{{transaction.directObject}}</td>
        </tr>
      </tbody>
    </table>
  </tr>
</tbody>

Script:

app.controller('IndexController', function(){
    $scope.users = userHistory;
});

edited Jul 8, 2015 at 23:38

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Jan 8, 2015 at 17:25

mia

1,2481 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

Multidimensional arrays with angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related