JavaScript: Writing multiple functions with Array method

Question 1

I need help with writing multiple, repetitive functions into a one function that passes in variables instead of having to write it over and over again.

Currently, I have JavaScript functions that do the same thing, just with a different variable and strings.

var Apple_Data = Info.Apple; // grabs string objects from JSON file
var Banana_Data = Info.Banana; // grabs string objects from JSON file
function CompareApple() {
 if (counter == 0) {
 prev_Apple_Data = Apple_Data;
 }
 if (Apple_Data > prev_Apple_Data) {
 if ((Math.abs(Apple_Data - prev_Apple_Data) >= prev_Apple_Data / 2))
 document.getElementById("Apple_img").src = "img/yelow.png",
 StartCnt(1);
 else if ((Math.abs(Apple_Data - prev_Apple_Data) <= prev_Apple_Data / 2))
 document.getElementById("Apple_img").src = "img/green.png";
 }
 else if (Apple_Data < prev_Apple_Data) {
 if ((Math.abs(Apple_Data - prev_Apple_Data) >= prev_Apple_Data / 2))
 document.getElementById("Apple_img").src = "img/yelow.png",
 StartCnt(1);
 else if ((Math.abs(Apple_Data - prev_Apple_Data) <= prev_Apple_Data / 2))
 document.getElementById("Apple_img").src = "img/green.png";
 }
 prev_Apple_Data = Apple_Data;
}
function CompareBanana() {
 if (counter == 0) {
 prev_Banana_Data = Banana_Data;
 }
 if (Banana_Data > prev_Banana_Data) {
 if ((Math.abs(Banana_Data - prev_Banana_Data) >= prev_Banana_Data / 2))
 document.getElementById("Banana_img").src = "img/yelow.png",
 StartCnt(1);
 else if ((Math.abs(Banana_Data - prev_Banana_Data) <= prev_Banana_Data / 2))
 document.getElementById("Banana_img").src = "img/green.png";
 }
 else if (Banana_Data < prev_Banana_Data) {
 if ((Math.abs(Banana_Data - prev_Banana_Data) >= prev_Banana_Data / 2))
 document.getElementById("Banana_img").src = "img/yelow.png",
 StartCnt(1);
 else if ((Math.abs(Banana_Data - prev_Banana_Data) <= prev_Banana_Data / 2))
 document.getElementById("Banana_img").src = "img/green.png";
 }
 prev_Banana_Data = Banana_Data;
}

If I want to write these in 1 function that passes in variables instead, how will I do it? I was thinking the process would be something such as, having to make 4 different empty arrays

Var PreviousData = []; 
Var CurrentData = [];
Var DeclaredData = []; 
Var ImageArray = [];

and then write a function that passes in these arrays

function Compare(PreviousData, CurrentData, DeclaredData, ImageArray){ 
 if (counter ==0){
 PreviousData = DeclaredData; 
 }
 if (Declared_Data > PreviousData) {
 if ((Math.abs(Declared_Data - PreviousData) >= PreviousData / 2))
 document.getElementById("ImageArray").src = "img/yellow.png",
 StartCnt(1);
 else if ((Math.abs(Declared_Data - PreviousData) <= PreviousData / 2))
 document.getElementById("ImageArray").src = "img/green.png";
 }
 else if (Declared_Data < PreviousData) {
 if ((Math.abs(Declared_Data - PreviousData) >= PreviousData / 2))
 document.getElementById("ImageArray").src = "img/yellow.png",
 StartCnt(1);
 else if ((Math.abs(Declared_Data - PreviousData) <= PreviousData / 2))
 document.getElementById("ImageArray").src = "img/green.png";
 }
}

the counter and the Math.abs is written there to loop through objects and currently works.

and then initialize the function by something like

Compare(previousData, info.Apple, DeclaredData, ImageArray);

Question 2

You can simplify your code to this:

var infoUpd = {
 'prev': false
};
for (key in Info) {
 infoUpd[ key ] = {
 'data': Info[ key ],
 'img': document.getElementById(key+"_img")
 }
}
function compareStuff( key ) {
 var stuffData = infoUpd[ key ];
 if ( infoUpd.prev ) {
 var calcResult = Math.abs(stuffData.data - infoUpd.prev) >= (infoUpd.prev / 2);
 if (stuffData.data !== infoUpd.prev) {
 if ( calcResult ) {
 stuffData.img.src = "img/yelow.png";
 } else {
 stuffData.img.src = "img/green.png";
 }
 }
 }
 infoUpd.prev = stuffData.data; 
}
compareStuff( 'Apple' );
compareStuff( 'Banana' );

Question 3

