Datamade Challenge

Dockerfile

@@ -19,7 +19,7 @@ RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
 #
 # Read more on Dockerfile best practices at the source:
 # https://docs.docker.com/develop/develop-images/dockerfile_best-practices
-RUN apt-get update && apt-get install -y --no-install-recommends postgresql-client nodejs
+RUN apt-get update && apt-get install -y --no-install-recommends postgresql-client nodejs npm
 
 # Inside the container, create an app directory and switch into it
 RUN mkdir /app

parserator_web/static/js/index.js

@@ -1,2 +1,48 @@
 /* TODO: Flesh this out to connect the form to the API and render results
  in the #address-results div. */
+// URL for the local API endpoint
+const url = "http://localhost:8000/api/parse"; // TODO: Change this URL in production
+
+// Get the submit button element by its ID
+const submitButton = document.getElementById("submit");
+
+// Save the blank HTML for the results table to reset it later
+let blankTable = document.getElementById("address-table").innerHTML;
+
+submitButton.onclick = async function(event) {
+ event.preventDefault(); // Prevent the default form submission behavior
+
+ // Get the results div element by its ID
+ let results = document.getElementById("address-results");
+
+ // Hide the results div and reset its content in case of an error
+ results.style.display = "none";
+
+ // Get the value from the address input field
+ let addressString = document.getElementById("address").value;
+
+ // Create URL query parameters using the address input value
+ let queryTerms = new URLSearchParams({ address: addressString });
+
+ try {
+ // Fetch the parsed address from the API endpoint with the query parameters
+ const response = await fetch(`${url}?${queryTerms}`);
+
+ // Check if the response is ok (status code 200-299)
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ // Parse the JSON response
+ const data = await response.json();
+
+ // Display the parsed address components in the results div
+ results.innerText = `Parsed Address Components: ${JSON.stringify(data.address_components)}`;
+ results.style.display = "block";
+ } catch (error) {
+ // Display the error message in the results div
+ results.innerText = `Error: ${error.message}`;
+ results.style.display = "block";
+ console.error(`${error} in response to query at ${url}?${queryTerms}`);
+ }
+};

parserator_web/templates/parserator_web/index.html

@@ -22,6 +22,7 @@ <h3 id="usaddress-parser"><i class="fa fa-fw fa-map-marker-alt"></i> U.S. addres
  <h4>Parsing results</h4>
  <p>Address type: <strong><span id="parse-type"></span></strong></p>
  <table class="table table-bordered">
+ <table class="table table-bordered" id="address-table">
  <thead>
  <tr>
  <th>Address part</th>

parserator_web/views.py

@@ -5,20 +5,41 @@
 from rest_framework.renderers import JSONRenderer
 from rest_framework.exceptions import ParseError
 
-
+# Define a class to render the home template
 class Home(TemplateView):
  template_name = 'parserator_web/index.html'
 
-
+# Define a class to handle API requests for address parsing
 class AddressParse(APIView):
  renderer_classes = [JSONRenderer]
 
+ # Handles the GET requests
  def get(self, request):
- # TODO: Flesh out this method to parse an address string using the
- # parse() method and return the parsed components to the frontend.
- return Response({})
+ # Get the 'address' parameter from the request
+ input_string = request.GET.get("address")
+
+ # If the address parameter is missing, raise a ParseError
+ if not input_string:
+ raise ParseError(detail="Address parameter is missing.")
+
+ try:
+ # Parse the address using the 'parse' method
+ components, address_type = self.parse(input_string)
+
+ # Convert the parsed components dictionary to a list of tuples
+ address_components = [(comp, components[comp]) for comp in components]
+
+ # Return a JSON response with the parsed address details
+ return Response({
+ "input_string": input_string,
+ "address_components": address_components,
+ "address_type": address_type
+ })
+ except usaddress.RepeatedLabelError:
+ # If the address parsing fails, return an error response
+ return Response({"error": "This address failed to parse"}, status=400)
 
+ # Define a method to parse the address using the 'usaddress' library
  def parse(self, address):
- # TODO: Implement this method to return the parsed components of a
- # given address using usaddress: https:/datamade/usaddress
- return address_components, address_type
+ # Use the 'usaddress.tag' function to parse the address
+ return usaddress.tag(address)