jQuery — JSON

$.getJSON()

$.getJSON("https://api.example.com/data.json", function(data) {
    console.log(data);
});

$.getJSON with Callback

$.getJSON("https://api.example.com/data.json?callback=?", function(data) {
    console.log(data);
});

Parse JSON String

var jsonString = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonString);
console.log(obj.name);

Stringify Object

var obj = { name: "John", age: 30 };
var json = JSON.stringify(obj);
console.log(json);

AJAX with JSON Response

$.ajax({
    url: "https://api.example.com/data",
    dataType: "json",
    success: function(data) {
        // data is already parsed
        console.log(data.name);
    }
});

Sending JSON

$.ajax({
    url: "https://api.example.com/data",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({ name: "John" }),
    success: function(response) {
        console.log(response);
    }
});

Iterate JSON Array

$.getJSON("/api/users", function(users) {
    $.each(users, function(index, user) {
        $("#list").append("<li>" + user.name + "</li>");
    });
});

Mini Practice

1. Fetch JSON data with $.getJSON
2. Parse a JSON string
3. Send JSON in a POST request
4. Display JSON data in HTML

Up Next

Continue with noConflict — using jQuery alongside other libraries.