Errors while retrieving list items in SharePoint online (2013) using JavaScript

Question

<script type="text/javascript">

SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
 var itemArray = [];
 var ids = [];
 var firstNames = [];
 var lastNames = [];
 var levels = [];

function retrieveListItems() {

    var clientContext = new SP.ClientContext.get_current();
    var list = clientContext.get_web().get_lists().getByTitle('jsTest');

   var camlQuery = new SP.CamlQuery();
    var caml = "<View>";
    caml += "<Query><OrderBy><FieldRef Name='ID' Ascending='FALSE'/></OrderBy></Query>";
    caml += "<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/><FieldRef Name='FirstName'/><FieldRef Name='LastName' /><FieldRef Name='Level' /></ViewFields>";
    caml += "<RowLimit>4</RowLimit>";
    caml += "</View>";
    camlQuery.set_viewXml(caml);
    this.items = list.getItems(camlQuery);
    clientContext.load(items);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded(sender, args) {

    var itemEnumerator = items.getEnumerator();

    while (itemEnumerator.moveNext()) {
        var item = itemEnumerator.get_current();
          var id = item.get_item("ID");
          var title = item.get_item("Title");
          var firstName = item.get_item("FirstName");
          var lastName = item.get_item("LastName");
          var level = item.get_item("Level");
          itemArray.push(id + ", " + title + ", " + firstName + ", " + lastName + ", "+ level);
          ids.push(id);
          firstNames.push(firstName);
          lastNames.push(lastName);
          levels.push(level);


      }

         document.getElementById("test2").innerHTML = itemArray;
         document.getElementById("test3").innerHTML = ids;
         document.getElementById("test4").innerHTML = firstNames;
         document.getElementById("test5").innerHTML = lastNames;
         document.getElementById("test6").innerHTML = levels;
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

<div class="test1">
  <p id="test2">Undefined</p>
</div>
<div class="test1">
  <p id="test3">Undefined</p>
</div>
<div class="test1">
  <p id="test4">Undefined</p>
</div>
<div class="test1">
  <p id="test5">Undefined</p>
</div>
<div class="test1">
  <p id="test6">Undefined</p>
</div>

Hello All, I am trying to retrieve some list items and display them in and HTML file in our SharePoint Team site I have used the code bellow and I am having some errors... No data display on the screen as you can see on the snipped screen captured bellow Html page captured

Here is the list I am using to retrieve data on :SharePoint List

And here are the errors displayed in the chrome browser console when the page is loaded:Errors from Chrome Browser Console

Could you please help in solving this issue? I really don't know what is going wrong whit the code or SharePoint site.

Is there something I should do to solve that issue ?

Answer 1

I beleive Internal name of one or more fields is different than what you have written in your code/CAML query.

Please double check internal name of all the fields that you are using in CAML query and the code as well.

This should solve the error.

Answer 2

Modified code as below:

<script type="text/javascript">

SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
 var itemArray = [];
 var ids = [];
 var firstNames = [];
 var lastNames = [];
 var levels = [];

function retrieveListItems() {

    var clientContext = new SP.ClientContext.get_current();
    var list = clientContext.get_web().get_lists().getByTitle('jsTest');

   var camlQuery = new SP.CamlQuery();
    var caml = "<View>";
    caml += "<Query><OrderBy><FieldRef Name='ID' Ascending='FALSE'/></OrderBy></Query>";
    caml += "<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/><FieldRef Name='FirstName'/><FieldRef Name='LastName' /><FieldRef Name='Level' /></ViewFields>";
    caml += "<RowLimit>4</RowLimit>";
    caml += "</View>";
    camlQuery.set_viewXml(caml);
    this.items = list.getItems(camlQuery);
    clientContext.load(items);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {

    var itemEnumerator = items.getEnumerator();

    while (itemEnumerator.moveNext()) {
        var item = itemEnumerator.get_current();
          var id = item.get_item("ID");
          var title = item.get_item("Title");
          var firstName = item.get_item("FirstName");
          var lastName = item.get_item("LastName");
          var level = item.get_item("Level");
          itemArray.push(id + ", " + title + ", " + firstName + ", " + lastName + ", "+ level);
          ids.push(id);
          firstNames.push(firstName);
          lastNames.push(lastName);
          levels.push(level);


      }

         document.getElementById("test2").innerHTML = itemArray;
         document.getElementById("test3").innerHTML = ids;
         document.getElementById("test4").innerHTML = firstNames;
         document.getElementById("test5").innerHTML = lastNames;
         document.getElementById("test6").innerHTML = levels;
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

<div class="test1">
  <p id="test2">Undefined</p>
</div>
<div class="test1">
  <p id="test3">Undefined</p>
</div>
<div class="test1">
  <p id="test4">Undefined</p>
</div>
<div class="test1">
  <p id="test5">Undefined</p>
</div>
<div class="test1">
  <p id="test6">Undefined</p>
</div>

I have answered this same question posted by you in Technet, you could also check here and if it is helpful, please remember to Mark also in Technet:

Not Able to retrieve more than two column (ID an Title) from SharePoint list using JavaScript