Adding elements in an array depending on the values in a separate array

Question

Adding elements in an array depending on the values in a separate array

I am currently working on a task that involves summing values in an array of objects based on the Ids present in another array within the same object. Let's assume I have the following queryArray:

const queryArray = [ "1" , "2" ]

and this is the services array from which I would like to sum the fees property values if their Id matches with queryArray:

const services = [
  {
    Id: "1",
    services: "Early Check-In",
    fees: "7500"
  },
  {
    Id: "2",
    services: "Late Checkout",
    fees: "7500"
  },
  {
    Id: "3",
    services: "Airport Chauffeur",
    fees: "25000"
  }
]

So, I want to calculate the total sum of the fees property value in the services array by matching the Ids available in the queryArray. For example, when using the queryArray:

[ "1" , "2" ]

The expected result should be:

If we use:

[ "1" , "3" ]

The expected result would be:

And for:

[ "1", "2" , "3"]

The expected result should be:

As a beginner in javascript, I am struggling to find a solution or even know where to start. Any guidance or suggestion would be greatly appreciated.

javascript arrays algorithm

Answer 1

Answer №1

Of course, start by using the filter function to sort through the services you require -> Then apply the map function to each service to retrieve its value -> Finally, utilize the reduce function to condense the list into a single number by summing up all elements:

const services = [
  {
    Id: "1",
    services: "Early Check-In",
    fees: "7500"
  },
  {
    Id: "2",
    services: "Late Checkout",
    fees: "7500"
  },
  {
    Id: "3",
    services: "Airport Chauffeur",
    fees: "25000"
  }
]
const ids = ["1" , "2"]

console.log(
  services
    .filter(({Id}) => ids.includes(Id))
    .map(({fees}) => parseFloat(fees))
    .reduce((acc, fees) => acc + fees, 0)
  
)

Answer 2

Of course, start by using the filter function to sort through the services you require -> Then apply the map function to each service to retrieve its value -> Finally, utilize the reduce function to condense the list into a single number by summing up all elements:

const services = [
  {
    Id: "1",
    services: "Early Check-In",
    fees: "7500"
  },
  {
    Id: "2",
    services: "Late Checkout",
    fees: "7500"
  },
  {
    Id: "3",
    services: "Airport Chauffeur",
    fees: "25000"
  }
]
const ids = ["1" , "2"]

console.log(
  services
    .filter(({Id}) => ids.includes(Id))
    .map(({fees}) => parseFloat(fees))
    .reduce((acc, fees) => acc + fees, 0)
  
)

Answer 3

Answer №2

Verify if the identifier is part of the identification array within the reducer:

const amenities = [
  {
    Id: "1",
    serviceType: "Early Check-In",
    cost: "7500"
  },
  {
    Id: "2",
    serviceType: "Late Checkout",
    cost: "7500"
  },
  {
    Id: "3",
    serviceType: "Airport Chauffeur",
    cost: "25000"
  }
]

const selectionArray = [ "1" , "2" ]

const result = amenities.reduce((totalCost, currentService) => selectionArray.includes(currentService.Id) ? totalCost += +currentService.cost : totalCost, 0)

console.log(result)

Answer 4

Verify if the identifier is part of the identification array within the reducer:

const amenities = [
  {
    Id: "1",
    serviceType: "Early Check-In",
    cost: "7500"
  },
  {
    Id: "2",
    serviceType: "Late Checkout",
    cost: "7500"
  },
  {
    Id: "3",
    serviceType: "Airport Chauffeur",
    cost: "25000"
  }
]

const selectionArray = [ "1" , "2" ]

const result = amenities.reduce((totalCost, currentService) => selectionArray.includes(currentService.Id) ? totalCost += +currentService.cost : totalCost, 0)

console.log(result)

Answer 5

Answer №3

Another approach is to utilize the reduce method, where you iterate through each entry and check if the Id matches any value in the queryArray. If there's a match, add the current fees to the running total.

Initialize the starting value as 0.

const services = [{
    Id: "1",
    services: "Early Check-In",
    fees: "7500"
  },
  {
    Id: "2",
    services: "Late Checkout",
    fees: "7500"
  },
  {
    Id: "3",
    services: "Airport Chauffeur",
    fees: "25000"
  }
]

const queryArray = ["1", "2"]

let res = services.reduce(
  (total, curr) => queryArray.includes(curr.Id) ? total + parseInt(curr.fees, 10) : total,
  0
);
console.log(res);

Answer 6

Another approach is to utilize the reduce method, where you iterate through each entry and check if the Id matches any value in the queryArray. If there's a match, add the current fees to the running total.

Initialize the starting value as 0.

const services = [{
    Id: "1",
    services: "Early Check-In",
    fees: "7500"
  },
  {
    Id: "2",
    services: "Late Checkout",
    fees: "7500"
  },
  {
    Id: "3",
    services: "Airport Chauffeur",
    fees: "25000"
  }
]

const queryArray = ["1", "2"]

let res = services.reduce(
  (total, curr) => queryArray.includes(curr.Id) ? total + parseInt(curr.fees, 10) : total,
  0
);
console.log(res);

Adding elements in an array depending on the values in a separate array

Answer №1

Answer №2

Answer №3

Similar questions

Error: Property 'onclick' cannot be set on a null object

Tips for canceling an http request in angularjs when the requesting controller has exited its scope

Displaying JavaScript Countdown in PHP Table

Iterating over objects within a nested array using ng-repeat

Adding a cell break line within AG-GRID in an Angular application

When embedding HTML inside an Angular 2 component, it does not render properly

How do I navigate to a different page in Vue.js HTML based on user selection?

Having trouble with the image compressor not being imported correctly in Next.js?

Issues encountered with the v-model functionality in a Laravel and Vue.js integrated to-do list

How can I use jQuery to switch the positions of two <div> elements in HTML based on the selection of a dropdown value?

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

How can I ensure that all row checkboxes are automatically marked as checked upon loading the Material Table in ReactJS?

Tips for passing arguments to event handlers in React JS

What is the best method for retrieving multiple json_encode PHP outputs through Ajax?

Troubleshooting issue with DOM not refreshing after making a $http POST request in a MEAN

Elevate javascript

Step-by-step guide for building and populating a JavaScript Dictionary

Unexpected results occur when accessing data in $uibModal.open() within Angular JS causing it to

Setting up node.js for angular - serving static files with connect.static and running unit tests

Hover over to disable inline styling and restore default appearance