In this post, I'll be writing about a JavaScript front-end question I've seen on a technical assessment.

The task:
Get the input value from a search bar (the HTML for that was already provided on the assessment)
Validate the input for only a-z characters and throw an error if condition not satisfied
Search the value using an API and
Print the results in a table (code for that was also provided).

To start, I made my own HTML file with a search bar and button to mock what I remembered from the assessment:


<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <input type="text" id="search_item"><br><br>
    <button type="button" id="button">Search!</button>

    <div id="table">
    </div>

    <script src="index.js"></script>
</body>

</html>

Then, the fun part:

Step 1. Getting the input value from the search bar

document.getElementById("button").addEventListener("click", function () {
    let data = document.getElementById('search_item').value
});

Here, I've attached an eventListener to the button, so that when it is clicked, I can capture the input from the search field.

Step 2. Validating the input.
Here is the function to validate the input data:

function validate(data) {
    const lettersOnly = /^[A-Za-z]+$/;
    if (data.match(lettersOnly))
        console.log("valid input")
    else
        alert ("invalid input. please use a-z characters only")
}

Right now, I'm only console logging confirmation of valid input, and throwing a pop-up error when characters other than letters are present.

I then changed the code with the eventListener to also call the validate function when the button is clicked, passing the captured data to the function

document.getElementById("button").addEventListener("click", function () {
    let data = document.getElementById('search_item').value
    validate(data);
});

Step 3. Search the API with the validated input
First, the search function:


function search(data) {
  fetch(`[URL]/?city=${data}`)
    .then((res) => res.json())
    .then((resjson) => console.log(resjson));
}

(I was working with the API provided by the testing platform, so I omitted it from the example).
Right now, this is returning an array of objects in the console. Also have to call the search function, so I'll be doing that inside the validate function. It now looks like this:

function validate(data) {
  const lettersOnly = /^[A-Za-z]+$/;
  if (data.match(lettersOnly)) {
    search(data);
  } else {
    alert("invalid input. please use a-z characters only");
  }
}

Step 4. Finishing up the search function + printing to table

function search(data) {
  let table = '<table><tr><th>city</th><th>state</th></tr>';

  fetch(`.../?city=${data}`)
    .then((res) => res.json())
    .then((resjson) => {
      for (let i = 0; i < resjson.data.length; i++) {
        table += '<tr><td>' + resjson.data[i]['city'] + '</td>';
        table += '<td>' + resjson.data[i]['state'] + '</td></tr>';
      }
      table += '</table>';
      document.getElementById('table').innerHTML = table;
    });
}

I loop through the array of data, and then write the information in a table, and voila!

If there is a prettier/more elegant way to write the info to a table (I'm sure there is), please comment it ~

JavaScript Frontend Interview Question - Search API and Print Results in Table