How to use reduce function to find the value of field inside an array of Objects?

Question

Here is an object of 3 forms formA, formB, formC in which form A and B are objects and formC is an array of objects which can have multiple objects

const object: {
    "formA": {
        "details": {},
        "isRouteUser": false,
        "province": "ON",
        "prelabel": 10,
        "users": [
            {
                "age": 0
            }
        ]
    },
    "formB": {
        "line11": 0,
        "line12": 0,
        "line150_1": 0
    },
    "formC": [
        {
            "price": 0,
            "details": [
                {
                    "subItemPrice": 0
                }
            ]
        }
    ]
}

I am using the function to find the value of the fields inside the forms

    const getValue = (object, keys) => keys.split('.').reduce((o, k) => (o || {})[k], object);

const key1 = formB.line11
const key2 = formC[0].price
const key3 = formC[0].details[0].subItemPrice

I am using this function to get the value

const formValue = getValue(object,key1)

case 1: key 1 worked well

case 2: key2 - works on the selected index it should work for every index of the array

case 3: key3 - failed

do you have a typo where it should be key2 and key3 not key 2 and key 3? — miyav miyav, Apr 11 '22 at 17:04
https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-and-arrays-by-string-path check out this question — miyav miyav, Apr 11 '22 at 17:06
Your getValue function will only work with dot separated strings, like "formB.line11". Anything that has square brackets to refer to array elements won't work. — James, Apr 11 '22 at 17:06
@James I am using it for yup package in which formC[0].price and formC.0.price both the keys works — Akshay Kumar, Apr 11 '22 at 17:53
`formC.0.price` will probably work, but I doubt `formC[0].price` will. Did you try with dots separating the index? — James, Apr 11 '22 at 18:06

score 2 · Answer 1 · answered Apr 11 '22 at 18:12

The reduce() iterates through the list of array elements and executes the callback function after each iteration ie) it returns the result of the previous iteration as an argument for the next iteration. Reduce function gives a single value as the final result.

const numbers = [5, 10, 15];

document.getElementById("demo").innerHTML = numbers.reduce(sumOfNumbers);

function sumOfNumbers(total, num) {
  return total + num;
}

<!DOCTYPE html>
<html>
<body>

<p>Sum of numbers in an array</p>

<p id="demo"></p>
</body>
</html>

Here, initially, the numbers[0] get passed to the function and checked for the prior result, if no result is found it returns numbers[0] as a result.

In the next iteration, sumOfNumbers(5, 10) is called. Here, 5 is the result of the preceding iteration and 10 is the 2nd element in the array.

Finally, reduce() iterates each element in an array and returns a single value as the final result. In this case, the final result is the sum of elements in the array.

How to use reduce function to find the value of field inside an array of Objects?

1 Answers1