'Get Total From a Chosen Array in ES6

I wanted to get the total productPrice from the chosenData array. I need to compare it from the mainData and only get its total value. My problem is that I'm getting undefined and how should I do it and is there a shorter way of doing it?

  const mainData = [
    {
        "id": "4324",
        "productName": "Apple",
        "productPrice": 250,
    },
    {
        "id": "656546b",
        "productName": "Banana",
        "productPrice": 500,
    },
    {
        "id": "5656",
        "productName": "Soup",
        "productPrice": 800,
    }
];

const chosenData = ['5656', '656546b']
  
  const newArray = chosenData.map((value, index) => ({
    productPrice: mainData.find((data) => data.id === value)
  }))


console.log(newArray.productPrice)


Solution 1:[1]

In your solution, newArray obtained through map is an array, and array does not have the attribute productPrice, therefore you got undefined.

You can filter out the object with matching id, then sum them up, ex:

mainData.filter(value=>chosenData.includes(value.id)).reduce((acc, cur)=>acc+cur.productPrice, 0)

Solution 2:[2]

map returns a new array and it does not skip any element. You can use reduce and inside the reduce callback, use find. If an element with same id is found in the maindData it will return the object otherwise undefined. If it is not undefined , then get the value and accumulate it.

const mainData = [{
    "id": "4324",
    "productName": "Apple",
    "productPrice": 250,
  },
  {
    "id": "656546b",
    "productName": "Banana",
    "productPrice": 500,
  },
  {
    "id": "5656",
    "productName": "Soup",
    "productPrice": 800,
  }
];

const chosenData = ['5656', '656546b']

const newArray = chosenData.reduce((acc, curr) => {

  const findById = mainData.find(item => item.id === curr);
  findById && (acc += findById.productPrice)
  return acc;

}, 0)


console.log(newArray)

Solution 3:[3]

Your newArray is an array. You can't access its property like newArray.productPrice. You want to compute a value from your newArray, so you can use reduce(). Building up on your code

const mainData = [
    {
        "id": "4324",
        "productName": "Apple",
        "productPrice": 250,
    },
    {
        "id": "656546b",
        "productName": "Banana",
        "productPrice": 500,
    },
    {
        "id": "5656",
        "productName": "Soup",
        "productPrice": 800,
    }
];

const chosenData = ['5656', '656546b']
  
  const newSum = chosenData.map((value, index) => ({
    productPrice: mainData.find((data) => data.id === value)
  })).reduce((agg,x) => {
  return agg + x.productPrice.productPrice
  },0);


console.log(newSum)

If you don't want to complicate with too many properties you can use this code:

const mainData = [
    {
        "id": "4324",
        "productName": "Apple",
        "productPrice": 250,
    },
    {
        "id": "656546b",
        "productName": "Banana",
        "productPrice": 500,
    },
    {
        "id": "5656",
        "productName": "Soup",
        "productPrice": 800,
    }
];

const chosenData = ['5656', '656546b']
  
  const newSum = chosenData.map((value, index) => mainData.find((data) => data.id === value).productPrice).reduce((agg,x) => agg + x,0);


console.log(newSum)

Solution 4:[4]

Because your newArray is an array of products filtered. Map returns an array. Probably try to reduce it to calculate the productPrice total or something. But the code is wrong at newArray.productPrice

Solution 5:[5]

You can reduce mainData and get totalPrice with O(n)

const mainData = [
    {
        "id": "4324",
        "productName": "Apple",
        "productPrice": 250,
    },
    {
        "id": "656546b",
        "productName": "Banana",
        "productPrice": 500,
    },
    {
        "id": "5656",
        "productName": "Soup",
        "productPrice": 800,
    }
];

const chosenData = ['5656', '656546b']
  
const totalPrice = chosenData.reduce((acc, {id, productPrice}) => {
    if (chosenData.includes(id)) {
        acc += productPrice;
    }
    return acc;
}, 0)


console.log(totalPrice)

Solution 6:[6]

I think it should be

const newArray = chosenData.map(value => mainData.find(data => data.id === value).productPrice)

console.log(newArray.productPrice)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kudo
Solution 2 brk
Solution 3
Solution 4 kaushik94
Solution 5 St1ggy
Solution 6 max