Logo

dev-resources.site

for different kinds of informations.

JSON for Biggners

Published at
12/13/2024
Categories
json
javascript
php
laravel
Author
ahmedraza_fyntune
Categories
4 categories in total
json
open
javascript
open
php
open
laravel
open
Author
17 person written this
ahmedraza_fyntune
open
JSON for Biggners

What is JSON?

  • JSON stands for JavaScript Object Notation. It's a lightweight data format used to store and exchange information between systems, especially in web applications.

  • Think of JSON as a way to write and organize data in a clear, structured format.

Why JSON?

  1. Human-readable: Easy to understand and write.
  2. Language-independent: Used in many programming languages (not just JavaScript).
  3. Popular in APIs: Data sent between a server and a client (e.g., a website and a database) is often in JSON format.

What Does JSON Look Like?

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "skills": ["JavaScript", "Python", "HTML"],
  "address": {
    "street": "123 Main St",
    "city": "Wonderland"
  }
}

Enter fullscreen mode Exit fullscreen mode

How to Read This JSON Example?

  1. Curly Braces {}: Represent an object or a collection of data.
  2. Key-Value Pairs: Each piece of data has a "key" (name of the data) and a "value" (the actual data). "name": "Alice": Key is name, and the value is "Alice".
  3. Data Types in JSON: Strings: Text enclosed in double quotes ("Alice"). Numbers: 25, 3.14. Booleans: true, false. Arrays: Lists of values (["JavaScript", "Python", "HTML"]). Objects: Nested data, like the "address" part.

JSON in Action

Imagine a website showing user profiles. The server sends user data to the browser in JSON format:

{
  "users": [
    {
      "id": 1,
      "name": "John",
      "email": "[email protected]"
    },
    {
      "id": 2,
      "name": "Jane",
      "email": "[email protected]"
    }
  ]
}

Enter fullscreen mode Exit fullscreen mode

Why Use JSON Instead of Something Else?

  1. Simple Structure: Easy for humans to write and for machines to parse.
  2. Compact: Takes up less space compared to other formats like XML.
  3. Integration with JavaScript: JSON works seamlessly with JavaScript.

How to Work with JSON in Code?

Example in JavaScript:

// JSON data as a string
const jsonData = '{"name": "Alice", "age": 25}';

// Parse JSON into an object
const user = JSON.parse(jsonData);

console.log(user.name); // Output: Alice

// Convert object to JSON
const newJson = JSON.stringify(user);
console.log(newJson); // Output: {"name":"Alice","age":25}

Enter fullscreen mode Exit fullscreen mode

Example: PHP Array to JSON:

<?php
$data = [
    "name" => "Alice",
    "age" => 25,
    "isStudent" => false,
    "skills" => ["PHP", "JavaScript", "HTML"],
    "address" => [
        "street" => "123 Main St",
        "city" => "Wonderland"
    ]
];

// Convert PHP array to JSON
$jsonData = json_encode($data, JSON_PRETTY_PRINT);

echo $jsonData;
?>

Enter fullscreen mode Exit fullscreen mode

Example: JSON to PHP Object:

<?php
$jsonData = '{
    "name": "Alice",
    "age": 25,
    "isStudent": false,
    "skills": ["PHP", "JavaScript", "HTML"],
    "address": {
        "street": "123 Main St",
        "city": "Wonderland"
    }
}';

// Convert JSON to PHP object
$phpObject = json_decode($jsonData);

echo $phpObject->name; // Output: Alice
echo $phpObject->address->city; // Output: Wonderland
?>

Enter fullscreen mode Exit fullscreen mode

Example: JSON to PHP Array:

<?php
// Decode JSON to PHP array
$phpArray = json_decode($jsonData, true);

echo $phpArray['name']; // Output: Alice
echo $phpArray['address']['city']; // Output: Wonderland
?>

Enter fullscreen mode Exit fullscreen mode

Play Round Api for Understanding Json

DummyAis

json Article's
30 articles in total
Favicon
How to Fetch URL Content, Set It into a Dictionary, and Extract Specific Keys in iOS Shortcuts
Favicon
Dynamic Routes in Astro (+load parameters from JSON)
Favicon
Effortlessly Host Static JSON Files with JSONsilo.com
Favicon
How to Implement Authentication in React Using JWT (JSON Web Tokens)
Favicon
Converting documents for LLM processing β€” A modern approach
Favicon
Import JSON Data in Astro (with Typescript)
Favicon
Devise not accepting JSON Token
Favicon
Integration for FormatJS/react-intl: Automated Translations with doloc
Favicon
β€œDefu” usage in unbuild source code.
Favicon
Converting documents for LLM processing β€” A modern approach
Favicon
How to crawl and parse JSON data with Python crawler
Favicon
JSON Visual Edit
Favicon
Develop a ulauncher extension with a command database
Favicon
Building a Smart Feedback Agent with Copilot Studio, Adaptive cards and Power Automate
Favicon
Simplifying JSON Validation with Ajv (Another JSON Validator)
Favicon
A Straightforward Guide to Building and Using aΒ JSON Database File
Favicon
AI prompt sample - a full chat content that demonstrates how to get a professional looking website in a few munities
Favicon
Fixing and Validating JSON with Ease: An In-Depth Guide
Favicon
Useful too to work with your JSON files - jq
Favicon
what is jq? a program for json files
Favicon
Code. Gleam. Extract fields from JSON
Favicon
Build an Application Without SQL Server Database (Avoiding RPrometheusedis, MongoDB, and )
Favicon
FAQ β€” Bloomer Mock Data Generator
Favicon
My React Journey: Day 18
Favicon
Working with JSON in MySQL
Favicon
JSON for Biggners
Favicon
angular and json
Favicon
iter.json: A Powerful and Efficient Way to Iterate and Manipulate JSON in Go
Favicon
This unknown Currency API is served over 50 Billion times a month !
Favicon
Common Data Formats in JavaScript: A Comprehensive Guide With Examples

Featured ones: