Utilizing Array.reduce to Compute Time Discrepancy

Question

Utilizing Array.reduce to Compute Time Discrepancy

Utilizing the array.reduce method, this code calculates the time differences between start and stop as it traverses through the array.

However, this basic implementation does not factor in events or tasks, for instance.

let data = [
  {
    action: "start",
    time: 100
  },
  {
    action: "stop",
    time: 150
  }, 
  {
    action: "start",
    time: 250
  }, 
  {
    action: "stop",
    time: 350
  }, 
  {
    action: "start",
    time: 400
  }
];

let end = 450; // should be Date.now(),

let sum = data.reduce(function (r, a) {

  return r + (a.action === 'start' ? -a.time : a.time);

}, data[data.length - 1].action === 'start' ? end : 0);

console.log(sum);

A potential scalable version of the data array could look like this:

let data = [
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "TRAVEL",
    desc: "Job #12345",
    time: 100
  },
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "ON SITE",
    desc: "Job #12345",
    time: 150
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "BREAK",
    desc: "Job #12345",
    time: 250
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "ON SITE",
    desc: "Job #12345",
    time: 350
  }, 
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "HOME",
    desc: "Job #12345",
    time: 450
  }
];

The process of learning Array.reduce has posed some challenges. Any guidance on how to approach it would be highly appreciated.

What modifications can be made to iterate through a scalable array using this code?

javascript

Answer 1

Answer №1

If there will be a sequence of CLOCK IN and CLOCK OUT events for multiple jobs in your data, consider the following example:

const schedule = [
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "TRAVEL",
    description: "Job #1",
    time: 100
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #1",
    time: 150
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "BREAK",
    description: "Job #2",
    time: 250
  }, 
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #2",
    time: 350
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "HOME",
    description: "Job #3",
    time: 450
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "HOME",
    description: "Job #3",
    time: 500
  }
];

The above snapshot displays the CLOCK IN and CLOCK OUT events for three distinct jobs: Job #1, Job #2, and Job #3.

If you believe this is correct, then the subsequent code snippet should offer the desired outcome:

const jobSchedule = schedule.reduce((prev,event)=>({
  ...prev,
  [event.description]:{
    ...prev[event.description],
    [event.event]:event.time
  }
}),{})

This transforms the data into an object structured like this:

{
  'Job #1': { 'CLOCK IN': 100, 'CLOCK OUT': 150 },
  'Job #2': { 'CLOCK IN': 250, 'CLOCK OUT': 350 },
  'Job #3': { 'CLOCK IN': 450, 'CLOCK OUT': 500 }
}

We can further enhance each job item within that object by calculating the duration using the method below:

const updatedResult = Object.entries(jobSchedule).reduce((prev,entry)=>{
  const [key,value] = entry
  return ({
    ...prev,
    [key]:{
      ...value,
      DURATION: value['CLOCK OUT'] - value['CLOCK IN']
    }
  })
}
,{})

The result is as follows:

{
  'Job #1': {
    'CLOCK IN': 100,
    'CLOCK OUT': 150,
    DURATION: 50
  },
  'Job #2': {
    'CLOCK IN': 250,
    'CLOCK OUT': 350,
    DURATION: 100
  },
  'Job #3': {
    'CLOCK IN': 450,
    'CLOCK OUT': 500,
    DURATION: 50
  }
}

How does that appear to you?

See the functional example below:

const schedule = [
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "TRAVEL",
    description: "Job #1",
    time: 100
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #1",
    time: 150
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "BREAK",
    description: "Job #2",
    time: 250
  }, 
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #2",
    time: 350
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "HOME",
    description: "Job #3",
    time: 450
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "HOME",
    description: "Job #3",
    time: 500
  }
];

const jobSchedule = schedule.reduce((prev,event)=>({
  ...prev,
  [event.description]:{
    ...prev[event.description],
    [event.event]:event.time
  }
}),{});

const updatedResult = Object.entries(jobSchedule).reduce((prev,entry)=>{
  const [key,value] = entry
  return ({
    ...prev,
    [key]:{
      ...value,
      DURATION: value['CLOCK OUT'] - value['CLOCK IN']
    }
  })
}
,{});

console.log(updatedResult);

Answer 2

If there will be a sequence of CLOCK IN and CLOCK OUT events for multiple jobs in your data, consider the following example:

const schedule = [
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "TRAVEL",
    description: "Job #1",
    time: 100
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #1",
    time: 150
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "BREAK",
    description: "Job #2",
    time: 250
  }, 
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #2",
    time: 350
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "HOME",
    description: "Job #3",
    time: 450
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "HOME",
    description: "Job #3",
    time: 500
  }
];

