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
– Sudheesh Singanamalla, Commented Feb 3, 2017 at 6:09
What is data, an array or an object? By what do you want to sort, the clientId? — Bergi
– Bergi, Commented Feb 3, 2017 at 6:19

Me.Name · Accepted Answer · 2017-02-03 07:55:49Z

1

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>

answered Feb 3, 2017 at 7:55

Me.Name

12.6k3 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Doc Falken Over a year ago

That was it. Thank you.

Suren Srapyan · Accepted Answer · 2017-02-03 06:18:54Z

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 3, 2017 at 6:18

answered Feb 3, 2017 at 6:08

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

8 Comments

er-han Over a year ago

You'd better put Array.prototype.sort(data) before the 'for', i think.

Suren Srapyan Over a year ago

Why ? It will not call the sort every time

Bergi Over a year ago

No, that is not how to call sort.

Bergi Over a year ago

But why so complicated with call at all?

Suren Srapyan Over a year ago

data may be not an array, but array like object. So why I called like that

|

Collectives™ on Stack Overflow

Alphabetize javascript for loop

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related