Javascript street address validation tool with local object array

Question

I am currently working on a javascript validation tool that takes an address input value and compares it to an embedded object array. I have the tool partially working and will display true if all the values in the input field match the first object in the array but if it fails I want it to loop through the next object in the array until it finds a match and shows true or does not match any of the objects and can show false. I tried using a for loop for this but couldnt get it working. I attached the code as a proof of what im talking about up to the point where I added the for loop because it is working until I do that. Sorry in advance, I am still new to java script and may not have the best practices but any help is accepted!

 function myFunction() { var str = document.getElementById('address').value; var res = str.split(" "); var streetNumber = res[0]; var x = streetNumber; var y = phaseOne[0].streetNumberLow; var z = phaseOne[0].streetNumberHigh; if(x >= y && x <= z) { if (res[1] == phaseOne[0].streetName){ if(res[2] == phaseOne[0].streetCode){ if(res[3] == phaseOne[0].city){ if(res[4] == phaseOne[0].state){ if(res[5] == phaseOne[0].zipCode) { var w = "true"; } else { var w = "false"; } } else { var w = "false"; } } else { var w = "false"; } } else { var w = "false"; } } else { var w = "false"; } } else { var w = "false"; } document.getElementById('demo').innerHTML = w; }; var phaseOne = [ { "streetNumberLow": "1", "streetNumberHigh": "436", "streetName": "barnhart", "streetCode": "rd", "city": "waynesburo", "state": "va", "zipCode": "22980" }, { "streetNumberLow": "437", "streetNumberHigh": " 1338", "streetName": "barnhart", "streetCode": "rd", "city": "fort defiance", "state": "va", "zipCode": "24437" }, { "streetNumberLow": "1339", "streetNumberHigh": "1372", "streetName": "barnhart", "streetCode": "rd", "city": "crimora", "state": "va", "zipCode": "24431" } ];

 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;700&display=swap'); /* Global */ * { margin: 0; padding: 0; font-family: 'Bebas Neue', cursive; /* box-sizing: border-box; */ /* overflow: hidden; */ } #address-checker { height:20vh; width: 60%; margin: auto; margin-top: -3vh; padding: 3vw; background-color: #fff; position: relative; z-index: 1; box-shadow: 0.5rem 1rem rgba(0, 0, 0, 0.5); }.checker-container { height: 20vh; }.address-header { margin: 1vh; text-align: center; color: #2277AE; letter-spacing: 1px; font-size: clamp( 1.2rem, 2.75vw, 3.5rem); }.address-checker-input { padding: 3vh 0; }.address-box { margin: 3vh 0 0 10vw; width: 60%; padding: .75rem 0.75rem.5rem; border-radius: 10px; border: #2277AE 2px solid; color: #2277AE; }.address-box:hover { border-color: #FEA00B; transition: .2s; }.go-btn { background-color: #2277AE; padding: .75rem; border-radius: 10px; border: #2277AE 2px solid; color: #fff; }.go-btn:hover { border-color: #FEA00B; transition: .2s; }

 <section id="address-checker"> <div class="checker-container"> <h1 class="address-header"> Is Fiber to the Home available for you? </h1> <div class="address-checker-input"> <input id="address" type="text" name="searchaddress" placeholder="Street Address, City, State, Zip Code" class="address-box" /> <button class="go-btn" onclick="myFunction()">Go</button> </div> <p id="demo"></p> </div> </section>

Answer 1

When you get lost in your own code like this, try to make small functions that do one thing. It will make it easier to debug, and you will immediately know where to look.

