diff --git a/parserator_web/static/js/index.js b/parserator_web/static/js/index.js index 492674cc..c0ddb38e 100644 --- a/parserator_web/static/js/index.js +++ b/parserator_web/static/js/index.js @@ -1,2 +1,55 @@ /* TODO: Flesh this out to connect the form to the API and render results in the #address-results div. */ + +const form = document.querySelector('form'); +const resultsDiv = document.getElementById('address-results'); +const addressTypeDiv = document.getElementById('parse-type'); +const table = document.querySelector('#address-results table'); +const tbody = document.querySelector('#address-results tbody'); + +form.addEventListener('submit', async function(event) { + event.preventDefault(); + + const formData = new FormData(form); + const address = formData.get('address'); + + fetch('/api/parse/?address=' + address) + .then(response => response.json()) + .then(data => { + + table.innerHTML = ''; + tbody.innerHTML = ''; + resultsDiv.style.display = 'block'; + + if (!data.error) { + + const { address_components, address_type } = data; + + addressTypeDiv.textContent = address_type; + + let makeTableRow = (component) => { + const row = document.createElement('tr'); + const addressPart = document.createElement('td'); + const partTag = document.createElement('td'); + addressPart.textContent = component[0]; + partTag.textContent = component[1]; + row.appendChild(addressPart); + row.appendChild(partTag); + tbody.appendChild(row); + } + + Object.entries(address_components).map((component) => { + makeTableRow(component) + }); + + table.appendChild(tbody); + + } else { + table.innerHTML = '

invalid address, could not parse

' + } + + }) + .catch(error => { + console.error('Error:', error); + }); +}); diff --git a/parserator_web/views.py b/parserator_web/views.py index 0be3f4a9..ca2e1d70 100644 --- a/parserator_web/views.py +++ b/parserator_web/views.py @@ -4,7 +4,7 @@ from rest_framework.response import Response from rest_framework.renderers import JSONRenderer from rest_framework.exceptions import ParseError - +import json class Home(TemplateView): template_name = 'parserator_web/index.html' @@ -16,9 +16,30 @@ class AddressParse(APIView): 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({}) + + # TODO: handle strings that cannot be parsed/return errors + address = request.query_params.get('address', '') + + try: + parsed_components, address_type = self.parse(address) + + return Response({ + 'input_string': address, + 'address_components': parsed_components, + 'address_type': address_type + }) + except Exception as e: + return Response({'error': 'could not parse'}) + + def parse(self, address): # TODO: Implement this method to return the parsed components of a # given address using usaddress: https://github.com/datamade/usaddress - return address_components, address_type + try: + print(address) + address_components = usaddress.tag(address) + address_type = address_components[1] + return address_components[0], address_type + except usaddress.RepeatedLabelError as e: + raise e \ No newline at end of file diff --git a/tests/test_views.py b/tests/test_views.py index bfd5d0b7..2172bf74 100644 --- a/tests/test_views.py +++ b/tests/test_views.py @@ -1,15 +1,24 @@ import pytest - +from rest_framework.test import APIClient +from rest_framework import status def test_api_parse_succeeds(client): # TODO: Finish this test. Send a request to the API and confirm that the # data comes back in the appropriate format. address_string = '123 main st chicago il' - pytest.fail() + client = APIClient() + response = client.get('/api/parse/?address='+ address_string) + assert response.status_code == status.HTTP_200_OK + assert 'input_string' in response.data + assert 'address_components' in response.data + assert 'address_type' in response.data def test_api_parse_raises_error(client): # TODO: Finish this test. The address_string below will raise a # RepeatedLabelError, so ParseAddress.parse() will not be able to parse it. address_string = '123 main st chicago il 123 main st' - pytest.fail() + client = APIClient() + response = client.get('/api/parse/?address='+ address_string) + assert response.status_code == status.HTTP_200_OK + assert 'error' in response.data