AngularJS with JSON Data Handling

अब हम सीखते हैं AngularJS का एक बहुत ही ज़रूरी और frequently-used चैप्टर:

📦 AngularJS with JSON Data Handling

(JSON डेटा को लाना, पढ़ना, समझना, और Use करना AngularJS में)

---

📌 JSON क्या होता है?

JSON (JavaScript Object Notation) एक data exchange format है जिसे लगभग हर API इस्तेमाल करता है।

AngularJS में जब आप $http.get() या किसी भी API से डेटा लाते हैं — वह डेटा JSON format में होता है।

JSON = Data को server और browser के बीच भेजने का आसान और standard तरीका

---

🎯 JSON की Structure की एक झलक

{
  "name": "Rahul",
  "age": 25,
  "skills": ["HTML", "CSS", "AngularJS"]
}

JSON object में key-value pair होता है। Value number, string, boolean, array, या दूसरा object भी हो सकता है।

---

✅ AngularJS में JSON Data को Handle कैसे करें?

1. JSON को Load करना (Using $http.get()):

app.controller("jsonCtrl", function($scope, $http) {
  $http.get("data.json").then(function(response) {
    $scope.userData = response.data;
  });
});

2. JSON को Bind करना HTML में:

<p>Name: {{ userData.name }}</p>
<p>Age: {{ userData.age }}</p>
<ul>
  <li ng-repeat="skill in userData.skills">{{ skill }}</li>
</ul>

---

✅ JSON को AngularJS में Declare करना (Without File)

$scope.user = {
  name: "Anita",
  email: "anita@example.com",
  hobbies: ["Reading", "Drawing", "AngularJS"]
};

<h3>{{ user.name }}</h3>
<p>Email: {{ user.email }}</p>
<ul>
  <li ng-repeat="hobby in user.hobbies">{{ hobby }}</li>
</ul>

---

✅ JSON with ng-repeat (List Rendering)

$scope.students = [
  { name: "Amit", marks: 85 },
  { name: "Pooja", marks: 92 },
  { name: "Ravi", marks: 78 }
];

<table class="w3-table-all">
  <tr>
    <th>Name</th><th>Marks</th>
  </tr>
  <tr ng-repeat="s in students">
    <td>{{ s.name }}</td>
    <td>{{ s.marks }}</td>
  </tr>
</table>

---

✅ JSON को Parse और Stringify करना

Function	काम
JSON.parse()	JSON string → JS object
JSON.stringify()	JS object → JSON string

Example:

var jsonStr = '{"name":"Kiran","age":28}';
var obj = JSON.parse(jsonStr); // JS object

var backToStr = JSON.stringify(obj); // Again string

यह तब उपयोगी होता है जब आप localStorage में data store करें या किसी API को send करें।

---

✅ AngularJS + JSON File Practice Example

📄 data.json

[
  { "id": 1, "title": "HTML Basics" },
  { "id": 2, "title": "CSS Flexbox" },
  { "id": 3, "title": "AngularJS Intro" }
]

📄 app.js

app.controller("tutorialCtrl", function($scope, $http) {
  $http.get("data.json").then(function(res) {
    $scope.tutorials = res.data;
  });
});

📄 HTML

<ul>
  <li ng-repeat="t in tutorials">{{ t.id }} - {{ t.title }}</li>
</ul>

---

🧠 अभ्यास प्रश्न (Exercise)

1. JSON को AngularJS में कैसे bind करते हैं?
2. JSON.parse() और JSON.stringify() में क्या अंतर है?
3. ng-repeat में JSON Array कैसे loop किया जाता है?

---

✅ आपने क्या सीखा?

• JSON का format और structure
• AngularJS में JSON को load, parse, और bind करना
• File से या manually JSON declare करना
• ng-repeat से list display करना
• JSON.stringify() और JSON.parse() का इस्तेमाल

---

🎯 अब आप AngularJS में किसी भी JSON Data को load, show, manipulate कर सकते हैं — जो हर real-world app का core होता है।