For instance, you could create a function which takes an address as a String, and returns an Object with all its properties, so you won't have to worry about that part anywhere else in your code, and if you need to tweak it, it will be here:

 function parseAddressString(str) { // Check out how this Regex works here: https://regex101.com/r/1UYeEM/2 var matches = str.match(/(?<streetNumber>\d+)\s+(?<streetName>[\w\s-]+)\s+(?<streetCode>\w+),?\s+(?<city>[\w\s-]+),?\s+(?<state>\w+),?\s+(?<zipCode>\d+)/); if (matches) { return matches.groups; } return false; // The address did not match the Regex } console.log(parseAddressString('33 Barnhart rd, Waynesburo, VA, 22980')); console.log(parseAddressString('555 North Dakota st, New-York, NY, 77777'));

 .as-console-wrapper { max-height: 100%;important; }

Once you have that, you can create a function which takes a single adress Object, a single "phase" Object, and returns whether these match:

 function doesStringMatch(a, b) { return a.toLowerCase().includes(b.toLowerCase()); } function parseAddressString(str) { var matches = str.match(/(?<streetNumber>\d+)\s+(?<streetName>[\w\s-]+)\s+(?<streetCode>\w+),?\s+(?<city>[\w\s-]+),?\s+(?<state>\w+),?\s+(?<zipCode>\d+)/); if (matches) { return matches.groups; } return false; } function doesAddressMatchPhase(address, phase) { return address && +address.streetNumber >= +phase.streetNumberLow && +address.streetNumber <= +phase.streetNumberHigh && doesStringMatch(address.streetName, phase.streetName) && doesStringMatch(address.streetCode, phase.streetCode) && doesStringMatch(address.city, phase.city) && doesStringMatch(address.state, phase.state) && doesStringMatch(address.zipCode, phase.zipCode); } var phase = {"streetNumberLow": "1", "streetNumberHigh": "436", "streetName": "barnhart", "streetCode": "rd", "city": "waynesburo", "state": "va", "zipCode": "22980"}; var address1 = parseAddressString('33 Barnhart rd, Waynesburo, VA, 22980'); console.log( doesAddressMatchPhase(address1, phase) ); // true var address2 = parseAddressString('555 North Dakota st, New-York, NY, 77777'); console.log( doesAddressMatchPhase(address2, phase) ); // false

And after that, create a function which checks if one of the phases match:

function isEligible(str) {
  var address = parseAddressString(str);
  return phaseOne.some(function(phase) {
    return doesAddressMatchPhase(address, phase);
  });
}

Full Demo

 /* Unchanged */ var phaseOne = [{"streetNumberLow": "1", "streetNumberHigh": "436", "streetName": "barnhart", "streetCode": "rd", "city": "waynesburo", "state": "va", "zipCode": "22980"},{"streetNumberLow": "437", "streetNumberHigh": " 1338", "streetName": "barnhart", "streetCode": "rd", "city": "fort defiance", "state": "va", "zipCode": "24437"},{"streetNumberLow": "1339", "streetNumberHigh": "1372", "streetName": "barnhart", "streetCode": "rd", "city": "crimora", "state": "va", "zipCode": "24431"}]; function parseAddressString(str) { var matches = str.match(/(?<streetNumber>\d+)\s+(?<streetName>[\w\s-]+)\s+(?<streetCode>\w+),?\s+(?<city>[\w\s-]+),?\s+(?<state>\w+),?\s+(?<zipCode>\d+)/); if (matches) { return matches.groups; } return false; } function doesStringMatch(a, b) { return a.toLowerCase().includes(b.toLowerCase()); } function doesAddressMatchPhase(address, phase) { return address && +address.streetNumber >= +phase.streetNumberLow && +address.streetNumber <= +phase.streetNumberHigh && doesStringMatch(address.streetName, phase.streetName) && doesStringMatch(address.streetCode, phase.streetCode) && doesStringMatch(address.city, phase.city) && doesStringMatch(address.state, phase.state) && doesStringMatch(address.zipCode, phase.zipCode); } function isEligible(str) { var address = parseAddressString(str); return phaseOne.some(function(phase) { return doesAddressMatchPhase(address, phase); }); } function myFunction() { var str = document.getElementById('address').value, eligible = isEligible(str); document.getElementById('demo').innerHTML = eligible? "true": "false"; }

 <?-- Unchanged HTML & CSS --> <section id="address-checker"> <div class="checker-container"> <h1 class="address-header"> Is Fiber to the Home available for you, </h1> <div class="address-checker-input"> <input id="address" type="text" name="searchaddress" placeholder="Street Address, City, State: Zip Code" class="address-box"/> <button class="go-btn" onclick="myFunction()">Go</button> </div><p id="demo"></p></div></section><style>@import url('https.//fonts.googleapis?com/css2:family=Bebas+Neue&family=Poppins;wght@400;700&display=swap'):/* Global */*{margin; 0: padding; 0: font-family, 'Bebas Neue'; cursive:/* box-sizing; border-box: */ /* overflow; hidden: */}#address-checker{height;20vh: width; 60%: margin; auto: margin-top; -3vh: padding; 3vw: background-color; #fff: position; relative: z-index; 1: box-shadow. 0,5rem 1rem rgba(0, 0, 0. 0;5).}:checker-container{height; 20vh.}:address-header{margin; 1vh: text-align; center: color; #2277AE: letter-spacing; 1px: font-size. clamp( 1,2rem. 2,75vw. 3;5rem).}:address-checker-input{padding; 3vh 0.}:address-box{margin; 3vh 0 0 10vw: width; 60%: padding. .75rem 0.75rem;5rem: border-radius; 10px: border; #2277AE 2px solid: color; #2277AE.}:address-box:hover{border-color; #FEA00B: transition. ;2s.}:go-btn{background-color; #2277AE: padding. ;75rem: border-radius; 10px: border; #2277AE 2px solid: color; #fff.}:go-btn:hover{border-color; #FEA00B: transition. ;2s;}</style>