How to sum nested array field in table row in angular 6?

Question

I am using Angular 6 and Html. I want to sum or total a nested array field and show in row.

I have a array list ('marksEntryList') with multiple student and also have a nested array list ('marksDistributionList') with multiple courses. I put individual course marks and all courses marks will show in total in a row.

I want like this image:

stackblitz

ts file

    marksEntryList: any = [
      {
        studentId: '101',
        studentName: "Monir Zaman",
        marksDistributionList: [
         {
          courseId: '01',
          courseTitle: "Math",
          obtainedMarks: null
         },
         {
          courseId: '02',
          courseTitle: "English",
          obtainedMarks: null
         },
         {
          courseId: '03',
          courseTitle: "Physics",
          obtainedMarks: null
         }
        ]

       },
       {
         studentId: '102',
         studentName: 'Michel Jordan',
         marksDistributionList: [
          {
           courseId: '01',
           courseTitle: "Math",
           obtainedMarks: null
          },
          {
           courseId: '02',
           courseTitle: "English",
           obtainedMarks: null
          },
          {
           courseId: '03',
           courseTitle: "Physics",
           obtainedMarks: null
          }
        ]
       }
     ]

html

    <table border="1">
      <thead>
        <tr>
          <th>ID</th> <th>Name</th><th>Admission Test Subjects</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let applicant of marksEntryList">
          <td>{{applicant.studentId}}</td>
          <td>{{applicant.studentName}}</td>
          <td>
           <table>
            <th *ngFor="let testMarks of applicant.marksDistributionList">
                {{testMarks.courseTitle}}
            </th>
            <tbody>
             <tr>
              <td *ngFor="let testMarks of 
                applicant.marksDistributionList">
               <input type="text" [(ngModel)]="testMarks.obtainedMarks" />
              </td>
              <span>Total : 0</span>
             </tr>
           </tbody>
          </table>
        </td>
      </tr>
   </tbody>
 </table>

I expect to total or sum all courses marks of a single row and show it in to total label. Thanks.

Nikhil · Accepted Answer · 2019-10-02 18:34:46Z

2

Create a method getTotal() in component and call this method from template.

Component:

getTotal(marks) {
  let total = 0;

  marks.forEach((item) => {
    total += Number(item.obtainedMarks);
  });

  return total;
}

Template:

<span>Total: {{ getTotal(applicant.marksDistributionList) }}</span>

Live demo on StackBlitz: https://stackblitz.com/edit/angular-sum-table-ngmodel-dsfkpf

edited Oct 2, 2019 at 18:34

answered Oct 2, 2019 at 18:05

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

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

2 Comments

Monir Tuhin Over a year ago

Thanks for your effort but i did't get my answer. I want input in blank input box. During input the total number will sum.

Nikhil Over a year ago

@MonirTuhin - Okay, I didn't notice the input. Check out my edited answer and StackBlitz.

Joy Biswas · Accepted Answer · 2019-10-02 18:38:43Z

1

I would recommend using reactive forms for this. but to answer your question, all you need is a total method bound to the total element.

Stackblitz: https://stackblitz.com/edit/angular-sum-table-ngmodel-u7pkhd

component

getTotal(marks) {
  return marks.reduce((acc, {obtainedMarks}) => acc += +(obtainedMarks || 0), 0);
}

template:

<span>Total : {{getTotal(applicant.marksDistributionList)}}</span>

answered Oct 2, 2019 at 18:38

Joy Biswas

6,5371 gold badge27 silver badges50 bronze badges

1 Comment

Monir Tuhin Over a year ago

thanks for your effort. Your answer also work for me.

Collectives™ on Stack Overflow

How to sum nested array field in table row in angular 6?

ts file

html

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ts file

html

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related