Add multiple time from multiple objects in array and display using pipe in angular 5 in HTML

Question

In object array i have multiple objects in nested array, each object has its own value of time e.g ""call_duration": "0:21"" ,I want to add all the times and display it in proper time format from HTML side. Array is

[
  {
    "phone_number": "1905",
    "interactions": [
      {
        "agentId": "hassan1",
        "call_duration": "0:21"
      },
      {
        "agentId": "shabber",
        "call_duration": "1:22"
      }
    ]
 }
]

I want to add those call duration and display the final time, all the things should be handle in HTML

you can use inner loop.

Najam Us Saqib
– Najam Us Saqib

2019-01-23 12:41:26 +00:00
Commented Jan 23, 2019 at 12:41 — Najam Us Saqib
– Najam Us Saqib, Commented Jan 23, 2019 at 12:41
see this: stackoverflow.com/a/44632512/5909026

Najam Us Saqib
– Najam Us Saqib

2019-01-23 12:43:25 +00:00
Commented Jan 23, 2019 at 12:43 — Najam Us Saqib
– Najam Us Saqib, Commented Jan 23, 2019 at 12:43

shhdharmen · Accepted Answer · 2019-01-23 13:07:45Z

It would be difficult to get total time, only through HTML.

I would suggest you use a function in javascript to get total time. Like below :

HTML

...
<div *ngFor="let item of data ">
      Phone: {{item.phone_number}} - Total Duration {{totalDuration(item.interactions)}}
</div>
...

TS

...
totalDuration(interactions: { 'agentId': string, 'call_duration': 'string' }[]) {
    let totalDuration = 0;
    interactions.forEach(item=>{
      // fetch seconds
      const seconds = +item.call_duration.split(':')[1];
      // fetch minutes and convert them into seconds
      const minutes = +item.call_duration.split(':')[0];
      const secondsOfMinutes = minutes * 60;
      // add all seconds
      totalDuration += seconds + secondsOfMinutes;
    })
    // convert totalDuration to readable format
    return Math.floor(totalDuration / 60) + ":" + (totalDuration % 60 ? totalDuration % 60 : '00')
  }
...

I have also created example on stackblitz.

Najam Us Saqib · Accepted Answer · 2019-01-23 12:53:10Z

0

suppose you have an array like:

myObject = [
  {
    "phone_number": "1905",
    "interactions": [
      {
        "agentId": "hassan1",
        "call_duration": "0:21"
      },
      {
        "agentId": "shabber",
        "call_duration": "1:22"
      }
    ]
 }
]

to Display this data you can use Nested Loop e.g:

<div *ngFor="let data of myObject ">
      Phone: {{data.phone_number}} - Intractions <span *ngFor="let intrac of data.interactions">{{intrac.call_duration}}</span>
</div>

Nested loop through your interactions Array.

answered Jan 23, 2019 at 12:53

Najam Us Saqib

3,4411 gold badge29 silver badges49 bronze badges

4 Comments

shhdharmen Over a year ago

Did you check your code? It won't add, it will just concatenate the durations. Output will be this of your code : Phone: 1905 - Intractions 0:211:22

Raza Ellahi Over a year ago

i want to get result like 01:43

Najam Us Saqib Over a year ago

it will automatically come if the value exists in your array. also share your html for better understanding

Raza Ellahi Over a year ago

value is not exit in array, i have to manually add those times

Collectives™ on Stack Overflow

Add multiple time from multiple objects in array and display using pipe in angular 5 in HTML

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related