Why is my array reduce function return NaN?

Question

I have two arrays, one array has just attributes like y in the array which contains random numbers yIsGiven() and one array, which is equal to the first array but with the one difference, that in this time all my attributes are y except for one, there is one z, also with random numbers zIsGiven().

My goal is to count all of them together, on my first array it works perfectly, but in my second array it doesn't work just because I changed one y attribute to z and I get NaN.

I want to sum all values in my array up, how can i do this with zIsGiven()?

My app.component.html:

<h4>My array is in total:</h4>
<p>{{yIsGiven()}}</p>

<h4>But if I change my attribute from y to z I get:</h4>
<p>{{zIsGiven()}}</p>

My app.component.ts:

yIsGiven() {
    var temp = [
      {
        name: "Agency",
        y: 110, /* All attributes are y */
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        y: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        y: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.y;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

  zIsGiven() {
    var temp = [
      {
        name: "Agency",
        z: 110 /* For example this is now z and not y */,
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        y: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        y: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.y;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

I just can't sum up all values in my array if I just change one value but what if I have different attributes in my array which I want to sum up? It just doesn't work with array reduce, or I just can't figure it out.

I would appreciate every help, thank you!

Working: https://stackblitz.com/edit/angular-ivy-tanetr?file=src%2Fapp%2Fapp.component.html

Best regards

WilsonPena · Accepted Answer · 2021-04-01 15:15:47Z

1

One of the variables in the array has the y property undefined, you can do this:

var reduced = temp
  .map(function(obj) {
    return obj.y;
  })
  .reduce(function(a, b) {
    if (b === undefined) return a;
    return a + b;
  }, 0);

to fix the error.

answered Apr 1, 2021 at 15:15

WilsonPena

1,5912 gold badges23 silver badges39 bronze badges

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

1 Comment

Oktay Özdemir Over a year ago

Thank you for your answer, that was what I was searching for. Works perfect!

umadik · Accepted Answer · 2021-04-01 15:11:02Z

Change zIsGiven to this:

    zIsGiven() {
    var temp = [
      {
        name: "Agency",
        z: 110 /* For example this is now z and not y */,
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        z: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        z: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.z;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

JorgeeFG · Accepted Answer · 2021-04-01 15:14:32Z

0

If you look at the objects definition, the first one has a z property, the others have y property.

And since one is undefined (as you are requesting obj.y) undefined plus a number gives you NaN

You can check that by console.log(reduced) after commenting out .reduce()

answered Apr 1, 2021 at 15:14

JorgeeFG

6,06114 gold badges65 silver badges103 bronze badges

1 Comment

Oktay Özdemir Over a year ago

Thanks for the nice explain now I finally understood the problem!

Collectives™ on Stack Overflow

Why is my array reduce function return NaN?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related