Kodieren Array-Elemente in JSON mit nur JS oder anderen Client-Seiten-Bibliotheken

Question

Ich arbeite an einer Joomla-Komponente und es nicht die Serialisierung meiner Formulardaten die Art, wie ich es brauche, so dass meine Lösung zu erstellen sein wird hidden textarea und befüllen Sie es mit den json-Daten, die erstellt werden, wenn das Formular auf der Client-Seite ausgefüllt wird, dann senden Sie einfach den Textbereich.

<input type="text" name="jform[work_experience][]employer"><input type="text" name="jform[work_experience][]position"><br/> 
    <input type="text" name="jform[work_experience][]employer"><input type="text" name="jform[work_experience][]position"><br/> 
    <input type="text" name="jform[work_experience][]employer"><input type="text" name="jform[work_experience][]position"><br/> 

Stellen Sie sich meine Form so aussieht, wo die Zahl der „Reihen“ dynamisch sind, je nachdem, wie viele der Bedürfnisse der Nutzer. Dann möchte ich diese in eine JSON-String serialisiert werden, die wie etwas aussieht:

[ 
    { 
    "employer": "apple", 
    "position": "contract killer" 
    }, 
    { 
    "employer": "microsoft", 
    "position": "bathroom attendant" 
    }, 
    { 
    "employer": "samsung", 
    "position": "window washer" 
    } 
] 

Wenn ich die Felder umbenennen müssen sie die richtige Struktur zu erhalten, so sein.

Gibt es eine jQuery-Funktion, die es mir erlauben würde, jform[work_experience] zu nehmen und einen JSON-String auszuspucken?

Answer 1

Hier gehen Sie, fügte ich Daten-Typ, um Sachen einfacher zu wählen. Und es verwendet natives JS, so dass Sie sich keine Gedanken über Kollisionen mit Frameworks oder Bibliotheken machen sollten. Ich nehme auch an, dass die Felder zusammenkommen.

<form id="uniqueId"> 
    <input type="text" name="jform[work_experience][]employer" data-type="employer" value="apple"> 
    <input type="text" name="jform[work_experience][]position" data-type="position" value="contract killer"><br/> 

    <input type="text" name="jform[work_experience][]employer" data-type="employer" value="apples"> 
    <input type="text" name="jform[work_experience][]position" data-type="position" value="Designer"><br/> 

    <input type="text" name="jform[work_experience][]employer" data-type="employer" value="appe"> 
    <input type="text" name="jform[work_experience][]position" data-type="position" value="Sales rep"><br/> 

</form> 

JS:

var inputFields = document.querySelectorAll('#uniqueId input'); 
var dataObject = []; 
for(var x = 0 ; x < inputFields.length ; x++){ 
    if(inputFields[ x ].dataset.type === "employer"){ 
     var current = {}; 
     current.employer = inputFields[ x ].value; 
     current.position = inputFields[ x + 1 ].value; 
     dataObject.push(current); 
     x++; //skip check for next input 
    } 
} 
//verify that the object holds data. The loop assumes 
//that employer and position come in tandem 
console.log(JSON.stringify(dataObject)); 

Ausgänge:

[{ 
     "employer": "apple", 
     "position": "contract killer" 
}, { 
     "employer": "apples", 
     "position": "Designer" 
}, { 
     "employer": "appe", 
     "position": "Sales rep" 
}] 

EDIT: Feste Datenformat :)