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('<View><Query><Where><Eq><FieldRef Name=\'playerID\'/>' +
                      '<Value Type=\'Text\'>'+playerID+'</Value></Eq></Where></Query></View>');

              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?

Answer 1

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: [],
    }
},

Answer 2

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);
}