Alternative to multiple "if" statements?

Question

I am really new to HTML and Javascript. I would appreciate any help with the code I'm writing.

I am working on a calculator to display the distance between airports. The user will have five "text" inputs, so they will write airport codes, say MAD, JFK. The result will be the distance between Madrid and JFK. The user can add several airports, such as BCN MAD JFK ORD, and the result should be the total addition of all legs (result = BCN-MAD + MAD-JFK + JFK-ORD).

For my purpose, it is also important that the distances are indicated by me (therefore, I do not need to "calculate" the distances between the coordinates).

What I did was that I created variables called "leg1,2,3,4" that connect each airport, so leg1 could be, for example, "BCNMAD", and then using if I can get the distance for that leg. Finally, there is a variable totalDistance to add all the distances between the legs.

Since each leg must be calculated separately and added to the other legs, I copied the if for each individual leg.

Everything seems to be working fine, the problem is that I added only 8 airports. The actual requirement will be about 200 airports. And since each leg has its own if set, I could get about 800 IF.

I was wondering if there is a better way to do this? Also, I don't know if there is a limit on the number of if ?

As I said, I am very new to HTML and Javascript, so I am sure there are much better options for this, but I have been stuck with this problem for several days and this is the best solution I could come up with.

Therefore, any advice or help would be greatly appreciated. I have included the code below.

Regards, Mike

 function displayDistance() { var leg1 = {route:document.getElementById("air1").value + document.getElementById("air2").value , distance:""}; var leg2 = {route:document.getElementById("air2").value + document.getElementById("air3").value , distance:""}; var leg3 = {route:document.getElementById("air3").value + document.getElementById("air4").value , distance:""}; var leg4 = {route:document.getElementById("air4").value + document.getElementById("air5").value , distance:""}; if (leg1.route == "AGPMAD" || leg1.route == "MADAGP") {leg1.distance = 430;} if (leg1.route == "BCNMAD" || leg1.route == "MADBCN") {leg1.distance = 483;} if (leg1.route == "LHRMAD" || leg1.route == "MADLHR") {leg1.distance = 1246;} if (leg1.route == "CDGMAD" || leg1.route == "MADCDG") {leg1.distance = 1065;} if (leg1.route == "JFKMAD" || leg1.route == "MADJFK") {leg1.distance = 5777;} if (leg1.route == "ORDJFK" || leg1.route == "JFKORD") {leg1.distance = 1191;} if (leg1.route == "JFKMCO" || leg1.route == "MCOJFK") {leg1.distance = 1520;} if (leg1.route == "JFKIAD" || leg1.route == "IADJFK") {leg1.distance = 367;} if (leg2.route == "AGPMAD" || leg2.route == "MADAGP") {leg2.distance = 430;} if (leg2.route == "BCNMAD" || leg2.route == "MADBCN") {leg2.distance = 483;} if (leg2.route == "LHRMAD" || leg2.route == "MADLHR") {leg2.distance = 1246;} if (leg2.route == "CDGMAD" || leg2.route == "MADCDG") {leg2.distance = 1065;} if (leg2.route == "JFKMAD" || leg2.route == "MADJFK") {leg2.distance = 5777;} if (leg2.route == "ORDJFK" || leg2.route == "JFKORD") {leg2.distance = 1191;} if (leg2.route == "JFKMCO" || leg2.route == "MCOJFK") {leg2.distance = 1520;} if (leg2.route == "JFKIAD" || leg2.route == "IADJFK") {leg2.distance = 367;} if (leg2.route == "AGPMAD" || leg2.route == "MADAGP") {leg2.distance = 430;} if (leg3.route == "BCNMAD" || leg3.route == "MADBCN") {leg3.distance = 483;} if (leg3.route == "LHRMAD" || leg3.route == "MADLHR") {leg3.distance = 1246;} if (leg3.route == "CDGMAD" || leg3.route == "MADCDG") {leg3.distance = 1065;} if (leg3.route == "JFKMAD" || leg3.route == "MADJFK") {leg3.distance = 5777;} if (leg3.route == "ORDJFK" || leg3.route == "JFKORD") {leg3.distance = 1191;} if (leg3.route == "JFKMCO" || leg3.route == "MCOJFK") {leg3.distance = 1520;} if (leg3.route == "JFKIAD" || leg3.route == "IADJFK") {leg3.distance = 367;} if (leg4.route == "AGPMAD" || leg4.route == "MADAGP") {leg4.distance = 430;} if (leg4.route == "BCNMAD" || leg4.route == "MADBCN") {leg4.distance = 483;} if (leg4.route == "LHRMAD" || leg4.route == "MADLHR") {leg4.distance = 1246;} if (leg4.route == "CDGMAD" || leg4.route == "MADCDG") {leg4.distance = 1065;} if (leg4.route == "JFKMAD" || leg4.route == "MADJFK") {leg4.distance = 5777;} if (leg4.route == "ORDJFK" || leg4.route == "JFKORD") {leg4.distance = 1191;} if (leg4.route == "JFKMCO" || leg4.route == "MCOJFK") {leg4.distance = 1520;} if (leg4.route == "JFKIAD" || leg4.route == "IADJFK") {leg4.distance = 367;} var totalDistance = leg1.distance + leg2.distance + leg3.distance + leg4.distance; document.getElementById("distanceresult").innerHTML = totalDistance; } 

 <span>Route: </span> <input type="text" class="airinput" id="air1" value="" required=""/> <input type="text" class="airinput" id="air2" value="" required=""/> <input type="text" class="airinput" id="air3" value="" required=""/> <input type="text" class="airinput" id="air4" value="" required=""/> <input type="text" class="airinput" id="air5" value="" required=""/> <br/> <input type="button" onClick="displayDistance();" value="Calculate Distance"/><br/> <span>The total distance is: </span><span id="distanceresult"></span><br/> 

