Wie verwendet man jQuery/JavaScript um eine Datenstruktur beim Senden von Formularen zu erstellen?

Question

Ich versuche, Formulareingabewerte aufzunehmen und sie in ein Array von Objekten einzufügen, die dann an MongoDB gesendet werden. Der Teil, mit dem ich kämpfe, ist, wie man ein Array innerhalb der Objekte bekommt (siehe Kommentar im Code unten).

HTML:

<form> 
    <div> 
    <h3>Main Input:<input type="textbox"></h3> 
     <h4>Sub-input 1:<input type="textbox"></h4> 
     <h4>Sub-input 2:<input type="textbox"></h4> 
     <h4>Sub-input 3:<input type="textbox"></h4> 
    </div> 
    <div> 
    <h3>Main Input:<input type="textbox"></h3> 
     <h4>Sub-input 1:<input type="textbox"></h4> 
     <h4>Sub-input 2:<input type="textbox"></h4> 
     <h4>Sub-input 3:<input type="textbox"></h4> 
    </div> 
    <div> 
    <h3>Main Input:<input type="textbox"></h3> 
     <h4>Sub-input 1:<input type="textbox"></h4> 
     <h4>Sub-input 2:<input type="textbox"></h4> 
     <h4>Sub-input 3:<input type="textbox"></h4> 
    </div> 
    <button type="submit">Submit</button> 
</form> 

Die Datenstruktur ich einreichen erstellen möchten, die dann zu MongoDB req.body mit gesendet werden, sollte wie folgt aussehen:

[{ 
    mainInput: "User's main input", 
    subInputs: ["User's sub input 1", "User's sub input 2", "User's sub input 3"] 
}, { 
    mainInput: "User's main input", 
    subInputs: ["User's sub input 1", "User's sub input 2", "User's sub input 3"] 
}, { 
    mainInput: "User's main input", 
    subInputs: ["User's sub input 1", "User's sub input 2", "User's sub input 3"] 
}] 

Hier ist die JavaScript und jQuery Ich benutze derzeit mit dem Teil, ich brauche Hilfe mit kommentierten:

Hinweis: Ich verwende hier H3s und H4s, nur weil ich es einfacher fand, mit jQuery zu traversieren, aber wenn es einen besseren oder mehr minimalen Weg gibt, lass es mich wissen.

Codepen Link: http://codepen.io/anon/pen/JKrKqv

Danke im Voraus für jede Führung, ist es sehr zu schätzen.

Answer 1

Hier ist eine Lösung Karte den Ansatz Sie in Ihrer Frage erwähnt:

1. Zuerst einige Klassen-Selektoren zu Ihrem HTML hinzufügen, speziell main zu Ihrem Haupteingang und sub der Teileingänge
2. dann die Daten aus den Eingabefeldern sammeln, 1 Hauptschleife unter Verwendung die Daten aus dem Haupt zu erhalten Eingabe und dann eine geschachtelte Schleife, um die Daten von den Untereingaben zu erhalten. Schieben Sie diese Daten auf einige Variablen, damit wir später darauf verweisen können.
3. Bevor die Hauptschleife endet, rufen wir Input Konstruktor und übergeben die Daten, die wir in den Variablen gespeichert haben.

Heres ein Beispiel Codepen

Hier ist der Code:

JS

function Input(mainInput, subInput){ 
    this.mainInput = mainInput; 
    this.subInput = subInput; 
}  

$("button").click(function(event){ 
    event.preventDefault(); 
    //Array of Input objects 
    var inputArray = []; 

    $(".main").each(function(){  
    var input = $('input', this).val(); 
    //Array of SubInput objects 
    var arrayOfSubInputs = []; 

    $(this).siblings().each(function() { 
     var subInput = $(this).find('input').val(); 
     arrayOfSubInputs.push(subInput);  
    }); 
    //Now that our data is stored, we can call the constructors 

    var input = new Input(input, arrayOfSubInputs); 

    //Push the Input objects to the input array 
    inputArray.push(input); 
    }); 
    $('.results').empty(); 
    //Loop on each array index and append it to results as json 
    $('.results').append(JSON.stringify(inputArray)); 
}); 

HTML

<form> 
    <div> 
    <h3 class="main">Main Input:<input type="textbox"></h3> 
    <h4 class="sub">Sub-input 1:<input type="textbox"></h4> 
    <h4 class="sub">Sub-input 2:<input type="textbox"></h4> 
    <h4 class="sub">Sub-input 3:<input type="textbox"></h4> 
    </div> 
    <div> 
    <h3 class="main">Main Input:<input type="textbox"></h3> 
    <h4 class="sub">Sub-input 1:<input type="textbox"></h4> 
    <h4 class="sub">Sub-input 2:<input type="textbox"></h4> 
    <h4 class="sub">Sub-input 3:<input type="textbox"></h4> 
    </div> 
    <div> 
    <h3 class="main">Main Input:<input type="textbox"></h3> 
    <h4 class="sub">Sub-input 1:<input type="textbox"></h4> 
    <h4 class="sub">Sub-input 2:<input type="textbox"></h4> 
    <h4 class="sub">Sub-input 3:<input type="textbox"></h4> 
    </div> 
    <hr> 
    <button type="submit">Submit</button> 
</form> 
<aside><h3>Results:</h3> 
    <code class="results"></code> 
</aside> 

Und ein paar CSS, um es schön zu machen.

CSS

body { 
    display: flex; 
} 
aside { 
    max-width: 35%; 
    margin: 15px; 
    display: flex; 
    flex-direction: column; 
} 

code { 
    display: block; 
    overflow: hidden; 
    max-width: 100%; 
} 
form { 
    display: inline-block; 
} 
div { 
    display: inline-block; 
    padding: 20px; 
    margin: 3px; 
    border: 1px solid #e0e0e0; 
} 
button { 
    height: 30px; 
    display: flex; 
    margin: auto; 
} 
input { 
    display: flex; 
} 

Answer 2

Wie bei allen sich wiederholenden HTML-Modulen können Sie einfache Klassen verwenden, indem Sie allgemeine Klassen für allgemeine Elemente verwenden. Sie verwenden im Grunde Tagnamen für Sie erstellen Klassen, sondern werden dann durch Standard css/behviors für diese Tags

<div class="data-row"> 
    Main Input: <input class="main" type="text"> 
    Sub-input 1:<input class="sub" type="text"> 
    Sub-input 2:<input class="sub" type="text"> 
    Sub-input 3:<input class="sub" type="text"> 
</div> 

Mit Klassen beschränkt man die innere html mit jedem internen Struktur, die Sie jetzt

wollen einrichten können Sie können alle Reihen Daten durchlaufen und die Daten innerhalb jeder zu Ihrem endgültigen Array

$('form').submit(function(e) { 
    e.preventDefault(); 
    // iterate outer containers and get values of inputs inside instances 
    var arr = $('.data-row').map(function() { 
     var $row = $(this), 
     mainVal = $row.find('input.main').val(), 
     subArr = $row.find('input.sub').map(function() { 
      return this.value 
     }).get() 
     // return object for each data-row 
     return { 
     mainInput: mainVal, 
     subInputs: subArr 
     }; 

    }).get(); 
    // send to server 
    $.post(url, arr); 
});