This may be a silly question but, on the function compareStuff(stuffData), you're passing in the "stuffData" as a varible ? Where do you declare this? Also, when the Apple_Data is declared as var Apple_Data, where do you put this inside the function of function compareStuff?

Question 4

Yes, as a variable. I declare Apple_Data at the top of the script with var Apple_Data. Then at the bottom I call compareStuff function passing Apple_Data to it. In the scope of compareStuff function I refer to whatever is passed to this function as stuffData. You can change it to whatever you like, you don't need to keep same name, if you pass something to a function explicitly, as argument. But if you refer to something, that lives outside that function, you will refer to it by the exact name, like I do with e.g. imgSrc property of the passed object.

Question 5

I must be doing something wrong, when I print these out by using document.getElementById("compareStuff").innerHTML = Apple_Data, it is only printing out [object] ...

Question 6

Change it to document.getElementById("compareStuff").innerHTML = Apple_Data.data

Question 7

Perfect. Thank you very much. May I please ask , when you declared the variables, why is prev:false, necessary ?

Question 8

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. You can use this properties to accomplish your complete work.
Lets have a look with different example:

function setBackgroundColor(element, color = 'rosybrown') {
 element.style.backgroundColor = color;
}
setBackgroundColor(someDiv); // color set to 'rosybrown'
setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too
setBackgroundColor(someDiv, 'blue'); // color set to 'blue'

Here i use a function setBackgroundColor to style the background color of element. You can do it for your purpose.

For more details visit default_parameters

Question 9

Can you please clarify what browsers currently support this functionality?

Question 10

@NikolayErmakov, from where the "browsers currently support this functionality?" comes??, its just an example how axchink can do this job.

Question 11

I afraid what the functionality you suggest can hardly help him do his job due to a very limited browser support at this time. You will notice that if you scroll the page you linked to the bottom. Or can he do this outside a browser?

Nikolay Ermakov 5,0712 gold badges14 silver badges19 bronze badges · Accepted Answer · 2016-02-14 04:44:09Z

1

You can simplify your code to this:

var infoUpd = {
 'prev': false
};
for (key in Info) {
 infoUpd[ key ] = {
 'data': Info[ key ],
 'img': document.getElementById(key+"_img")
 }
}
function compareStuff( key ) {
 var stuffData = infoUpd[ key ];
 if ( infoUpd.prev ) {
 var calcResult = Math.abs(stuffData.data - infoUpd.prev) >= (infoUpd.prev / 2);
 if (stuffData.data !== infoUpd.prev) {
 if ( calcResult ) {
 stuffData.img.src = "img/yelow.png";
 } else {
 stuffData.img.src = "img/green.png";
 }
 }
 }
 infoUpd.prev = stuffData.data; 
}
compareStuff( 'Apple' );
compareStuff( 'Banana' );

Share

Improve this answer

edited Feb 15, 2016 at 2:57

answered Feb 14, 2016 at 4:44

Nikolay Ermakov's user avatar

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

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

15 Comments

axchink

axchink Over a year ago

This may be a silly question but, on the function compareStuff(stuffData), you're passing in the "stuffData" as a varible ? Where do you declare this? Also, when the Apple_Data is declared as var Apple_Data, where do you put this inside the function of function compareStuff?

2016年02月14日T04:49:15.64Z+00:00

Nikolay Ermakov

Nikolay Ermakov Over a year ago

Yes, as a variable. I declare Apple_Data at the top of the script with var Apple_Data. Then at the bottom I call compareStuff function passing Apple_Data to it. In the scope of compareStuff function I refer to whatever is passed to this function as stuffData. You can change it to whatever you like, you don't need to keep same name, if you pass something to a function explicitly, as argument. But if you refer to something, that lives outside that function, you will refer to it by the exact name, like I do with e.g. imgSrc property of the passed object.

2016年02月14日T04:52:36.4Z+00:00

axchink

axchink Over a year ago

I must be doing something wrong, when I print these out by using document.getElementById("compareStuff").innerHTML = Apple_Data, it is only printing out [object] ...

2016年02月14日T05:38:53.743Z+00:00

Nikolay Ermakov

Nikolay Ermakov Over a year ago

Change it to document.getElementById("compareStuff").innerHTML = Apple_Data.data

2016年02月14日T05:41:34.607Z+00:00

axchink

axchink Over a year ago

Perfect. Thank you very much. May I please ask , when you declared the variables, why is prev:false, necessary ?

2016年02月14日T05:44:41.933Z+00:00

|

CollectivesTM on Stack Overflow

JavaScript: Writing multiple functions with Array method

2 Answers 2

15 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

15 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related