DEV Community

stuxnat
stuxnat

Posted on • Updated on

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

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>

Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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);
}); 
Enter fullscreen mode Exit fullscreen mode

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));
}
Enter fullscreen mode Exit fullscreen mode

(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");
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
    });
}

Enter fullscreen mode Exit fullscreen mode

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 ~

Top comments (0)