如何插入 SQL 這個 object - keys + Arrays of values

Question

我整天都在嘗試使用數據映射器方法將這個 object 插入 SQL

{   year: [ '2022', '2022' ],   month: [ 'mars', 'mars' ],   day: [ '15', '15' ],   logo: [ 'projection', 'mécanique' ],   title: [ 'Ciné ', 'Réparation' ],   description: [ "c'est bien", "c'est cool" ] }

我在表單/發布方法后得到了這個 object。

數據映射器.js

const query = {
                text: `INSERT INTO "events"("year", "month", "day", "logo", "title", "description") VALUES ($1, $2, $3, $4,$5, $6)`,
                values: [data.year, data.month, data.day, data.logo, data.title, data.description]
            }

我只能以這種形式插入一行數據（我想這很正常），但我添加了一個按鈕來克隆我的“事件卡”。 這就是問題開始的地方。 事件卡的編號只能在許多...

**我的 html 代碼 **

 <form method="POST" action="/la-roue-libre">
        <div class="events">
            <div class="event-card">

                <input type="text" name="year" placeholder="Année" value="2022">
                <select name="month" placeholder="month">
                    <option value="">--Quel mois?--</option>
                    <option value="janvier">janvier</option>
                    <option value="février">février</option>
                    <option value="mars">mars</option>
                    <option value="avril">avril</option>
                    <option value="mai">mai</option>
                    <option value="juin">juin</option>
                    <option value="juillet">juillet</option>
                    <option value="aout">aout</option>
                    <option value="septembre">septembre</option>
                    <option value="octobre">octobre</option>
                    <option value="novembre">novembre</option>
                    <option value="décembre">décembre</option>

                </select>
                <input type="text" name="day" placeholder="Jour de l'évènement">
                <select name="logo" placeholder="logo">
                    <option value="">--choisir type logo--</option>
                    <option value="balade">Balade</option>
                    <option value="projection">Projection</option>
                    <option value="mécanique">Mécanique</option>
                    <option value="jeux">Jeux</option>
                    <option value="musique">Musique</option>
                </select>
                <input type="text" name="title" placeholder="Titre">
                <textarea name="description" placeholder="Description" cols="20" rows="5"></textarea>

                <input type="reset">
            </div>
        </div>
        <div class="button">Ajouter</div>
        <button class="publish">Publier</button>

    </form>

對於我的英語，將不勝感激和抱歉。

以各種方式循環，但沒有找到解決方案或一個一個地插入，但這不是我所期望的。

Answer 1

您可以發送更容易分成可插入塊的服務器數據。 我假設您使用 ajax 發送數據。這是一個循環遍歷多個“事件卡”元素的方法。

 document.querySelector('.publish').addEventListener('click', (e) => { let values = []; document.querySelectorAll('.event-card').forEach(div => { let obj = { year: div.querySelector('[name=year]').value, day: div.querySelector('[name=day]').value, title: div.querySelector('[name=title]').value, description: div.querySelector('[name=description]').value, } values.push(obj); }) console.log('ready to send to the server:', values); })

 <form method="POST" onsubmit='return false' action="/la-roue-libre"> <div class="events"> <div class="event-card"> <input type="text" name="year" placeholder="Année" value="2022"> <select name="month" placeholder="month"> <option value="">--Quel mois?--</option> <option value="janvier">janvier</option> <option value="février">février</option> <option value="mars">mars</option> <option value="avril">avril</option> <option value="mai">mai</option> <option value="juin">juin</option> <option value="juillet">juillet</option> <option value="aout">aout</option> <option value="septembre">septembre</option> <option value="octobre">octobre</option> <option value="novembre">novembre</option> <option value="décembre">décembre</option> </select> <input type="text" name="day" placeholder="Jour de l'évènement"> <select name="logo" placeholder="logo"> <option value="">--choisir type logo--</option> <option value="balade">Balade</option> <option value="projection">Projection</option> <option value="mécanique">Mécanique</option> <option value="jeux">Jeux</option> <option value="musique">Musique</option> </select> <input type="text" name="title" placeholder="Titre"> <textarea name="description" placeholder="Description" cols="20" rows="5"></textarea> <input type="reset"> </div> <div class="event-card"> <input type="text" name="year" placeholder="Année" value="2022"> <select name="month" placeholder="month"> <option value="">--Quel mois?--</option> <option value="janvier">janvier</option> <option value="février">février</option> <option value="mars">mars</option> <option value="avril">avril</option> <option value="mai">mai</option> <option value="juin">juin</option> <option value="juillet">juillet</option> <option value="aout">aout</option> <option value="septembre">septembre</option> <option value="octobre">octobre</option> <option value="novembre">novembre</option> <option value="décembre">décembre</option> </select> <input type="text" name="day" placeholder="Jour de l'évènement"> <select name="logo" placeholder="logo"> <option value="">--choisir type logo--</option> <option value="balade">Balade</option> <option value="projection">Projection</option> <option value="mécanique">Mécanique</option> <option value="jeux">Jeux</option> <option value="musique">Musique</option> </select> <input type="text" name="title" placeholder="Titre"> <textarea name="description" placeholder="Description" cols="20" rows="5"></textarea> <input type="reset"> </div> <div class="event-card"> <input type="text" name="year" placeholder="Année" value="2022"> <select name="month" placeholder="month"> <option value="">--Quel mois?--</option> <option value="janvier">janvier</option> <option value="février">février</option> <option value="mars">mars</option> <option value="avril">avril</option> <option value="mai">mai</option> <option value="juin">juin</option> <option value="juillet">juillet</option> <option value="aout">aout</option> <option value="septembre">septembre</option> <option value="octobre">octobre</option> <option value="novembre">novembre</option> <option value="décembre">décembre</option> </select> <input type="text" name="day" placeholder="Jour de l'évènement"> <select name="logo" placeholder="logo"> <option value="">--choisir type logo--</option> <option value="balade">Balade</option> <option value="projection">Projection</option> <option value="mécanique">Mécanique</option> <option value="jeux">Jeux</option> <option value="musique">Musique</option> </select> <input type="text" name="title" placeholder="Titre"> <textarea name="description" placeholder="Description" cols="20" rows="5"></textarea> <input type="reset"> </div> </div> <div class="button">Ajouter</div> <button class="publish">Publier</button> </form>