DEV Community: Kanhaiya Banjara

JSON

Kanhaiya Banjara — Sun, 10 Nov 2024 08:47:52 +0000

In JavaScript, structured data is often represented using JSON (JavaScript Object Notation), which is a lightweight, text-based format for organizing and storing data. JSON is widely used for data interchange in web applications due to its simplicity and compatibility with JavaScript objects.

JSON Structure Basics

A JSON structure is composed of:

1. Key-value pairs: Each key is a string, and values can be strings, numbers, objects, arrays, true, false, or null.

2. Arrays: Ordered lists of values.

3. Nested objects and arrays: JSON supports nesting, allowing you to build complex data structures.

JSON Example

Here’s an example of structured data in JSON format:

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Physics", "Chemistry"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "zipCode": "10001"
  },
  "scores": [
    { "course": "Math", "score": 95 },
    { "course": "Physics", "score": 88 },
    { "course": "Chemistry", "score": 92 }
  ]
}

JSON in JavaScript

In JavaScript, JSON is often used as a format for data received from or sent to a server in an API request/response. JSON is easily converted to and from JavaScript objects.

1. Converting JSON to JavaScript Object

You can parse JSON data (in string format) into a JavaScript object using JSON.parse().

const jsonString = '{"name": "Alice", "age": 30}';
const user = JSON.parse(jsonString);
console.log(user.name); // Output: "Alice"

2. Converting JavaScript Object to JSON

You can convert a JavaScript object to a JSON string using JSON.stringify().

const user = { name: "Alice", age: 30 };
const jsonString = JSON.stringify(user);
console.log(jsonString); // Output: '{"name":"Alice","age":30}'

Nested JSON Structure

JSON supports nesting, allowing for complex data representations:

{
  "product": "Laptop",
  "details": {
    "brand": "BrandName",
    "specs": {
      "cpu": "Intel i7",
      "ram": "16GB",
      "storage": "512GB SSD"
    }
  },
  "reviews": [
    { "user": "User1", "rating": 5, "comment": "Excellent!" },
    { "user": "User2", "rating": 4, "comment": "Good value" }
  ]
}

Common Uses of JSON in JavaScript

1. API Data Exchange: JSON is often used to send and receive data between client and server in APIs.

2. Configuration Files: JSON is used to config files in various applications and frameworks.

3. Data Storage: JSON can be stored in local storage or databases for use in JavaScript applications.

⚡API Quick Reference⚡

Kanhaiya Banjara — Thu, 31 Oct 2024 08:27:03 +0000

1. HTTP Verbs

┣ 🚀 GET : Retrieve data from the server

┣ 🚀 POST : Send data to the server to create a resource

┣ 🚀 PUT : Send data to the server to update a resource

┣ 🚀 PATCH : Send data to the server to update a resource partially

┣ 🚀 DELETE : Delete a resource from the server.

┣ 🚀 TRACE : Returns the full HTTP request received by the server for debugging and diagnostic purposes.

┣ 🚀 OPTIONS : Returns the HTTP methods supported by the server for the requested URL.

┣ 🚀 CONNECT : Converts the request connection to a transparent TCP/IP
tunnel for secure communication.

┣ 🚀 PURGE : Invalidates a cached resource.

┣ 🚀 LOCK : Locks the resource for exclusive use by the client.

┣ 🚀 UNLOCK : Unlocks the resource previously locked by the client.

┣ 🚀 MKCOL : Creates a new collection resource.

┣ 🚀 COPY : Copies the resource identified by the Request-URI to the destination URI.

2. HTTP Status Codes

┣ 🚦1xx : Informational

┣ 🚦2xx : Success

┣ 🚦3xx : Redirection

┣ 🚦4xx : Client Errors

┣ 🚦5xx : Server Errors

3. Response Headers

┣ 🌐 Content-Type : Specifies the MIME type of the data in the response body.

┣ 🌐 Content-Length : Specifies the length of the response body in bytes.

┣ 🌐 Cache-Control : Specifies the caching behavior of the response.

┣ 🌐 Location : Specifies the URI of a resource that can be used to
retrieve the requested resource.

┣ 🌐 Server : Specifies the name and version of the server software that generated the response.

┣ 🌐 Access-Control-Allow-Origin : Specifies which origins are allowed to access the resource.

┣ 🌐 Set-Cookie : Specifies a cookie that should be stored by the client and sent back to the server with future requests.

┣ 🌐 Expires : Specifies the date and time after which the response is considered stale.

┣ 🌐 Last-Modified : Specifies the date and time the resource was last modified.

4. API Design

┣ 💻 REST : Representational State Transfer, a design pattern for
building web services.

┣ 💻 SOAP : Simple Object Access Protocol, a messaging protocol for
exchanging structured data.

┣ 💻 GraphQL : A query language and runtime for building APIs.

┣ 💻 API Gateway : A service that manages, protects, and scales APIs.

5. API Architectures

┣ 🏢 SOA : Service-Oriented Architecture, an architectural style for building distributed systems.

┣ 🏢 Microservices : An architectural style for building complex
applications as a suite of small, independent services.

┣ 🏢 Serverless : A cloud computing execution model where the cloud
provider manages the infrastructure and automatically allocates resources
as needed.

┣ 🏢 Event-Driven : An architectural style where the flow of data between components is triggered by events.

┣ 🏢 RESTful API : An architectural style that uses HTTP requests to GET, POST, PUT, and DELETE data.

6. API Design Patterns

┣ 🧩 Adapter Pattern : A pattern that converts the interface of a class into another interface that clients expect.

┣ 🧩 Decorator Pattern : A pattern that adds behavior to an individual object dynamically.

┣ 🧩 Proxy Pattern : A pattern that provides a surrogate or placeholder for another object to control access to it.

