How to get the average data with array function?

Question

I'm a newbie for javascript. I have two variable, one is Ax2 and the other is Ay2, they will be constantly updated, I want to get the average of their latest refreshed 10 profiles, so I tried this, but it didn't work, can anyone help me?

var Ax2 = 0
var Ay2 = 0 
connection.on("ReceiveMessage", function (target) {
    Ax2 = `${target} `
   document.getElementById('Ax2').textContent = Ax2 ;
});
connection.on("ReceiveMessage2", function (target2) {   
    Ay2 = `${target2} ` * -1
    document.getElementById('Ay2').textContent = Ay2 ;
});

let arr1 = new Array(10);
let arr2 = new Array(10);

function ArrayAvg1(arr1) {
    var i = -1, summ = 0, ArrayLen1 = arr1.length;
    while (i < ArrayLen1) {
        arr1.push(Ax2)
        summ = summ + arr1[i++];
    }
    return summ / ArrayLen1;   
}
function ArrayAvg2(arr2) {
    var i = -1, summ = 0, ArrayLen2 = arr2.length;
    while (i < ArrayLen2) {
        arr2.push(Ay2)
        summ = summ + arr2[i++];
    }
    return summ / ArrayLen2;
}
var AX_after_correction = Ax2 - ArrayAvg1(arr1)
var AY_after_correction = Ay2 - ArrayAvg2(arr2)
var AX_after_correction = document.getElementById('AX_after_correction')
var AY_after_correction = document.getElementById('AY_after_correction')

@VMT I didn't put this part , I've confirmed externally that they're global variables. Do I need to make up for it? — umr, May 19 '22 at 07:18
you just post a part relative with Ax2, Ay2 such as declare variable — VMT, May 19 '22 at 07:21

score 0 · Answer 1 · answered May 19 '22 at 08:10

Try this code below:

var Ax2 = 0;
var Ay2 = 0;
let arrR = new Array(10);

connection.on("ReceiveMessage", function (;target) {
    Ax2 = `${target} `
   document.getElementById('Ax2').textContent = Ax2 ;
});
connection.on("ReceiveMessage2", function (target2) {   
    Ay2 = `${target2} ` * -1
    document.getElementById('Ay2').textContent = Ay2 ;
});

function ArrayAvg1(arr, val) {
  arr.push(val)
  let count = 0
  let numOr0 = n => isNaN(n) ? 0 : n
  arr.forEach(num => (typeof num) && count++)
  let sum = arr.reduce((a, b) => numOr0(a) + numOr0(b))
    return sum / count;   
}


var AX_after_correction = Ax2 - ArrayAvg1(arrR, Ax2)
var AY_after_correction = Ay2 - ArrayAvg1(arrR, Ay2)
var AX_after_correction = document.getElementById('AX_after_correction')
var AY_after_correction = document.getElementById('AY_after_correction')

But i think arrR will be return new Array(10) each times re-run code.

Which framework you use to build app?

Unfortunately, after the operation, the AX_after_correction value I get will be NaN, and I think your code will already be the best way I have tried... — umr, May 20 '22 at 03:22

score 0 · Answer 2 · answered May 19 '22 at 08:39

I'm not sure what you're trying to achieve but:

you should pay attention to your variables naming as it gets hard to read and thus, to understand
try not to clutter your example with unnecessary information: you have ArrayAvg1 and 2 doing the same thing, the 'connection' part is not needed either etc...
you should avoid using var and go for either let or const,

That being said, assuming you have an array of numbers, there are a few ways to get the average value.

AFAIC, I would go for this one:

const average = (array) => array.reduce((a, b) => a + b) / array.length;

The array.reduce() function can be hard to understand at first... Here, it's walking the array and summing each current value binto the accumulator a, and returns the sum.

const average = (array) => ...;

This notation lets you declare an arrow function that takes an array as a parameter.

array.reduce((a, b) => a + b) / array.length is basically returning the sum of the values of the array divided by the array's length.

As for what you're doing

var Ax2 = 0 // updated on an event

let arr1 = new Array(10);

function ArrayAvg1(arr1) {
    var i = -1, summ = 0, ArrayLen1 = arr1.length; 
    while (i < ArrayLen1) {
        arr1.push(Ax2) // you're pushing Ax2 10 times ? 
        summ = summ + arr1[i++]; // this is weird
    }
    return summ / ArrayLen1;   
}

As I don't really understand what's your goal, I can't help you further.

What I want to do is to collect two pieces of data after loading the html page, get the lastest 10 data, and get its average, and then do some simple calculations of the rest, I think my focus is on how to collect variables, record it, and calculate the average of the last 10 data. — umr, May 20 '22 at 03:28
If it doesn't depend on user input (just the load) you could try to wait for the [load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event to gather your data, calculate avg the way I did in my answer, and put it into a [queue](https://medium.com/nerd-for-tech/implementing-the-queue-data-structure-using-an-array-in-javascript-a39bc2c8ca45) to only have the last 10. — johnnyBoy, May 26 '22 at 22:09

How to get the average data with array function?

2 Answers2