0

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

2

2 Answers 2

1

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.

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

Comments

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.

4 Comments

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
i want to get result like 01:43
it will automatically come if the value exists in your array. also share your html for better understanding
value is not exit in array, i have to manually add those times

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.