┣ 🧩 Chain of Responsibility Pattern : A pattern that delegates commands to a chain of processing objects.

┣ 🧩 Observer Pattern : A pattern that defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

7. API Security

┣ 🔑 OAuth : An open standard for authorization used for protecting APIs.

┣ 🔑 JWT : JSON Web Tokens, a standard for securely transmitting
information between parties as a JSON object.

┣ 🔑 _ SSL/TLS_ : Secure Sockets Layer/Transport Layer Security, a protocol for establishing a secure connection between a client and a server.

┣ 🔑 API Key : A secret token used to authenticate API requests.

┣ 🔑 Rate Limiting : A technique used to limit the number of requests that can be made to an API over a specific period of time.

┣ 🔑 OpenID Connect : An authentication layer built on top of OAuth that allows users to be authenticated across multiple domains.

┣ 🔑 Cross-Origin Resource Sharing (CORS) : A mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated .

8. API Testing

┣ 🧪 Postman : A popular tool for testing and debugging APIs.

┣ 🧪 SoapUI : A tool for testing SOAP and REST web services.

┣ 🧪 Swagger : A tool for designing, building, and testing APIs.

┣ 🧪 _ JMeter_ : A tool for testing the performance of APIs.

┣ 🧪 TestRail : A test management tool for planning, executing, and
tracking API tests.

┣ 🧪 Dredd : A command-line tool for testing API documentation against its backend implementation.

┣ 🧪 REST Assured : A Java-based library for testing RESTful APIs.

┣ 🧪 Karate DSL : A testing framework for API testing using Gherkin syntax.

┣ 🧪 HttpMaster : A tool for testing and debugging APIs.

┣ 🧪 Assertible : A tool for testing and monitoring APIs with automated tests.

9. API Development

┣ 🧑🏻‍💻 Node.js : A JavaScript runtime for building server-side
applications.

┣ 🧑🏻‍💻 Express : A popular framework for building web applications and APIs with Node.js.

┣ 🧑🏻‍💻 Django : A Python web framework for building web applications and APIs.

┣ 🧑🏻‍💻 Flask : A lightweight Python web framework for building web
applications and APIs.

┣ 🧑🏻‍💻 Spring : A Java framework for building enterprise-level web
applications and APIs.

┣ 🛠️ Swagger Editor : A tool for designing and documenting APIs using the OpenAPI specification.

┣ 🛠️ _Postman _: A tool for testing and debugging APIs.

┣ 🛠️ Insomnia : A tool for designing, testing, and debugging APIs.

┣ 🛠️ Paw : A tool for designing and testing APIs on Mac OS.

┣ 🛠️ API Blueprint : A high-level API description language for building RESTful APIs.

Web APIs

Kanhaiya Banjara — Tue, 29 Oct 2024 16:46:03 +0000

Web APIs are interfaces that allow web applications to communicate with external services or data sources over the internet.

1. REST API

REST APIs use standard HTTP methods & are stateless. They
typically return data in JSON or XML format.
Used for web services, where resources are accessed via URLs. Commonly used for CRUD operations on data.
Example: GitHub API, Twitter API.

fetch('https://api.github.com/users/octocat')
    .then(responce => responce.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

2. SOAP API

SOAP is a protocol that uses XML for message format & typically relies on HTTP or SMTP for message negotiation & transmission.
Enterprise-level applications requiring security, reliability, and
formal contracts (WSDL).
Example: Payment gateways, financial services APIs.

const soap = require('soap');
const url = 'https://www.example.com/service?wsdl';
soap.createClient(url, (err, client) => {
    if (err) throw err;
    client.MyFunction({ param: 'value' }, (err, result) => {
        if (err) throw err;
        console.log(result);
    });
});

3. GraphQL API

GraphQL allows clients to request exactly the data they
need, and nothing more. It uses a single endpoint and
provides more flexibility compared to REST.
When you need efficient querying of complex datasets, or when working with mobile applications where bandwidth
is a concern.
Example: Facebook's GraphQL API, Shopify API.

const { request, gql } = require('graphql-request');
const query = gql`
    {
        user(login: "octocat"){
            name
            bio
        }
    }
`;

request('https://api.github.com/graphql', query)
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

4. WebSocket API

WebSocket's enable real-time, two-way communication between client and server over a single, long-lived connection.
Real-time applications like chat applications, live sports updates, and online games.
Example: Slack API, trading platforms.

const socket = new WebSocket('wss://example.com/socket');
socket.onopen = ()=>{
    console.log('Connected');
    socket.send(JSON.stringify({type: 'follow', channel: 'news'}));
};

socket.onmessage = event =>{
    console.log('Message from server', event.data);
};

socket.onclose = () =>{
    console.log('Disconnected');
}

5. OAuth API

OAuth is a protocol that allows third-party applications to grant limited access to user accounts on an HTTP service, typically used for authentication and authorization.
Used for single sign-on (SSO) and authorization across different services.
Example: Google OAuth 2.0, Facebook Login API

const axios = require('axios');
const token = 'your_oauth_token';
axios.get('https://api.example.com/userinfo', {
    headers: { Authorization: `Bearer ${token}` }
})
    .then(responce => console.log(responce.data))
    .catch(error => console.error('Error:', error));

6. Batch API

Batch APIs allow clients to make multiple API calls in a single HTTP request, often improving performance by reducing the number of network requests.
When a client needs to perform multiple actions at once or when working with large datasets.
Example: Facebook Graph API batch requests

fetch('https://graph.facebook.com/v11.0', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        batch: [
            { method: 'GET', relative_url: 'me' },
            { method: 'GET', relative_url: 'me/friends' }
        ],
        access_token: 'your_access_token'
    })
})
    .then(responce => responce.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));