Answer 1

Instead of hard coding your data into a long set of conditional expressions, you'd better use an object. This is better suited to moving to a database-based solution that will be the way it is normally handled.

 var distances_ = { "AGPMAD": 430, "MADAGP": 430, "BCNMAD": 483, "LHRMAD": 1246, }; leg1.distance = distances_[ leg1.route ] ); 

If you are fully working with Javascript, you can use a JSON text file and an AJAX call instead of a database to completely remove distance data from your code.

Answer 2

There is no need to duplicate each block of if , you must include them in the function, and then do something like this:

 function getLegDistance(route) { if (route == "AGPMAD" || route == "MADAGP") return 430; if (route == "BCNMAD" || route == "MADBCN") return 483; if (route == "LHRMAD" || route == "MADLHR") return 1246; if (route == "CDGMAD" || route == "MADCDG") return 1065; if (route == "JFKMAD" || route == "MADJFK") return 5777; if (route == "ORDJFK" || route == "JFKORD") return 1191; if (route == "JFKMCO" || route == "MCOJFK") return 1520; if (route == "JFKIAD" || route == "IADJFK") return 367; } var totalDistance = getLegDistance(leg1.route) + getLegDistance(leg2.route) + getLegDistance(leg3.route) + getLegDistance(leg4.route) 

Thus, you have only one block of if , and you can call it for each of your routes. You can also use the switch instead of all if , but it will not reduce the number of lines (this will improve your performance), so the object / map is likely to be better.

Answer 3

Use the switch.

Here's a link:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Example:

 switch (expression) { case value1: //Statements executed when the result of expression matches value1 [break;] case value2: //Statements executed when the result of expression matches value2 [break;] ... case valueN: //Statements executed when the result of expression matches valueN [break;] default: //Statements executed when none of the values match the value of the expression [break;] } 

Answer 4

This is definitely an interesting issue! I worked a bit on the solution. I saw a lot of duplication in airport codes and realized how this could happen because of this. They can be either MADAGP or AGPMAD. It is good practice for your data structures to inform your code, not your code, how you store your data. You can store all the data of your airport in the object and refer to this object to get the distance. I saw a common template, it can be either [key][value] or [value][key] . To solve this problem, I used the lodash forEach function . You can see here in the violin it all works! Please let me know if you have questions :)

 function displayDistance() { var routes = { MAD: { AGP: 430, BCN: 483, LHR: 1246, CDG: 1065, JFK: 5777, }, JFK: { ORD: 1191, MCO: 1520, IAD: 367, MAD: 5777, } }; var leg1 = { departingCity: document.getElementById("air1").value, arrivalCity: document.getElementById("air2").value, }; var leg2 = { departingCity: document.getElementById("air2").value, arrivalCity: document.getElementById("air3").value, }; var leg3 = { departingCity: document.getElementById("air3").value, arrivalCity: document.getElementById("air4").value, }; var leg4 = { departingCity: document.getElementById("air4").value, arrivalCity: document.getElementById("air5").value, }; function getDistance(departingCity, arrivalCity, routes) { var distance _.forEach(routes, function(_value, key) { if(departingCity === key) { distance = routes[departingCity][arrivalCity] } else if (arrivalCity === key) { distance = routes[arrivalCity][departingCity] } }); return distance }; var totalDistance = getDistance(leg1.departingCity, leg1.arrivalCity, routes) + getDistance(leg2.departingCity, leg2.arrivalCity, routes) + getDistance(leg3.departingCity, leg3.arrivalCity, routes) + getDistance(leg4.departingCity, leg4.arrivalCity, routes) document.getElementById("distanceresult").innerHTML = totalDistance; } 

Answer 5

This is how I would approach this problem.

First create a data structure that contains each of the distances. For this, I made the following assumptions:

• That the distance from airport 1 to airport 2 always matches the distance from airport 2 to airport 1 for all possible airports in the data set.

• That the distance from any airport to any other airport in the data set can be defined as a single constant number.

In JavaScript, this data structure can be expressed as follows (although you can better store this as a JSON object):

 var routes = { BCN: { MAD: 483 }, JFK: { MAD: 5761, BCN: 6150 }, LHR: { MAD: 1244, BCN: 1148, JFK: 5539 }, ORD: { MAD: 6744, BCN: 7093, JFK: 1188, LHR: 6343 } }; 

Note that each property refers to each property above it and the root register "MAD", but not lower. This eliminates the redundancy of having to store each value twice. It also makes it easier to add additional data, since you only need to add the definition and distances for each subsequent airport without having to change previous data.

Now you just need a function to read this data structure. This basic one seems quite adequate:

 function getDistance (airport1, airport2) { if (routes [airport1] && routes [airport1][airport2]) return routes [airport1][airport2]; if (routes [airport2] && routes [airport2][airport1]) return routes [airport2][airport1]; return null; } 

Depending on your requirements, you may need to configure a falling case return null; but otherwise it should suit your needs.