-2

I'm trying to check user input value against two or arrays to see if the value inputed by the user equals a value in one of the arrays. Based on which array the input value equals to, I want to display a specific alert message.

So far I have this:

var zip = document.getElementById('zip').value;
var zone1 = ['11220', '11223', '11224', '11225', '11226','11228'];
var zone2 = ['10038', '10001'];

So if the user enters ZIP code 11220, I would like to display a message: "Price: $50". If the user enters 10038, I would like the message "Price: $75".

What's the easiest and most efficient way to do this?

5 Answers5

1

I had a similar task recently that I solved like this.

Adjust the code to do what you need to whatever element in the function passed to forEach.

var zone1 = ['11220', '11223', '11224', '11225', '11226','11228'],
    zone2 = ['10038', '10001'],
    zones = [[zone1, 50], [zone2, 75], ]
                .map(([zone, price]) => [new Set(zone), price]);

var userValue = '11220';

zones
    .filter(([zone, price]) => zone.has(userValue))
    .map(([zone, price]) => price)
    .forEach((price) => console.log(`Price: $${price}`))

var userValue = '10001';

zones
    .filter(([zone, price]) => zone.has(userValue))
    .map(([zone, price]) => price)
    .forEach((price) => console.log(`Price: $${price}`))

//Handle bad values, too, by defining a function
function getPrices(value){
    return zones
         .filter(([zone, price]) => zone.has(value))
         .map(([zone, price]) => price)
}
var someNonExistentValue = 'xxx';
results = getPrices(someNonExistentValue);
if (results.length){
    results.forEach(foundItem => console.log(foundItem));
} else {
    console.log('No items found!');
}

OUTPUT:

Price: $50

Price: $75

No items found!

Community
  • 1
  • 1
dmmfll
  • 2,666
  • 2
  • 35
  • 41
  • Hi! thanks for the help! This is very neat solution. I'd like to display some message when the user enters a value that is not in the array of zips codes...I can achieve that pretty easily with a indexOf search through an array, but I'm not sure how to apply that same concept when we're mapping arrays... Any ideas? – Farrukh Karimov Dec 18 '18 at 19:09
  • I added some code at the end that demonstrates a way to handle no results found. – dmmfll Dec 18 '18 at 23:06
  • Thank you so much! Any way to make that "no item found" part run only if the input.length = 5? Since ZIP codes are 5-digits, I don't want to run the code until 5 characters are entered. TIA! – Farrukh Karimov Dec 19 '18 at 00:50
  • You can check the length of the user's entry with `userEntry.length`. When `userEntry.length === 5` run the code you want to run. – dmmfll Dec 19 '18 at 17:22
0

You need to Google questions and try to form your own solution. Only when you have an persistent error in your code should you ask about it. Here's a freebie:

if(zone1.indexOf(zip)!==-1){alert("Price: $50");}
elseif(zone2.indexOf(zip)!==-1){alert("Price: $75");}
Maciek Semik
  • 1,872
  • 23
  • 43
0

If you want most efficient, then you should not work with arrays, but with a plain object, keyed by the zip codes (or use a ES6 Map):

var zones = {
  11220: 1, 11223: 1, 11224: 1, 11225: 1, 11226: 1, 11228: 1,
  10038: 2, 10001: 2
};
var messages = ["Unknown", "Price $50", "Price $75"];

var zip = document.getElementById('zip');
var msg = document.getElementById('msg');

zip.oninput = function() {
    msg.textContent = messages[zones[this.value] || 0]; 
};
Zip: <input id="zip">
<div id="msg"></div>
trincot
  • 317,000
  • 35
  • 244
  • 286
0

Try this

var zip = document.getElementById('zip').value;
var zone1 = ['11220', '11223', '11224', '11225', '11226','11228'];
var zone2 = ['10038', '10001']


if(zone1.includes(zip))
    alert("Price: $50");
else if (zone2.includes(zip))
    alert("Price: $75");
0

You can simply use Array.prototype.indexOf method to check if a value exists as an array element.

var zone1 = ['11220', '11223', '11224', '11225', '11226', '11228'];
var zone2 = ['10038', '10001'];

document.getElementById('zip').addEventListener('change', (e) => {
  if (e.target.value.length === 5) {
    if (checkExists(e.target.value, zone1)) {
      console.log(`${e.target.value} found in zone1`);
    } else if (checkExists(e.target.value, zone2)) {
      console.log(`${e.target.value} found in zone2`);
    } else {
      console.log(`${e.target.value} not in any zone!`);
    }
  }
});

function checkExists(needle, haystack) {
  return haystack.indexOf(needle) > -1;
}
Enter a zip code then click outside the textfield to validate<br>
<input id="zip" type="text">
Tom O.
  • 5,730
  • 2
  • 21
  • 35