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

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

javascripthtmljquery


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sang Suantak

Related Questions