Question posted in
You can find the official documentation here.

Uncaught ReferenceError: GetListItems is not defined – Jquery ajax

I am working on SPFx using react and I am trying to fetch sharepoint list items having more than 5000 items using a REST call.

However when I do this, it goes to the success function and retrieves the first 1000 items as specified. But in the next iteration, this error pops up in the specified line-

Uncaught ReferenceError: GetListItems is not defined

What am I doing wrong? Please help.

public componentDidMount() {
  this.GetListItems();
}

public GetListItems() {
  var reactHandler = this;
  var response = response || []; // this variable is used for storing list items 
  var url = '${this.props.siteurl}/_api/web/lists/getbytitle('List_name')/items?$top=1000';     

   jquery.ajax({
    url: url,
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    success: function(data) {
      console.log("Data ;", data.d.results);

      response = response.concat(data.d.results);
      console.log("Items are1;", response);

      if (data.d.__next) {
        url = data.d.__next;
        this.GetListItems(); // error in this line
        console.log("concat", this.response);
      } else {
        return response;
      }

      reactHandler.setState({
        items: response,
        filteredItems: response
      }, () => {
        console.log("Items are;", this.state.items);
      });
    },
    error: function(error) {
      // error handler code goes here
      console.log("error")
    }
  });
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally figured out what was wrong! It was a scope issue since I used ES5 syntax in my success function. I changed it to ES6 ie., used an arrow function. Here is my updated code-

    public componentDidMount() {
                    var response = response || [];  // this variable is used for storing list items
                    var url = `${this.props.siteurl}/_api/web/lists/getbytitle('List_Name')/items?$top=1000`;
                    this.GetItems(response, url);
            
                }
        
    

public GetItems = (response, url) => {            
           
            jquery.ajax({
                url: url,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
    
    
                success: (data) => {
                    console.log("Data ;", data.d.results);    
                    response = response.concat(data.d.results);
                    console.log("Items are;", response);
                    if (data.d.__next) {
                        url = data.d.__next;
                        this.GetItems(response, url);
                        console.log("concat", response.length);
                    }
    
                    this.setState({
                        items: response,
                        filteredItems: response
    
                    }, () => {
                        console.log("Items are;", this.state.items);
                    });
                },
                error: function (error) {
                    // error handler code goes here
                    console.log("error")
                }
            });
    
    
        }

  2. 0

    I test the code with js directly.

    I made some changes to the code for your reference：

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $(function () {
      var url = `${_spPageContextInfo.siteAbsoluteUrl}/_api/web/lists/getbytitle('testn')/items?$top=1000`;
      GetListItems(url)
    })
    
     var response = response || [];
    function GetListItems(url) {
      
      $.ajax({
        url: url,
        method: "GET",
        headers: {
          "Accept": "application/json; odata=verbose"
        },
        success: function (data) {
          console.log("Data ;", data.d.results.length);

          response = response.concat(data.d.results);
          console.log("Items are1;", response);

          if (data.d.__next) {
            url = data.d.__next;
            GetListItems(url); // error in this line
            console.log("concat",response);
          } else {
            return response;
          }

          // reactHandler.setState({
          //   items: response,
          //   filteredItems: response
          // }, () => {
          //   console.log("Items are;", this.state.items);
          // });
        },
        error: function (error) {
          // error handler code goes here
          console.log("error")
        }
      })
    }
  </script>

    Test result:
    enter image description here
    Updated:
    enter image description here
    Updated code:

    this.state={
      Response:[]
    }
    var Response=this.state.Response;
        Response.concat(data.d.results);
        this.setState({Response})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search