How to perform CRUD operations on a static JSON array in Angular? (without API)

Question

I have this JSON array file.

[
    {
      "id": 1,
      "name": "John Doe",
      "email": "john.doe@example.com",
      "age": 25
    },
    {
      "id": 2,
      "name": "Jane Doe",
      "email": "[jane.doe@example.com]",
      "age": 28
    },
    {
      "id": 3,
      "name": "Bob Smith",
      "email": "[bob.smith@example.com",
      "age": 30
    }
]

How do I perform CRUD operations on this array through a Angular Reactive Form and present the data in a table?

I do not have any API. I want to use this Static JSON to perform CRUD operations.

Answer 1

Have you ever tried json-server? Usually I mock compatible data and I work with this for mvps

Put the following into the db.json file

db.json

{
   "users":[
      {
         "id":1,
         "name":"John Doe",
         "email":"john.doe@example.com",
         "age":25
      },
      {
         "id":2,
         "name":"Jane Doe",
         "email":"[jane.doe@example.com]",
         "age":28
      },
      {
         "id":3,
         "name":"Bob Smith",
         "email":"[bob.smith@example.com",
         "age":30
      }
   ]
}

run npx json-server db.json

trough Angular HttpClient you will be able to perform the following HTTP calls:

• GET /users
• POST /users
• PUT /users/{id}
• DELETE /users/{id}
• PATCH /users/{id}

You can also use OData like syntax by visiting the following url

For the form I suggest you to visit the official doc

For the table I suggest you to take inspiration from something like this.

Linking all together

Once you scaffolded the form, the table and the data service (which will make you able to make your specific HTTP request) you have to:

• perform the PATCH/PUT request through your data service when the user trigger the save action
• once the previous request ends, you will have to update the specific edited row of the table