0

I am a noob when it comes to JavaScript, but I have been having an issue trying to figure this out. Any help will be appreciated. Samples, and tutorial sites will help out too. My question is how would I incorporate this search function to search a JSON file with zip codes and return the array with that zip and the other data that goes along with it. Sorry if this doesn't seem like any research was done, believe me I've been playing with this too long and I just need some direction to get me started. Thanks in advance.

So I have this form:

<form>
      <input type="text" name="zip" id="zip" placeholder="Zip Code">
      <button onclick="getZip(event);">Check</button>
</form>

JavaScript:

<script>
function getZip(e){
e.preventDefault();
var zip = document.getElementById('zip').value; // Gets the value from the text field "zip" on the form.
  if (zip === "") { // Checks if the text field "zip" is empty, if so it returns an error message.
      alert ('Please enter a zip code!');
  }
    else if (zip.length > 5) {
      alert ("Please enter a valid 5 digit numeric zip code.");
    }

    else if (isNaN(zip))  { // Checks if the text field "zip" for alphabetic characters. The "isNaN" function is to determine if a value does not convert to a number, if so it returns an error message. 
        alert("Please enter a numeric value.");

    } else if (zip.length == 5) {
      alert("Success! " + zip);

    } else { // Returns value from the text field "zip" on the form.
      alert(zip);
  }

  return false;
}

</script>

JSON Example:

[ {
    "ZipCode": 48650,
    "City": "Pinconning",
    "State": "Michigan",
    "StateAbbreviation": "MI",
    "County": "Bay"
},
{
    "ZipCode": 48651,
    "City": "Prudenville",
    "State": "Michigan",
    "StateAbbreviation": "MI",
    "County": "Roscommon"
    }
]
Dallas Clymer
  • 105
  • 1
  • 1
  • 10
  • You want to search for zip on client side or make some network requests? – Lesha Ogonkov Sep 14 '15 at 20:45
  • Can you add a variable that holds the json content and populate it in the document.ready()? – g2000 Sep 14 '15 at 20:46
  • @LeshaOgonkov I'm not sure, what do you recommend? – Dallas Clymer Sep 14 '15 at 20:50
  • Oops, sorry, you need JSON, so you defenitely should learn how make asyn requests to get your JSON and search through it, look at [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) – Lesha Ogonkov Sep 14 '15 at 20:52
  • If this ends up as a "What do you recommend?" question, then this is off-topic for StackOverflow. – Joseph Sep 14 '15 at 20:57
  • Where's the search function? Your code somewhat validates the ZIP code value entered in the input element of your form – but then what should happen? – Kenny Evitt Sep 14 '15 at 21:00
  • @KennyEvitt I don't know how to implement the search functionality yet, I've been trying to follow this tutorial, but don't quite understand what its pulling. http://techslides.com/how-to-parse-and-search-json-in-javascript – Dallas Clymer Sep 14 '15 at 21:10
  • @DallasClymer What tutorial? – Kenny Evitt Sep 14 '15 at 21:11
  • I wanted to use the zipcode from the getZip() fuction and store it as a variable, then compare with the JSON results to get the rest of my data. – Dallas Clymer Sep 14 '15 at 21:15

1 Answers1

0

your best bet would be to use loadash. If the JSON is on server side then you can use server side language to parse the json and filter results.

It can be done using lodash if server side code is nodejs

If client side then convert the json to a javascript object using JSON.parse and the use loadash's map method to extract data as required.

Rupam Roy
  • 113
  • 1
  • 8