Alphabetize javascript for loop

Question

I'm getting desired results, but need to order them alphabetically. I am unsure what to put in exactly in the code:

function showClients(data) {
    var html = '';
    for (var clientId in data) {
        html += '<p>' + clientId;
        html += data[clientId].connected ? ' connected' : ' disconnected';
        html += '</p>';
    }
    if (!html) {
        html += '<p>No clients connected</p>';
    }
    $('#connected_clients').html(html);
}

I think what you're looking for is sorting. Sort the `data` by alphabet order. — Sudheesh Singanamalla, Feb 03 '17 at 06:09
What is `data`, an array or an object? By what do you want to sort, the `clientId`? — Bergi, Feb 03 '17 at 06:19

score 1 · Accepted Answer · answered Feb 03 '17 at 07:55

If I've got the layout of the data structure right, it is a key/value object, which in turn contains objects that have information such as connected.

In that case you can use Object.keys to get the keys first, sort those Object.keys(data).sort(), and create the html from there. For example:

function showClients(data) {
    var html = Object.keys(data).sort().reduce(function(h, clientId){
        return h + '<p>' + clientId
        + (data[clientId].connected ? ' connected' : ' disconnected')
        + '</p>';
    }, '')
        || '<p>No clients connected</p>';

    $('#connected_clients').html(html);
}

function showClients(data) {
    var html = Object.keys(data).sort().reduce(function(h, clientId){
     return h + '<p>' + clientId
        + (data[clientId].connected ? ' connected' : ' disconnected')
        + '</p>';
    }, '')
     || '<p>No clients connected</p>';
    
    $('#connected_clients').html(html);
}


showClients({Client3:{connected:true},Client1:{connected:true},Client2:{connected:false}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=connected_clients></div>

Suren Srapyan · Answer 2 · 2017-02-03T06:18:54.717

0

Call sort on the data like Array.prototype.sort(data). If you don't pass a compare function, it will sort the elements alphabetically.

function showClients(data) {
    var html = '';
    for (var clientId in Array.prototype.sort.call(data)) {
        html += '<p>' + clientId;
        html += data[clientId].connected ? ' connected' : ' disconnected';
        html += '</p>';
    }
    if (!html) {
        html += '<p>No clients connected</p>';
    }
    $('#connected_clients').html(html);
}

edited Feb 03 '17 at 06:18

answered Feb 03 '17 at 06:08

Suren Srapyan

66,568
14
114
112

You'd better put Array.prototype.sort(data) before the 'for', i think. – er-han Feb 03 '17 at 06:12
Why ? It will not call the sort every time – Suren Srapyan Feb 03 '17 at 06:12
1

No, that is *not* how to call `sort`. – Bergi Feb 03 '17 at 06:18
But why so complicated with `call` at all? – Bergi Feb 03 '17 at 06:21
data may be not an array, but array like object. So why I called like that – Suren Srapyan Feb 03 '17 at 06:22
I'd like to sort by clientId so that when results are presented (clientId) they are sorted alphabetically. This doesn't seem to solve that. – Doc Falken Feb 03 '17 at 07:10
So you can pass a function as the second parameter and sort the way you want – Suren Srapyan Feb 03 '17 at 07:11
The data returned in the clientId is "Client 1" or "Client 2" or "Client 3", etc. Very simple. – Doc Falken Feb 03 '17 at 07:18

Alphabetize javascript for loop

2 Answers2