Ajax почтовый запрос (HTML в Express приложение) не работает

Question

Я создаю приложение express для хранения рецептов. С помощью формы html «новый рецепт» пользователи могут добавлять столько ингредиентов, сколько им нужно, которые динамически отображаются через jquery и сохраняются в массиве «ингредиенты». Поскольку я не могу отправить этот массив по HTTP, я пытаюсь отправить новый объект рецепта с помощью AJAX почтового запроса. У меня ограниченный опыт работы с AJAX, и я не могу понять, почему почтовый запрос вообще не работает. Вот мой интерфейс jquery:

script type="text/javascript">
    //$(document).ready(() => alert("Jquery works!"));
    $(document).ready(() => {
        $("#addIngBtn").click(() => {
            let ingredient = $("#ingredient").val();
            let quantity = $("#quantity").val();
            $("#ingredient").val(""); //reset ingredient input
            $("#quantity").val("");
            $("ul").append(
                "<li>" + ingredient + " - " + quantity + "</li>"
            );
        });
    })

    $("#newRecipeForm").submit(() => {
        event.preventDefault();
        var ingredients = [];
        $("#ingredientListUL li").each((index, element) =>
            ingredients.push($(element).text())
        )
        var recipe = {
            name: $("#name").val(),
            image: $("#image").val(),
            oneLiner: $("#oneLiner").val(),
            method: $("#method").val(),
            ingredients: ingredients
        }
        $.ajax({
            url: "/recipes",
            type: "POST",
            dataType: "json",
            data: recipe,
            contentType: "application/json",
            complete: function () {
                console.log("process complete");
            },
            success: function (data) {
                console.log(data);
                console.log("process success");
            },
            error: function () {
                console.log(err);
            }
        })

    })

И мой интерфейс:

// note, this is in router file where default route "/" is equivalent to "/recipes"
router.post("/", (req, res) => {
    console.log(req.body.recipe);

})

Что я делаю не так?

Answer 1

Здесь не эксперт, но отправляемые вами данные не содержат ключ рецепта. В вашем бэкэнде (хаха) попробуйте

router.post("/", (req, res) => { 
    console.log(req.body.name); 
})