How do I make use of JSON response from JQuery AJAX request?

Question

I am using PHP and MySQL to swap out some content. A click handler sends an AJAX request to the PHP script which performs a query, then encodes and prints the result as a JSON object.

All that seems to work, but I seem to be stuck on the most silly thing: I can't work out how to actually use the result, as in set the individual values to JavaScript variables.

Edit: I added a couple more things I tried, to get a specific value to print out to the console, no luck thus far.

Edit: Found the correct syntax:

response[0].foo

javascript:

var listId = $(this).children('.hidden-id').html();

        var options = new Object();
        options.data = listId;
        options.dataType = 'json';
        options.type = 'POST';

        options.success = function(response) {
            console.log(response[0].foo);
        };

        options.url = './inc/change_list.php';

        $.ajax(options);

the PHP script:

$list_id = $_POST['list_id'];
    $q = "SELECT id, title, description, position FROM items WHERE list_id=$list_id ORDER BY position ASC";
    $r = mysqli_query($dbc, $q);
    if (mysqli_num_rows($r) > 0) {

        $result = array();
        while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
            $add_result = [
                'id' => $row['id'],
                'title' => $row['title'],
                'description' => $row['description']
            ];
            $result[] = $add_result;
        }
        $result = json_encode($result);
        echo $result;

    } else {
        echo '{"result":"failure"}';
    }

Need to be a lot more specific about what your problems are otherwise the linked answer provides a good tutorial on how to work with objects and arrays — charlietfl, Jun 27 '16 at 17:10
You need to iterate your array and work with each object instance in your iteration — charlietfl, Jun 27 '16 at 17:17

score -3 · Answer 1 · answered Jun 27 '16 at 17:05

-3

The JSON response will automatically be parsed to a Javascript object. So you can just do:

options.success = function(response) {
    console.log(response.foo); // logs "bar"
    // or
    var foo = response.foo; // foo now holds "bar" as it's value
};

answered Jun 27 '16 at 17:05

giorgio

10,111
2
28
41

Forgot to mention I tried that, in my console (Firefox Firebug) it just logs undefined. – btwon Jun 27 '16 at 17:09
`response` is array not object – charlietfl Jun 27 '16 at 17:11
@RuairiGann what about `response.data.foo` ? – Alive to die - Anant Jun 27 '16 at 17:11

How do I make use of JSON response from JQuery AJAX request?

1 Answers1