AngularJS and HTML Table

Question

I have json that looks like this :

    [
        {
            "date": "25/06/2015",
            "details": [
                {
                    "p": "AM",
                    "b": "2500"
                },
                {
                    "p": "JL",
                    "b": "300"
                }
            ]
        },
        {
            "date": "24/06/2015",
            "details": [
                {
                    "p": "AM",
                    "b": "2300"
                },
                {
                    "p": "JL",
                    "b": "1300"
                }
            ]
        }
    ]

I want to write the data to an html table using angularjs, but I want the value of date.details.p to determine which column the value of date.details.b should go in. So, for example the value date.details.b will always go in column 2 if date.details.p = 'AM'.

The JSON data will not always contain data that would relate to each column, nor can the order of the details array be guaranteed.

Any ideas gratefully received.

EDIT The expected output would be

Date          AM      JL
25/06/2015    2500     300
24/06/2015    2300    1300

you have an error in your json code - you should remove the first `{` and last `}` — Tomek Sułkowski, Jun 17 '15 at 19:49
Could you maybe write the html that you'd expect from this input? I'm not sure how exactly is this table suppose to look ;) — Tomek Sułkowski, Jun 17 '15 at 20:01
@TomekSułkowski - edit again with expected output. Thanks for looking — DaveH, Jun 17 '15 at 20:04
hope this helps http://plnkr.co/edit/Di4OccGD2tvowvhLxyuf?p=preview — Shushanth Pallegar, Jun 17 '15 at 20:05

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Based on the limited info I can suggest you can use ngShow.

<tr>
    <td class="ColumnTwo">
        <span data-ng-show="checkAM(date)">{{date.details.p}}</span>
    </td>
</tr>

In the function checkAM you can check if date.details.p == "AM"

Based on the situation you can use

ngSwitch ngIf

Also check out https://stackoverflow.com/a/15810462/2489860

edited May 23 '17 at 11:51

Community

1
1

answered Jun 17 '15 at 20:02

Samosa

845
7
19

Tomek Sułkowski · Answer 2 · 2015-06-18T09:15:34.940

Try this:

<table>
    <tr>
      <th>Date</th>
      <th>AM</th>
      <th>JL</th>
    </tr>
    <tr ng-repeat="item in data">
      <td>{{ item.date }}</td>
      <td ng-repeat="detail in item.details">
        <span ng-show="detail.p=='AM' && $index == 0">{{ detail.b }}</span>
        <span ng-show="detail.p=='JL' && $index == 1">{{ detail.b }}</span>
      </td>
    </tr>
  </table>

You can see and run the complete code below:

angular.module('app', [])
.controller('ctrl', function ($scope) {
  
  $scope.data = [
        {
            "date": "25/06/2015",
            "details": [
                {
                    "p": "AM",
                    "b": "2500"
                },
                {
                    "p": "JL",
                    "b": "300"
                }
            ]
        },
        {
            "date": "24/06/2015",
            "details": [
                {
                    "p": "AM",
                    "b": "2300"
                },
                {
                    "p": "JL",
                    "b": "1300"
                }
            ]
        }
    ];
   
  
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
  <table>
    <tr>
      <th>Date</th>
      <th>AM</th>
      <th>JL</th>
    </tr>
    <tr ng-repeat="item in data">
      <td>{{ item.date }}</td>
      <td ng-repeat="detail in item.details">
        <span ng-show="detail.p=='AM' && $index == 0">{{ detail.b }}</span>
        <span ng-show="detail.p=='JL' && $index == 1">{{ detail.b }}</span>
      </td>
    </tr>
  </table>
</div>    
</body>
</html>

AngularJS and HTML Table

2 Answers2