POST request not posting the value of one property Javascript/jQuery-CodePudding

I am playing with jQuery and Javascript. Working on a TODOs app using li items and with this API: https://jsonplaceholder.typicode.com/todos. I receive 200 items from this API. I am trying to post a new item created with a click from the button (btn-add) and everything works as expected, with the exception that the post request is leaving in blank one property which is "title". Here is my HTML and JS code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/CSS/styles.css" rel="stylesheet">
    <title>TO DO List</title>
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="/JS/index.js"></script>
</head>
<body>
    <div id="inputDIV">
        <input id="input" type="text" placeholder="Enter new item">
    </div>
    <div id="buttons">
        <button id="btn-add">Add List Item</button>
        <button id="btn-update">Update First Item</button>
        <button id="btn-delete">Delete First Item</button>
    </div>
    <div id="ulDIV">
        <ul id="list">
           <!-- Here we will insert the list items via JS-->
        </ul>
    </div>
    
</body>
</html>


$(document).ready(function(){  
    let inputNew = $('#input');
    let list = $('#list');
    let currentInputValue = "";
    $('#btn-add').click(createTODOItemAtBackend);
    inputNew.on({
        "input": function(e){
            console.log(e.target.value);
            currentInputValue = e.target.value;
        },
        "keyup": function(e){
            if(e.keyCode === 13){
                createTODOItemAtBackend();
            }
        }
    })
    getTODOListFromBackend();
    function clearInputData(){
        inputNew.val("");
        currentInputValue = "";
    }
    function createTODODynamically(id, title){
        let newListElement = document.createElement("li");
        let textNode = document.createTextNode(title);
        newListElement.appendChild(textNode);
        newListElement.id = id;
        return newListElement;
        }
    function getTODOListFromBackend(){
        $.get("https://jsonplaceholder.typicode.com/todos", function(data, status){
            let response = data;
            for(let i=0; i < response.length; i  ){
                list.append(createTODODynamically(response[i].id, response[i].title));
            }
        });
    }
    let obj = { 
        "userId": 1,
        "title": currentInputValue,
        "completed": false
    };
    function createTODOItemAtBackend(){
        $.post("https://jsonplaceholder.typicode.com/todos", obj, function(data, status){
            let response = data;
            list.append(createTODODynamically(response.id, currentInputValue));
            console.log("Item Added to the list!");
            clearInputData();
        });
    }
    })

And this is what I see when I read the post information in the web browser:

{userId: "1", title: "", completed: "false", id: 201}
completed: "false"
id: 201
title: ""
userId: "1"

Can somebody help me, why is the property "title" being posted as empty? Thanks in advance

CodePudding user response：

The answer is in what @epascarello hinted on the OP's comment. You set currentInputValue when the input value is changed but there's no code which updates this value to obj.

"input": function(e){
     console.log(e.target.value);
     currentInputValue = e.target.value;
     //Add this line
     obj.title = e.target.value;
 },

Additional note: You really don't need currentInputValue if you refactor your code, using obj should do the job.