getJSON() से JSON Parse करना
In this page:
$.getJSON(url, data, function (json) {
// handle json
});getJSON() क्या है?
$.getJSON() एक shorthand AJAX method है जो खासतौर पर एक URL request करने और JSON response को automatically parse करने के लिए बना है, ताकि आपको एक ready-to-use JavaScript object मिले।
उदाहरण: What is getJSON()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.getJSON("data.php", function(data) {
console.log(data);
});
</script>
</body>
</html>JSON Properties पढ़ना
JSON data में आमतौर पर named properties और values होती हैं, और getJSON() के response parse कर लेने के बाद आप उन्हें normal dot notation से access करते हैं, जैसे data.name।
उदाहरण: Read JSON Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.getJSON("data.php", function(data) {
console.log(data.name);
});
</script>
</body>
</html>JSON Arrays के साथ काम करना
एक JSON response किसी single object के बजाय items का एक array हो सकता है, और each() उस array के हर item को visit करके individually उस पर action लेने का एक natural तरीका है।
उदाहरण: Work with JSON Arrays
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"></ul>
<script>
const data = [{name: "Apple"}, {name: "Banana"}];
$.each(data, function(i, item) {
$("#list").append("<li>" + item.name + "</li>");
});
</script>
</body>
</html>JSON Errors Handle करना
एक JSON request network problems की वजह से या server कुछ ऐसा return करने की वजह से fail हो सकती है जो valid JSON नहीं है, और .fail() chain करना आपको उसे handle करने देता है।
उदाहरण: Handle JSON Errors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.getJSON("data.php").done(function(data) {
console.log(data);
}).fail(function() {
console.log("Failed to load or parse JSON");
});
</script>
</body>
</html>एक छोटा JSON Project
getJSON dashboards, lists, profiles, और अन्य ऐसे pages के लिए उपयोगी है जो किसी API से structured data receive करते हैं और उसे सीधे DOM में render करने की ज़रूरत होती है।
उदाहरण: Small JSON Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="profile"></div>
<script>
$.getJSON("data.php", function(data) {
$("#profile").text(data.name);
});
</script>
</body>
</html>$.getJSON()के result परJSON.parse(data)call करना, जबकि jQuery ने पहले से इसे एक object में parse कर दिया है और यह एक error throw करता है।- ऐसी property पढ़ना जो exist नहीं करती, जैसे
data.Nameबजायdata.nameके, क्योंकि JSON keys case-sensitive होती हैं और resultundefinedहोता है। - server से invalid JSON भेजना, जैसे single-quoted strings या एक trailing comma, जो
$.getJSON()को silently fail कर देता है और success callback कभी call नहीं होता।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: