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

    Question

  • Hello All,

    I have a list called 'jsTest' in my SharePoint online (2013) site and I would like to retrieve the last four rows with the following columns name: "ID", "Title", "FirstName", "LastName", "Level".

    I am just able to retrieve two columns which are "ID" and "Title" instead of five columns.

    Here is the code I was using to retrieve two columns "ID", "Title":

    <div class="test1">
      <p id="test3">Undefined</p>
    </div>
    <div class="test1">
      <p id="test3">Undefined</p>
    </div>
    
    <script>
    
    SP.SOD.executeOrDelayUntilScriptLoaded(showListItems,"core.js");
    
    function showListItems(){
        var clientContext = new SP.ClientContext();
        var list = clientContext.get_web().get_lists().getByTitle("jsTest");
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml(
             "<View><Query>" +
                "<OrderBy><FieldRef Name=\"Modified\" Ascending=\"FALSE\"/></OrderBy>" +
            "</Query>"+
              "<RowLimit>4</RowLimit>" +
            "</View>");
        var items = list.getItems(camlQuery);
        clientContext.load(items);
        clientContext.executeQueryAsync(function(){
            var itemArray = [];
            var ids = [];
            var itemEnumerator = items.getEnumerator();
            while(itemEnumerator.moveNext()){
                var item = itemEnumerator.get_current();
                var id = item.get_item("ID");
                var title = item.get_item("Title");
                itemArray.push(id + ", " + title);
                ids.push(id);
            }
            {
             document.getElementById("test2").innerHTML = itemArray;
             document.getElementById("test3").innerHTML = ids;}
    
        },function(sender,args){alert(args.get_message());});
    }
    </script>

    And here is the code I modified to be able to display five columns:

    <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>
    
    <script>
    
    SP.SOD.executeOrDelayUntilScriptLoaded(showListItems, "core.js");
    
    function showListItems(){
        var clientContext = new SP.ClientContext();
        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'/></ViewFields>";
        caml += "<RowLimit>4</RowLimit>";
        caml += "</View>";
        camlQuery.set_viewXml(caml);
        var items = list.getItems(camlQuery);
        clientContext.load(items, "ID", "Title", "FirstName", "LastName", "Level");
        clientContext.executeQueryAsync(function(){
            var itemArray = [];
            var ids = [];
            var firstNames = [];
            var lastNames = [];
            var levels = [];
            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(sender,args){alert(args.get_message());});
    }
    </script>
    

    Here is the errors I am receiving while trying to use the modified code:  Field or property "ID" does not exist

    Please could you help me to have the correct code for the purpose? 

    Thursday, March 14, 2019 1:40 PM

All replies

  • Hi Bogo,

    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>
    

    This is the test list data:

    Render in the page after running script:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, March 15, 2019 6:02 AM
  • Hello Jerry,

    Thank you for your support.

    I have used the code you sent to me but I am steel having some errors... No data display on the screen as you can see on the screen captures bellow


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


    And here are the errors displayed in the chrome browser console when the page is loaded:


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

    I would like to get the same results as you on the pictures you sent to me. Is there something I should do to solve that issue ?

    Tuesday, March 19, 2019 8:19 AM
  • Hi Bogo,

    Set a breakpoint in Chrome Console like this:

    And then press F10 to debug the script one by one to see which line cause the error, in my environment, it could go to onQuerySucceed function like this:

    Make sure you are using this line in main function:

    this.items = list.getItems(camlQuery);

    'this' keywords is necessary, if have no this words, I will get the same error like you meet.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, March 19, 2019 8:30 AM