Saving ToDo List elements in a list using JavaScript

Question

I used Vue.js to create a To-Do component which looks like this:

The problem is that it saves the items in localStorage. What I want to achieve is to save the items in a SharePoint list called BasketballGoals in a column goals. So that the goals get loaded again whenever the user uses the application. Currently, this is the JavaScript part:

<script>
    export default {
        name: 'BasketballGoals',
        data() {
            return {
                todoList: [
                ],
                new_todo: '',
                showComplete: false,
            };
        },
        computed: {},
        mounted() {
            this.getTodos();
        },
        watch: {
            todoList: {
                handler: function (updatedList) {
                    localStorage.setItem('todo_list', JSON.stringify(updatedList));
                },
                deep: true
            }
        },
        computed: {
            pending: function () {
                return this.todoList.filter(function (item) {
                    return !item.done;
                })
            },
            completed: function () {
                return this.todoList.filter(function (item) {
                    return item.done;
                });
            },
            completedPercentage: function () {
                return (Math.floor((this.completed.length / this.todoList.length) * 100)) + "%";
            },
            today: function () {
                var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                var today = new Date();
                var dd = today.getDate();
                var mm = today.getMonth() + 1; //January is 0!
                var yyyy = today.getFullYear();

                if (dd < 10) {
                    dd = '0' + dd
                }

                if (mm < 10) {
                    mm = '0' + mm
                }

                today = {
                    day: weekday[today.getDay()],
                    date: mm + '-' + dd + '-' + yyyy,
                }

                return (today);
            }
        },
        methods: {
            // get all todos when loading the page
            getTodos() {
                if (localStorage.getItem('todo_list')) {
                    this.todoList = JSON.parse(localStorage.getItem('todo_list'));
                }
            },
            // add a new item
            addItem() {
                // validation check
                if (this.new_todo) {
                    this.todoList.unshift({
                        id: this.todoList.length,
                        title: this.new_todo,
                        done: false,
                    });
                }
                // reset new_todo
                this.new_todo = '';
                // save the new item in localstorage
                return true;
            },
            deleteItem(item) {
                this.todoList.splice(this.todoList.indexOf(item), 1);
            },
            toggleShowComplete() {
                this.showComplete = !this.showComplete;
            },
            clearAll() {
                this.todoList = [];
            }
        }
    }
</script>

I thought of doing something like this to add the user input into the list column, but I don't know if that is the right approach:

addItem: function() {
    var listName = "BasketballGoals";
    var select = "$select=Goals";
    var baseUrl = this.$store.state.baseUrl;
    baseUrl += "GetByTitle('" + listName + "')/items";
    return this.getFormDigest(baseUrl).then(function(data) {
        $.ajax({
            url: baseUrl,
            type: "POST",
            data: JSON.stringify(item),
            headers: {
                accept: "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
                "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
            },
            async: false,
            success: function(data, textStatus, xhr) {
                this.new_todo = this.eventData.goals;
                return true;
            },
            error: function(xhr, textStatus, errorThrown) {
                alert("fail");
                alert("error:" + JSON.stringify(xhr));
                $("#dialog" + "records").html(" [0]");
            }
        });
    });
},
getFormDigest: function() {
    return $.ajax({
        url: this.$store.state.baseUrlContextinfo,
        method: "POST",
        headers: {
            Accept: "application/json; odata=verbose"
        }
    });
},

Here's the full component

Can someone help me?

Are you trying to create a new list item or updating existing item with to-do data? — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jan 31, 2020 at 4:39

Ganesh Sanap - MVP · Accepted Answer · 2020-01-31 04:44:27Z

Try below code to add new list item in SharePoint list using REST API:

function CreateListItemWithDetails(listName) {
    var item = {
        "__metadata": { "type": "SP.Data.BasketballGoalsListItem" },
        "Title": "New Goals title",
        "Goals": this.todoList // Pass your To-Do list data here in 'string' format assuming 'Goals' is multiple lines of text column
    };

    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
}

//Usage of function - Pass display name of list to function
CreateListItemWithDetails(BasketballGoals);

Check more details at:

Create Retrieve Update and Delete SharePoint List Item using REST API and JQuery.

Stack Exchange Network

Saving ToDo List elements in a list using JavaScript

1 Answer 1

Your Answer

Hot Network Questions

Saving ToDo List elements in a list using JavaScript

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions