Display items based on Orderby field

Question

HI,
I have a custom list, in which I have columns like "DisplayOrder", "Title", "Value". I am showing the contents of the list in a div in a custom webpart (javascript client object model).
The data are loading, but is not following the "DisplayOrder".
Example: In the custom list, I have data as below:
Title Value DisplayOrder
One ab 2
Two cd 3
Three ef 1
I have used the below code in Javascript client object model:
function loadConfigData() {
var configquery = new SP.CamlQuery();
configquery.set_viewXml('<View> <Query> <OrderBy><FieldRef Name="DisplayOrder" /></OrderBy> </Query> <ViewFields><FieldRef Name="Title" /><FieldRef Name="Value" /><FieldRef Name="DisplayOrder" /></ViewFields> </View>');
this.Allitems = oSubList.getItems(configquery);
clientContext.load(Allitems);
clientContext.executeQueryAsync(Function.createDelegate(this, this.NewConfigsuccess), Function.createDelegate(this, this.Configfailed));
function NewConfigsuccess() {
var right = 30;
var count = this.Allitems.get_count();
if (count >= 1) {
var configenumerator = this.Allitems.getEnumerator();
while (configenumerator.moveNext()) {
var currentItem = configenumerator.get_current();
var iTitle = currentItem.get_item('Title');
var iValue = currentItem.get_item('Value');
var newText = "";
if (iTitle!= null && iTitle != "" && iValue != null & iValue != "") {
newText = '<table class="tblContent"><tr><td class="tblLeftContent"><a style="color:white;" href="' + captionURL + '"> <img src="/_layouts/15/Images/bannertest.png" alt="' + iTitle + '"/></a></td>';
newText = newText + '<td class="tblRightContent"><div class="middlecontent"><a style="color:white;" href="' + iValue + '">' + iTitle+ '</a></td></div></tr></table>';
listdata = listdata + '<div class="BottomTitleBanner" style="right:' + right + 'px;">' + newText + '</div>';
right = right + 105;
Here, I want the data to load as "Three", "One" , "Two".
How to fix this?
Thanks

Answer 1

function GetListItem() {
$.ajax({
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
url: "http://XXXXXX/_api/web/Lists/getbytitle('OrderList')/Items?$select=Title,Test&$orderby=Test asc",
success: function (data) {
$.each(data.d.results, function (index, item) {
$('#oDataSuppliers').append("<li>" + "<h1>" + item.Test + "</h1>" + "</li>");
failure: function (data) { console.log(data); }
You can get the column order like this