How to create HTTP GET request that queries a database (containing list of JSONs) and retrieves the appropriate JSON that satisfies the query?

问题

I am working on an Angular project which involves submitting data (as a JSON) to the server using the HTTP POST/PUT request. The database is a list of JSONs which gets appended with a new, single JSON each time the POST/PUT request sends a new JSON to it. In each PUT/POST request, the JSON template looks like this:

{
  "prop1": "123456",
  "prop2": "abc",
  "prop3": "xyz"
}

Let's call the above JSON to be of class Hero which has the same fields/properties.

The list of JSONs in the database looks somewhat like this:

[
 {
   "prop1": "123456",
   "prop2": "abc",
   "prop3": "xyz"
 },

 {
   "prop1": "456789"
   "prop2": "abcd"
   "prop3": "xyzz"
 },

 .....
]

Now, I am also using HTTP GET request to retrieve a JSON from the backend database using the "prop1" field. In order to specify the query based on "prop1", I am using the following kind of template specified on the official Angular website https://angular.io/guide/http

import {HttpParams} from "@angular/common/http";

/* GET heroes whose name contains search term */
searchHeroes(prop1Value: string): Observable<Hero[]> {
  prop1Value = prop1Value.trim();

  // Add safe, URL encoded search parameter if there is a search term
  const options = prop1Value ? { params: new HttpParams().set('prop1', prop1Value) } : {};

  return this.http.get<Hero[]>(this.heroesUrl, options)
    .pipe(catchError(this.handleError<Hero[]>('searchHeroes', [])));
}

The problem is, it is retrieving all the JSON records, i.e. the entire list of JSONs from the backend, instead of returning only the JSON having the value of "prop1" field as prop1Value.

I have tried out multiple variants for the 'options' property as follows, but all of them work the same, i.e. retrieve the entire list of JSONs stored in the database, instead of single JSON satisfying the query.

const options = { params: new HttpParams().set('prop1', prop1Value) };

const params = new HttpParams({fromString: 'prop1='+prop1Value});
const options = {params};

I also wish to clarify one more thing. Instead of having a proper backend database, I have simply created a folder named 'api' right inside my 'src' folder. Inside 'api' folder, I have created 2 folders, 'folder1' and 'folder2'. Inside 'folder1', I have a json file named 'recordslist.json' that contains the list of JSONs. I am running my frontend web page on localhost:9000 and have just specified api/folder1/recordslist.json as the path (value) to herosUrl. Please note that the GET request is working, just that the query/filter part is not working, i.e. instead of receiving the specific JSON that satisfies the query, it retrieves the entire list of JSONs. Kindly help me in solving this issue.

Another issue that I am facing is that my POST/PUT request is not working at all. It is giving different types of error on Browser->Inspect->Console, mostly 504 (Gateway Timeout). Due to this, it is unable to write/append a new JSON to the list of JSONs. Note that the destination URL is same, i.e. api/folder1/recordslist.json

My PUT request is somewhat as follows:

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero): Observable<Hero> {
  return this.http.put<Hero>(this.heroesUrl, hero)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

I have also tried the following variants:

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero): Observable<Hero> {
  return this.http.put<any>(this.heroesUrl, hero)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

/** PUT: update the hero on the server. Returns the updated hero upon success. */
updateHero (hero: Hero) {
  return this.http.put<any>(this.heroesUrl, hero)
    .pipe(
      catchError(this.handleError('updateHero', hero))
    );
}

After going through a lot of articles on the Internet, including Stackoverflow, I also double-checked various other things mentioned by people.

For instance, I saw the following code in proxy.conf.json file

{
  "/api": {
    "target": {
               "port": 8080},
    "secure": false
  }
}

Including this, I also tried the following variants of this:

{
  "/api": {
    "target": {
               "port": 3000},
    "secure": false
  }
}

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

The errors on Inspect->Console were mainly amongst the following - "Internal Server Error", "Gateway Timeout", "Bad Gateway".

On the command prompt, mostly the error it showed on executing the PUT request was somewhat as follows:

Error occurred while trying to proxy request /api/folder1/recordslist.json from localhost:9000 to (port 8080) (ECONNREFUSED) nodejs.org/api/errors.html#errors_common_system_errors)

I have also confirmed that the below code exists in the angular.json file:

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    }

From my analysis, I think there is some issue with the proxy-server part due to which the PUT request is not able to write to my JSON file. However, it's strange that GET request is able to retrieve records from the very same file.

I have gone through several links on the Internet such as https://angular.io/guide/build, https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md, https://github.com/saikat/react-apollo-starter-kit/issues/20 https://blog.angular-university.io/angular-http/ etc.

I haven't been able to find the solution to both my problems at all. I really request someone to help with both these problems:

Retrieving specific records using HTTP Get Request from my api/folder1/recordslist.json file
Making HTTP PUT work and be able to append a JSON to my api/folder1/recordslist.json file

Believe me, I have really tried a lot to solve this issue. So, this might take something really harder. Any help is welcome.

Please note that in the GET rqst, I want my prop1Value to be passed using a variable and not be hardcoded something like "prop1='123456'". Rather somewhat like, prop1Value = "123456"; "prop1="+prop1Value;

Also, please let me know why GET request is working, and PUT request is failing.

来源：https://stackoverflow.com/questions/60082866/how-to-create-http-get-request-that-queries-a-database-containing-list-of-jsons

标签

javascript

json

angular

http

get