How to GET specific JSON data from a server using Javascript?

Question

I have a created sqlite server that holds JSON data about users. The data looks like this:

{
0:{
    id: 1,
    name:   "Sam Smith",
  },
1:{
    id: 2,
    name:   "Jane Smith",
  }
}

I also have a basic html page with a form:

<div id="input" class="searchuser">
        <form>
            <legend class="useradd-fonts">Search Existing User</legend>


            <label for="search_byname">Name: <input type="text" id="search_byname"/></label>
            <input type="button" id="get-btn" value="Search" /><br>
        </form>
</div>

I also have code for getting this data from the server with an XMLhttprequest(), however, the code only allows to get the whole JSON data and display all the users:

const getBtn = document.getElementById("get-btn");

const getData = function() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://127.0.0.1:3000/users");

    xhr.onload = function() {
        const data = JSON.parse(xhr.response);
        console.log(data);
    };
    xhr.send();

};

getBtn.addEventListener("click", getData);

My question is, how can I search a user by their name, so in the HTML form, write Sam Smith, and after clicking the button this will return only the first user's information and not all of the users in the dataset? I would like to do this with XMLhttprequests without using any external libraries, is this possible to do?

Answer 1

Backend side

You need to specify the search service in your backend firstly. For example, you may check if there is a GET parameter named search then filter users by given parameter value.

PHP

<?php

$search = @$_GET['search'];
$query = 'SELECT * FROM users';

if (strlen($search) > 0) 
  $query .= " WHERE name LIKE '%$search%'");
}

// Then execute $query and print data as json

?>

Express.js

app.get('/users', (req, res) => {
  let search = req.query.search;
  let query = 'SELECT * FROM users' + (
    search && search.length ? ` WHERE name LIKE '%${search}%'` : '';
  );

  // execute [query] and send response
});

The code above code is only for example purpose, don't use it in production which may lead to SQL Injection.

Frontend side

Change your js with that code:

const getBtn = document.getElementById("get-btn");
const searchByNameInput = document.getElementById("search_byname");

const getData = function() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://127.0.0.1:3000/users?search=" + encodeURIComponent(searchByNameInput.value));

    xhr.onload = function() {
        const data = JSON.parse(xhr.response);
        console.log(data);
    };
    xhr.send();

};

getBtn.addEventListener("click", getData);

In that code, we used query string to give the server additional arguments to filter our request. To specify query string you need to add ? (question mark) after the url and specify the parameters separated by & symbol.

https://website.tld/link/to/page?param1=value1&param2=value2&...&paramN=valueN

On the backend side, you can get the given parameters easily by using your language's or framework's features then filter results by using sql WHERE clause.

Here are other code examples to get query string parameters in different languages/frameworks.

• Node.js > Express
• C# > ASP.NET
• Python > Django
• PHP > Laravel

Answer 2

I have figured it out, the server has a separate javascript file that performs GET requests. Therefore instead of this:

    xhr.open("GET", "http://127.0.0.1:3000/users");

I should write this:

xhr.open("GET", "http://127.0.0.1:3000/search?type=user&name=" + input);

Answer 3

This could be done two ways, you could filter the data before it is served to your web page (server logic), or you could just use the first object in your JSON array when it arrives at the web page, you might want to order the dataset before taking the first one.

If you are getting all the user's information in your query (xhr.open("GET", "http://127.0.0.1:3000/users")) and you are trying to filter it on the frontend, then your xhr.onload should be something like.

xhr.onload = () => {
        const jsonArray = JSON.parse(xhr.response);
        const user = Object.keys(jsonArray).map(key => jsonArray[key]).filter(e => e.name == document.getElementById("search_byname").value)[0];
        console.log(user );
    };

if your JSON array is already filtered (if you queried your database filtering by name), then it should be

xhr.onload = () => {
        const user = JSON.parse(xhr.response)[0];
        console.log(user);
    };