JavaScript this.todoList.filter is not a function

Question

I want to create a ToDo list in Vue.js, but the items don't show up. (When I use localStorage to store the items it works, but when I use a list on SharePoint it doesn't)

The problem is most likely this part (since I adapted the code):

computed: {
            pending: function () {
              console.log("pending");
              if (!this.todoList) {
                return [];
              }
              return this.todoList.filter((item) => !item.done);
            }

I get the ToDo list items using a getToDos method:

 methods: {
            getTodos() {
              let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
              var clientContext = new SP.ClientContext(siteUrl);
              var oList = clientContext.get_web().get_lists().getByTitle('PhysicalGoals');
              var camlQuery = new SP.CamlQuery();
              var playerID = this.$store.state.selectedPlayer.ID;
              console.log("playerID getTodos: " + playerID);
              camlQuery.set_viewXml('' +
                      ''+playerID+'');

              collListItem = oList.getItems(camlQuery);
              clientContext.load(collListItem);

              clientContext.executeQueryAsync(
                      Function.createDelegate(this, this.onQuerySucceededNew),
                      Function.createDelegate(this, this.onQueryFailedNew)
              );
            },
            onQuerySucceededNew(){
              console.log("onQuerySucceededNew!");
              var listItemEnumerator = collListItem.getEnumerator();

              while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                this.todoList = oListItem.get_item('Title');
                console.log("this.todoList: " + this.todoList);
              }
              console.log("this.todoList: " + this.todoList);
              console.log("this.todoList.toString(): " + this.todoList.toString());
              console.log("this.todoList.length): " + this.todoList.length);

            }

I think the problem is item, but I don't know how I have to adapt the code. It is a single file component with HTML, CSS and JS. Here's the full component.

Does someone know how one can fix this issue?

user_7057048 · Answer

The issue is in the onQuerySucceededNew() function. You have to push items in to an array.

Example solution:

onQuerySucceededNew(){
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        this.todoList.push(oListItem.get_item('Title'));
    }
}

EDIT

And make sure to define this.todoList as an array in the component.

data() {
    return {
        todoList: [],
    }
},

user_7917521 · Answer

Please try the condition like this

pending: function () {
   console.log("completed");
   if (this.todoList && this.todoList.length>0) {
     return this.todoList.filter(item => !item.done);
   }
   return [];
}

Note: make sure the data in this.todoList assigning correctly and it is in array format.

user_2185093 · Answer

Problem

The error is indicating that todoList exists but is not an array so has no filter method. If todoList did not exist at all, the computed would have returned [] without an error.
When you set todoList, you do so in a loop where it is overwritten multiple times.

Fix

Try changing onQuerySucceededNew to:

onQuerySucceededNew(){
  console.log("onQuerySucceededNew!");
  var listItemEnumerator = collListItem.getEnumerator();

  const todoList = [];  // New array to hold items

  while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    todoList.push(oListItem.get_item('Title'));  // add item instead of ovewriting
    console.log("this.todoList: " + this.todoList);
  }

  this.todoList = todoList;  // set the component data property

  console.log("this.todoList: " + this.todoList);
  console.log("this.todoList.toString(): " + this.todoList.toString());
  console.log("this.todoList.length): " + this.todoList.length);
}

JavaScript this.todoList.filter is not a function

3 Answers