The above snapshot displays the CLOCK IN and CLOCK OUT events for three distinct jobs: Job #1, Job #2, and Job #3.

If you believe this is correct, then the subsequent code snippet should offer the desired outcome:

const jobSchedule = schedule.reduce((prev,event)=>({
  ...prev,
  [event.description]:{
    ...prev[event.description],
    [event.event]:event.time
  }
}),{})

This transforms the data into an object structured like this:

{
  'Job #1': { 'CLOCK IN': 100, 'CLOCK OUT': 150 },
  'Job #2': { 'CLOCK IN': 250, 'CLOCK OUT': 350 },
  'Job #3': { 'CLOCK IN': 450, 'CLOCK OUT': 500 }
}

We can further enhance each job item within that object by calculating the duration using the method below:

const updatedResult = Object.entries(jobSchedule).reduce((prev,entry)=>{
  const [key,value] = entry
  return ({
    ...prev,
    [key]:{
      ...value,
      DURATION: value['CLOCK OUT'] - value['CLOCK IN']
    }
  })
}
,{})

The result is as follows:

{
  'Job #1': {
    'CLOCK IN': 100,
    'CLOCK OUT': 150,
    DURATION: 50
  },
  'Job #2': {
    'CLOCK IN': 250,
    'CLOCK OUT': 350,
    DURATION: 100
  },
  'Job #3': {
    'CLOCK IN': 450,
    'CLOCK OUT': 500,
    DURATION: 50
  }
}

How does that appear to you?

See the functional example below:

const schedule = [
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "TRAVEL",
    description: "Job #1",
    time: 100
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #1",
    time: 150
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "BREAK",
    description: "Job #2",
    time: 250
  }, 
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "ON SITE",
    description: "Job #2",
    time: 350
  }, 
  {
    activity: "JOB",
    event: "CLOCK IN",
    task: "HOME",
    description: "Job #3",
    time: 450
  },
  {
    activity: "JOB",
    event: "CLOCK OUT",
    task: "HOME",
    description: "Job #3",
    time: 500
  }
];

const jobSchedule = schedule.reduce((prev,event)=>({
  ...prev,
  [event.description]:{
    ...prev[event.description],
    [event.event]:event.time
  }
}),{});

const updatedResult = Object.entries(jobSchedule).reduce((prev,entry)=>{
  const [key,value] = entry
  return ({
    ...prev,
    [key]:{
      ...value,
      DURATION: value['CLOCK OUT'] - value['CLOCK IN']
    }
  })
}
,{});

console.log(updatedResult);

Answer 3

Answer №2

In order to meet your requirements, it seems like you will need two distinct functions called isStartType() and isStopType(). These functions can utilize a simple switch case structure to return the desired value. Alternatively, if you are confident that unexpected types will not be received, you could potentially make do with just a single function like isStartType(). In this scenario, you would then need to adjust the line from a.action === 'start' to instead read isStartType(a['propertyName']).

Answer 4

In order to meet your requirements, it seems like you will need two distinct functions called isStartType() and isStopType(). These functions can utilize a simple switch case structure to return the desired value. Alternatively, if you are confident that unexpected types will not be received, you could potentially make do with just a single function like isStartType(). In this scenario, you would then need to adjust the line from a.action === 'start' to instead read isStartType(a['propertyName']).

Utilizing Array.reduce to Compute Time Discrepancy

Answer №1

Answer №2

Similar questions

The primary Android thread is obstructing the WebView thread

The useEffect function is not being executed

Making Monaco compatible with the integration of Vuejs and electron

Tips for incorporating setState with a nested JSON array object

Steps for implementing form loading with ajax

"Trigger jQuery animations on and off the screen, with the ability to

When attempting to pass a token in the header using AngularJS, I encounter an issue with my NodeJS server

Applying a CSS style to a division element

Accessing a key using Vuefire within a v-for loop

I am looking to dynamically assign an href attribute to a link using a variable within my script. How can I achieve

What is the best method to place files from a file input into an array in the Firefox browser?

When using nextjs, there is an issue that arises when attempting to define the property 'id' using context.params.id. This results in

Tips on preventing right-click actions in jqGrid

Concealing an element from a separate module

Leveraging $.ajax for fetching HTML and converting it into a JavaScript array

Refreshing a webpage post initial loading using Next.js

The API call for useState is coming back with a response of an array

React animation failing to render underline animation

Sharing an array between two sibling components

Execute JavaScript using Ajax technology