JSON CRUD
JSON (JavaScript Object Notation) is a lightweight data-interchange format widely used in APIs and web applications. This guide demonstrates how to implement Create, Read, Update, and Delete (CRUD) operations using JSON as the data format. Examples include working with raw JSON data, integrating APIs, and managing JSON in a GraphQL-like structure.
1. Setting Up
Before diving into JSON CRUD operations, ensure you have the following tools ready:
- Backend for JSON API: Use frameworks like Express (Node.js), Flask (Python), or Django Rest Framework.
- Frontend: React, Angular, or plain JavaScript for handling JSON responses.
- Storage: JSON files or databases (e.g., MongoDB, Firebase).
2. CRUD Operations with JSON
Create (POST)
In the Create operation, JSON data is sent to a server or manipulated locally to add a new entry.
Example: Raw JSON
1{
2 "users": [
3 {
4 "id": 1,
5 "name": "John Doe",
6 "email": "john.doe@example.com"
7 }
8 ]
9}
10
Example: API Integration (JavaScript)
fetch("https://example.com/api/users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "John Doe",
email: "john.doe@example.com",
}),
})
.then(response => response.json())
.then(data => console.log("Created:", data))
.catch(error => console.error("Error:", error));
Example: GraphQL Mutation
mutation {
createUser(input: { name: "John Doe", email: "john.doe@example.com" }) {
id
name
email
}
}
Read (GET)
The Read operation retrieves JSON data from a server or a local source.
Example: Raw JSON
{
"users": [
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com"
},
{
"id": 2,
"name": "Jane Doe",
"email": "jane.doe@example.com"
}
]
}
Example: API Integration (JavaScript)
fetch("https://example.com/api/users")
.then(response => response.json())
.then(data => console.log("Users:", data))
.catch(error => console.error("Error:", error));
Example: GraphQL Query
query {
users {
id
name
email
}
}
Update (PUT/PATCH)
The Update operation modifies an existing JSON entry.
Example: Raw JSON Update
Original:
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com"
}
Updated:
{
"id": 1,
"name": "John Updated",
"email": "john.updated@example.com"
}
Example: API Integration (JavaScript)
fetch("https://example.com/api/users/1", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "John Updated",
email: "john.updated@example.com",
}),
})
.then(response => response.json())
.then(data => console.log("Updated:", data))
.catch(error => console.error("Error:", error));Example: GraphQL Mutation
mutation {
updateUser(id: 1, input: { name: "John Updated", email: "john.updated@example.com" }) {
id
name
email
}
}Delete (DELETE)
The Delete operation removes an entry from the JSON structure.
Example: Raw JSON
Before:
{
"users": [
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com"
}
]
}
After:
{
"users": []
}Example: API Integration (JavaScript)
fetch("https://example.com/api/users/1", {
method: "DELETE",
})
.then(response => console.log("Deleted:", response.status))
.catch(error => console.error("Error:", error));Example: GraphQL Mutation
mutation {
deleteUser(id: 1) {
id
name
email
}
}