Preamble:

1. I'm implementing a new XMLHttpRequest() via a Promise. And using the GET method.
2. The project uses plain javascript with no server-side scripting.
3. I have a JSON file that's formatted as follows. And the path to the that file is 'json/users.json'.

[
  {
    "name" : "John Smith",
    "avatar" : "john_smith.webp",
    "bio" : "Some words from John Smith",
    "projects" : [
      {
        "number" : 5,
        "date" : "09 March 2017",
        "time" : "08:34PM",
        "link" : "link-to-project-attempt",
      },
      {
        "number" : 12,
        "date" : "09 March 2017",
        "time" : "07:14PM",
        "link" : "link-to-project-attempt",
      }
    ]
  },
  {
    "name" : "Gill Jenkins",
    "avatar" : "gill_jenkins.webp",
    "bio" : "Some words from Gill Jenkins",
    "projects" : [
      {
        "number" : 9,
        "date" : "12 Feb 2017",
        "time" : "20:04PM",
        "link" : "link-to-project-attempt",
      },
      {
        "number" : 24,
        "date" : "23 Jan 2017",
        "time" : "17:45PM",
        "link" : "link-to-project-attempt",
      }
    ]
  }
]

The Problem

I am successfully making the call to the file, but the responseText contains the entire JSON file.

This file may potentially hold hundreds or thousands of unique users. Each of which could have 100+ projects.

Since I'm only ever going to need one user at a time I'd like to be able to restrict the responseText to only the object containing an instance of that user.

I had thought I could do a simple query string like this:

xhr.open('GET', 'json/users.json?name=Gill%20Jenkins');

But that still returns the entire JSON file.

So is this doable with a solely front-end workflow or am I out of luck?

I have a gut feeling that it should be achievable.

Thanks for the assist.

Answers

Please don't supply answers/solutions that require jQuery or other dependencies. This is a plain (vanilla) javascript project.