Ajax query json source and output results

Question

I am new to javascript but I am trying to build a script which can query an API via JSON and AJAX and display the results.

This is the code I have so far: http://jsfiddle.net/spadez/62Ler/4/

$('a').click(function (event) {
    event.preventDefault();
    $.ajax({
        url: "/ajax_json_echo/",
        type: "GET",
        dataType: "json",
        timeout: 5000,
        context: this,
        beforeSend: function () {
            $('#content').fadeTo(500, 0.5);
        },
        success: function (data, textStatus) {
            $('html, body').animate({
                scrollTop: '0px'
            }, 300);
        },
        error: function (x, t, m) {
            if (t === "timeout") {
                alert("Request timeout");
            } else {
                alert('Request error');
            }
        },
        complete: function () {
            $('#content').fadeTo(500, 1);
        }
    });
});

Let's say the API has this URL format:

• Base URL: http://api.test.com/v1/search?q=test
• Query for test: http://api.test.com/v1/search?q=test

Question

How do I replace the div id content with a few of the details from the object json response. For example:

Engineering 
Enterprise Recruitment Limited

Answer 1

You can do it in success return function.

    success: function (data, textStatus) {
        $('html, body').animate({
            scrollTop: '0px'
        }, 300);
        $('#content').html(data.objects[0].category+'<br>'+data.objects[0].company);
    }