Using Javascript to get list items, can I change item order?

Question

I am using JavaScript to get list items and customize the look via html and CSS, however they are sorting automatically by ID number and I need it sorted by a custom field, 'EventDate'.

I haven't been able to figure find anything via search. I've tried changing the default list view sort order and such but nothing has worked thus far.

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript">
$(function() {
    GetProducts();
    GetNews();
});

function GetProducts() {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('HRKPI');
    this.collListItem = oList.getItems("");
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function GetNews() {
    var nclientContext = new SP.ClientContext.get_current();
    var nList = nclientContext.get_web().get_lists().getByTitle('NewsInfo');
    this.ncollListItem = nList.getItems("");
    nclientContext.load(ncollListItem);
    nclientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    var listItemEnum = collListItem.getEnumerator();
    var nlistItemEnum = ncollListItem.getEnumerator();
    var ProductInfo = '<div>';
    var NewsInfoHTML = '<div>';

    while (listItemEnum.moveNext()) {
        var oListItem = listItemEnum.get_current();
        ProductInfo += '<div id="pParentSquareKPI"> <p id="pKPIName">' +
            oListItem.get_item('Name') + '</p>' +
            '<p id="pKPIValue">' + oListItem.get_item('Value') + '</p> </div>';
    }


    while (nlistItemEnum.moveNext()) {
        var nListItem = nlistItemEnum.get_current();
        NewsInfoHTML += '<table style="width:97%;text-align:center;color:#3C4F66;border: 1px solid #b1b8c1;margin-bottom:15px;"> <col width="95"> <tr style="margin-bottom:20px;"> <td style="background-color:#3C4F66;color:white;border-right: 1px solid #b1b8c1;font-size:20px;">' +
            nListItem.get_item('EventMonth') +
            '</td> <td rowspan="3" style="text-align:left;padding:10px;background-color:#f1f1f1;">' +
            nListItem.get_item('News') +
            '</td> </tr> <tr> <td style="border-right: 1px solid #b1b8c1;font-size:38px;">' +
            nListItem.get_item('EventDay') +
            '</td> </tr> <tr> <td style="background-color:#f2f2f2;border-right: 1px solid #b1b8c1;">' +
            nListItem.get_item('EventYear') + '</td> </tr> </table>';
    }

    ProductInfo += '</div>';
    $('#products').html(ProductInfo);

    NewsInfoHTML += '</div>';
    $('#news').html(NewsInfoHTML);
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

It outputs the items as needed but they are sorted by ID, which is not editable. I need it sorted by a custom column, 'EventDate'.

Refer to: https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date — A. Seiji, May 24 '19 at 13:59
Possible duplicate of [Sort Javascript Object Array By Date](https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date) — Randy Casburn, May 24 '19 at 14:33
Possible? Unfortunately I don't know JavaScript well enough to implement this. My entire code is above and I don't think I have an array. Do I sort it in the `function GetNews()` — SteveMills04, May 24 '19 at 18:08

score 1 · Accepted Answer · answered May 27 '19 at 01:33

1

Try set caml query to sort your data.

Sample script.

var nList = nclientContext.get_web().get_lists().getByTitle('NewsInfo');
    var query = new SP.CamlQuery();
    query.set_viewXml('<View><Query><OrderBy><FieldRef Name="EventDate" Ascending="FALSE"/></OrderBy></Query></View>');
    this.ncollListItem = nList.getItems(query);

answered May 27 '19 at 01:33

Lee_MSFT

4,914
1
4
11

I used this code but it did not sort, I couldn't figure out why. – SteveMills04 May 28 '19 at 14:56
I got it working. For some reason it was not allowing me to sort using the EventDate field. I had a column for Expires which worked as intended. Thanks! – SteveMills04 May 28 '19 at 16:34

Using Javascript to get list items, can I change item order?

1 Answers1