Почему выводятся одно и то же значение несколько раз?

Question

[malexander]

Добрый вечер, в первый раз на хабре, надеюсь подскажите в чем дело.
Суть такая, что при нажатии на кнопку, данные отправляются на сервер(в данном случае ссылки на соц-сети), и должны добавляться в БД. Но почему то, выводится только одно значение 4 раза, а не 4 разных значений
JS

// FormData
        var form = new FormData() 
        $(".save-links button").click(function () {
            var val = GetValuesLink()
            var storage = {
                Mname: [
                    { mname: "vk" },
                    { mname: "tg" },
                    { mname: "inst" },
                    { mname: "facebook" }
                ],
                Link: [
                    { link: val.vk },
                    { link: val.tg },
                    { link: val.inst },
                    { link: val.facebook }
                ]
            }
            var storageForSubmit = {
                Mname: "",
                Link: ""
            }
            for (var i = 0; i < storage.Link.length; i++) {
                storageForSubmit.Mname = storage.Mname[i].mname
                storageForSubmit.Link = storage.Link[i].link

                form.append("Media", JSON.stringify(storageForSubmit))
                SubmitDataLinks(storageForSubmit)
            }
        })
        function SubmitDataLinks(storageForSubmit) {
            $(document).ready(function(){
                $.ajax({
                type: "POST",
                url: "@Url.Action("SaveFile")",
                data: form,
                processData: false,
                contentType: false,
                success: function () {
                    console.log("Успешно!")
                },
                error: function () {
                    console.log("Ошибка!")
                }
            })
            })
        }
        function GetValuesLink() {
            var vk = document.querySelector(".link-vk input").value
            var tg = document.querySelector(".link-tg input").value
            var inst = document.querySelector(".link-inst input").value
            var facebook = document.querySelector(".link-facebook input").value

            return {
                vk: vk,
                tg: tg,
                inst: inst,
                facebook: facebook
            }
        }

SERVER

[HttpPost]
        public void SaveFile(UploadMedia Medium)
        {
            Console.WriteLine(Medium.media);
        }

Сам класс который хранит значения

public class UploadMedia
{
    public string? media { get; set; }
}

Результат вот такой..

Comments

[malexander]

GetValuesLink - получает и возвращает значения
Storage - объект, который хранит в себе имя ссылки, и саму ссылку введенную пользователем
storageForSubmit - должна хранить в себе одну ссылку и имя ссылки, после отправляться на сервер(проще говоря соортировка, после которого данные одной ссылки записываются в formData, записываются в формат json, и отправляются на сервер)
Но вопрос был не в этом, а в другом)

[Василий Банников]

Код ужасно запутанный. Начать хотябы с этого:

var storageForSubmit = {
                Mname: "",
                Link: ""
            }
            for (var i = 0; i < storage.Link.length; i++) {
                storageForSubmit.Mname = storage.Mname[i].mname
                storageForSubmit.Link = storage.Link[i].link

                form.append("Media", JSON.stringify(storageForSubmit))
                SubmitDataLinks(storageForSubmit)
            }

Почему один и тот же объект перезаписывается? Зачем вот этот FormData на самом верху? Что с именованием? Почему всё на var-ах? Почему всё через jquery? Что вообще значит contentType: false????

[malexander]

Rise, По поводу читабельности, я его исправлял кучу раз, т.к не мог понять в чем проблема,и пробовал разные способы)). А вот за подсказку по поводу $(document).ready спасибо, я пока не особо углубляюсь в либы js-a.

[Василий Банников]

malexander, предлагаю:
1. Выкинуть jquery и почитать MDN
2. Начинать с простого, чтобы исключить ошибки из-за сложности.

Попробуй отдельно решить задачи:
1. Обрабатывать нажатие на кнопку и высветить alert при нажатии
2. Прочитать текст из инпутов и вывести его в alert
3. Отправить какой-нибудь запрос на бэк

Параллельно с этим поизучать, какие есть виды переменных в js, какие есть циклы, как работать с объектами, и тд.

Answer 1

[Василий Банников]

Код на js сейчас на столько плохой и запутанный, что легче его полностью переписать, чем разбираться, что в нём не так.
Больше всего у меня подозрений на странную функцию SubmitDataLinks и странное перекладывание данных из одного в другое в обработчике нажатия на кнопку

Спойлер

Перекладывание

var storage = { // Зачем вообще такая табличная форма нужна?
                Mname: [
                    { mname: "vk" },
                    { mname: "tg" },
                    { mname: "inst" },
                    { mname: "facebook" }
                ],
                Link: [
                    { link: val.vk },
                    { link: val.tg },
                    { link: val.inst },
                    { link: val.facebook }
                ]
            }
            var storageForSubmit = { // Почему один и тот же объект постоянно перезаписывается?
                Mname: "",
                Link: ""
            }
            for (var i = 0; i < storage.Link.length; i++) {
                storageForSubmit.Mname = storage.Mname[i].mname // А не проще было бы for-of сделать?
                storageForSubmit.Link = storage.Link[i].link

                form.append("Media", JSON.stringify(storageForSubmit))
                SubmitDataLinks(storageForSubmit) // Вот сюда в итоге один и тот же объект будет отправляться
            }

Отправка:

function SubmitDataLinks(storageForSubmit) { // storageForSubmit даже не используется
            $(document).ready(function(){// зачем оно в .ready обёрнуто???
                $.ajax({
                type: "POST",
                url: "@Url.Action("SaveFile")",
                data: form, // Поведение при использовании FormData недокументировано
                processData: false,
                contentType: false, // Поведение при contentType=false недокументировано
                success: function () {
                    console.log("Успешно!")
                },
                error: function () {
                    console.log("Ошибка!")
                }
            })
            })
        }

1. Меняем серверную часть:
Контроллер:

[HttpPost]
public void SaveFile([FromBody] UploadMedia data)
{
  Console.WriteLine(data);
}

UploadMedia:

public record UploadMedia(string MediaName, string MediaLink);

2. Меняем нафиг весь js:

document.addEventListener('DOMContentLoaded', () => {
    const saveFileEndpoint = '@Url.Action("SaveFile")';
    const readLinks = () => ({
        "vk": document.querySelector("input.link-vk").value,
        "tg": document.querySelector("input.link-tg").value,
        "inst": document.querySelector("input.link-inst").value,
        "facebook": document.querySelector("input.link-facebook").value,
    })

    const submitLinks = async (links) => {
        for (const mediaWithLink of links) {
            await fetch(saveFileEndpoint, {
                method: "POST",
                body: JSON.stringify(mediaWithLink),
                headers: {
                    "Content-Type": "application/json"
                }
            })
        }
    }

    const onSaveLinks = async () => {
        const allLinks = readLinks();
        const linksList = Object.keys(allLinks).map(key => ({ "MediaName": key, "MediaLink": allLinks[key] }));
        try {
            await submitLinks(linksList);
            console.log("Ссылки сохранены");
        } catch (e) {
            console.error(`Произошла ошибка при отправке ссылок: ${e.message}`);
        }
    };

    document.querySelector("button.save-links").addEventListener("click", onSaveLinks);
});