ng-repeat HTML table with colspan and rowspan from nested json

Question

I'm trying to achieve table structure attached in the image : Composite Class Routine

So far what I've tried can be seen in the following Plunker:

https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview

My json data is :

$scope.routines = [
    {
        "WEEKDAY_ID": 1,
        "WEEKDAY": "Sunday",
        "aSemester": [
            {
                "SEMESTER_ID": 1,
                "SEMESTER_NAME": "1st",
                "aClassTime": [
                    {
                        "COURSE_ID": 1,
                        "COURSE_CODE": "CSTE-1001",
                        "CLASS_DURATION": 3,
                        "CLASSTIME_ID": 1,
                        "CLASSTIME": "9.00-9.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 101,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 10,
                        "INSTRUCTOR_NAME": "Abhijit Chakraborty",
                        "SHORT_CODE": "AC"
                    },
                    {
                        "COURSE_ID": 7,
                        "COURSE_CODE": "CSTE-1106",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 4,
                        "CLASSTIME": "12.00-12.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-2",
                        "ROOM_NO": 258,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 10,
                        "INSTRUCTOR_NAME": "Abhijit Chakraborty",
                        "SHORT_CODE": "AC"
                    },
                    {
                        "COURSE_ID": 3,
                        "COURSE_CODE": "CSTE-1102",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 7,
                        "CLASSTIME": "4.00-4.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-2",
                        "ROOM_NO": 252,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 9,
                        "INSTRUCTOR_NAME": "Dr. Md. Asadun Nabi",
                        "SHORT_CODE": "MAN"
                    }
                ]
            },
            {
                "SEMESTER_ID": 2,
                "SEMESTER_NAME": "2nd",
                "aClassTime": [
                    {
                        "COURSE_ID": 7,
                        "COURSE_CODE": "CSTE-1106",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 1,
                        "CLASSTIME": "9.00-9.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-4",
                        "ROOM_NO": 456,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 6,
                        "INSTRUCTOR_NAME": "Dr. Humayun Kabir",
                        "SHORT_CODE": "HK"
                    },
                    {
                        "COURSE_ID": 3,
                        "COURSE_CODE": "CSTE-1102",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 2,
                        "CLASSTIME": "10.00-10.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 102,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 6,
                        "INSTRUCTOR_NAME": "Dr. Humayun Kabir",
                        "SHORT_CODE": "HK"
                    }
                ]
            },
            {
                "SEMESTER_ID": 3,
                "SEMESTER_NAME": "3rd",
                "aClassTime": [
                    {
                        "COURSE_ID": 5,
                        "COURSE_CODE": "CSTE-4202",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 7,
                        "CLASSTIME": "4.00-4.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-2",
                        "ROOM_NO": 252,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 7,
                        "INSTRUCTOR_NAME": "Md. Javed Hossain",
                        "SHORT_CODE": "MJH"
                    }
                ]
            },
            {
                "SEMESTER_ID": 4,
                "SEMESTER_NAME": "4th",
                "aClassTime": [
                    {
                        "COURSE_ID": 61,
                        "COURSE_CODE": "CSTE-2204",
                        "CLASS_DURATION": 2,
                        "CLASSTIME_ID": 1,
                        "CLASSTIME": "9.00-9.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 404,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 6,
                        "INSTRUCTOR_NAME": "Dr. Humayun Kabir",
                        "SHORT_CODE": "HK"
                    },
                    {
                        "COURSE_ID": 62,
                        "COURSE_CODE": "CSTE-2206",
                        "CLASS_DURATION": 2,
                        "CLASSTIME_ID": 3,
                        "CLASSTIME": "11.00-11.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 101,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 10,
                        "INSTRUCTOR_NAME": "Abhijit Chakraborty",
                        "SHORT_CODE": "AC"
                    },
                    {
                        "COURSE_ID": 63,
                        "COURSE_CODE": "CSTE-2202",
                        "CLASS_DURATION": 3,
                        "CLASSTIME_ID": 5,
                        "CLASSTIME": "2.00-2.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-3",
                        "ROOM_NO": 303,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 7,
                        "INSTRUCTOR_NAME": "Md. Javed Hossain",
                        "SHORT_CODE": "MJH"
                    }
                ]
            }
        ]
    }
];

and html I tried so far is :

<table id="routines" class="table table-bordered table-responsive table-condensed">
<thead>
  <tr>
    <th>Day</th>
    <th>Semester</th>
    <th ng-repeat="c in classtimes">{{c.CLASSTIME}}</th>
  </tr>
</thead>

<tbody ng-repeat="r in routines">
   <tr ng-repeat="s in r.aSemester">
     <td rowspan="{{r.aSemester.length}}">{{r.WEEKDAY}}</td>
     <td>{{s.SEMESTER_NAME}}</td>
     <td colspan={{c.CLASS_DURATION}} 
         ng-repeat="c in s.aClassTime">
        {{c.COURSE_CODE}}
      </td>
   </tr>
</tbody>

any kind of help would be appreciated.

amansinghgusain · Accepted Answer · 2017-01-31 13:13:40Z

1

Replace your table body with this

<tbody>
  <tr ng-repeat-start="r in routines">
    <td rowspan="{{r.aSemester.length+1}}">{{r.WEEKDAY}}</td>

  </tr>
  <tr ng-repeat="aSem in r.aSemester">
    <td>{{aSem.SEMESTER_NAME}}</td>
    <td ng-repeat="c in classtimes">
      <span ng-repeat="classTime in aSem.aClassTime">
        <span ng-if="classTime.CLASSTIME_ID==c.CLASSTIME_ID">
          {{classTime.COURSE_CODE}}
        </span>
      </span>
      </td>
  </tr>
  <tr ng-repeat-end ></tr>
</tbody>

I think this should help.

Plunkr https://plnkr.co/edit/QFUouMmSKtBiAWMdGpCC?p=preview

answered Jan 31, 2017 at 13:13

amansinghgusain

7745 silver badges17 bronze badges

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

4 Comments

Priom Biswas Over a year ago

Thanks for your reply. There is also colspan on COURSE_CODE based on CLASS_DURATION, how can it be?

amansinghgusain Over a year ago

Can you provide the Json where a COURSE_CODE has multiple CLASS_DURATION ? On what basis columns will merge

Priom Biswas Over a year ago

If you look at aClassTime array, you can see there is a property named CLASS_DURATION. If the value is 3, the value of that colspan will be 3, value is 2, then value of colspan will be 2 and so forth.

Priom Biswas Over a year ago

I want to set the value something like this colspan={{r.aSemester.aClasstime.CLASS_DURATION}}

Collectives™ on Stack Overflow

ng-repeat HTML table with colspan and rowspan from nested json

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related