How to work with the results of api.php using javascript?

Question

I have searched around and can't seem to find what I'm looking for.

How can I use the results of api.php?action=query&list=allusers&augroup=sysop&aulimit=max&format=json in a javascript?

What I'm trying to do is create a script to simply change the color of usernames on the wiki if they are in certain groups, like sysop, bureaucrat, etc.

Although I'm usually pretty good at figuring these things out, I've been working on this all day and I've gotten nowhere with it. Can anyone help me out with maybe some examples or something? If it can be done with mostly jQuery that would be preferable.

Thanks in advance.

---

Edit: (in response to comment by ahren):

Well I started out trying to clean up and modify a script written by someone else to add more functionality/make it work as expected, but I had trouble making sense out of it:

/* HighlightUsers by Bobogoobo
 * Changes color of links to specified groups and users
 * TODO: redo but much better (recursive would be easier - I've learned a lot since I wrote this thing)
 */
function highlightUsers () {
    "use strict";
    var highlight = window.highlight || {}, selector = '', that, userstr,
        indices = [],
        i = 0,
        user,
        ns,
        x,
        y;

    for (ns in mw.config.get('wgNamespaceIds')) {
        if (i === 4) {
            userstr = ns;
        }
        i++;
    }
    userstr = userstr.charAt(0).toUpperCase() + userstr.substring(1);

    if (highlight['selectAll']) {
        selector = 'a[href$=":';
    } else {
        selector = 'a[href="/wiki/' + userstr + ':';
    }

    for (y in highlight) {
        indices.push(y);
    }

    for (x in highlight) {
        that = highlight[x];

        if (x === 'selectAll') {
            continue;
        } else if (x === 'users') {
            for (user in that) {
                $(selector + user.replace(/ /g, '_') + '"]').css({
                    'color': that[user],
                    'font-weight': 'bold'
                }).attr('data-highlight-index',
                    $.inArray('users', indices));
            }
        } else {
            (function (userColor, userGroup) { //JavaScript doesn't like to cooperate with me
                $.getJSON('/api.php?action=query&list=allusers&augroup=' + userGroup +
                    '&aulimit=max&format=json', function (data) {
                        var stuff = data.query.allusers, //, select = '';
                            user;

                        for (user in stuff) {
                            //select += selector + stuff[user].name.replace(/ /g, '_') + '"], ';
                            $(selector + stuff[user].name.replace(/ /g, '_') + '"]').each(function () {
                                if (($(this).attr('data-highlight-index') || -1) < $.inArray(userGroup, indices)) {
                                    $(this).attr('data-highlight-index', $.inArray(userGroup, indices));
                                    $(this).css({
                                        'color': userColor,
                                        'font-weight': 'bold'
                                    });
                                }
                            });
                        }
                        //select = select.substring(0, select.length - 2);
                        //$(select).css('color', userColor);
                    });
            }(that, x));
        }
    }
}

That is my latest draft of it, I managed to accomplish a few things, like making the names bold, and correcting syntax mishaps, but I've decided I may be better off starting from scratch than trying to understand someone else's code.

Answer 1

I tried the AJAX solution described by Markrand, but unfortunately I wasn't able to get it to work. First off I was getting "allusers is not defined", so I wrapped it in quotes so that it wasn't treated as a var, then I had to add change 'api.php' to '/api.php' because it was becoming '/wiki/api.php' which doesn't exist, and adding the slash got it to use the base URL. It would then execute and return an object, however there was nothing useful in that object that I could use (such as an array of usernames), all it gave me was the API documentation... So I ended up doing this instead:

function highlightAdmins() {
    $.getJSON('/api.php?action=query&list=allusers&augroup=sysop&aulimit=max&format=json',
        function(data) {
            for (var i = 0; i < data.query.allusers.length; i++) {
                $('a[href$="User:' + data.query.allusers[i].name + '"]').css('color', '#FF6347');
            }
        });
}

This gave me an object containing the results of the query, in this case an array of sysop usernames (data.query.allusers[i].name) which I could iterate though and perform actions with.