javascript - textarea boxes to aiml categorl pattern json object issue with building json structure in jquery loop -

the problem:

i need take set of looped html dom elements , build json array. format value.name "question-answer" -answer , take name question , replace answer. need way build each pattern / template json object store in ["category"] json array.

i can't seem logic right put questions multiple answers in correct object array format posted below in screen shot of object. i'm using dict xml convert xml json changing object. want build exact same object when user presses save. thus, need take textarea fields , build them correct structure.

example structure:

{     "aiml": {         "@encoding": "utf-8",         "@version": "1.0.1",         "category": [{                 "pattern": "",                 "template": ""             },             {                 "pattern": "",                 "template": ""             },             {                 "pattern": "",                 "template": [{                     "random": {                         "li": ["answer 1", "answer 2"]                     }                 }]             }         ]     } } 

this data output current code below:

this structure need produce html elements.

i've tried control break problems think of. can't seem build correct json structure.

$("#save-bot").click(function(e) {         var value = document.getelementbyid("current-bot").value;         var url = "http://127.0.0.1:5000/save-bot/";          var matches = [].slice.call(document.queryselectorall('[id^=ruleinput]'));          json_payload["aiml"] = {};         json_payload["aiml"]["@encoding"] = {};         json_payload["aiml"]["@encoding"] = "utf-8";         json_payload["aiml"]["@version"] = {};         json_payload["aiml"]["@version"] = "1.0.1";         json_payload["aiml"]["category"] = [];          var insert_payload = {};         var insert_payload_arr = [];          $( matches ).each(function( index, value ) {             if(value.name.includes("-answer")){                 console.log("question: " + value.name.replace("-answer", "") + " answer: " + value.value);             }         });         json_payload["aiml"]["category"] = insert_payload_arr;         console.log(json_payload);     }); 

html text area, how textareas laid out if need visual aid:

idk why can't see logic need program i've been head desk 5 hours now.

here code generates textareas json xml.

//this gets current chatbots information $("#menu-toggle").click(function(e) {     var url = "http://127.0.0.1:5000/get-bot/";     var html = "";     $.ajax({         url: url,         type: "get",         success: function(data) {             $.each(data, function(key,val){             console.log(data);                    $.each(val['category'], function(keyd,vald){                        if ( typeof vald['template'] == "object" ){                             // multi level pattern                             html+='<div id="'+vald['pattern']+'" class="row" name="question" style="background-color: #314458;margin: 10px;border-radius:15px;">';                             $.each(vald['template'], function(keyf,valf){                                 $.each(valf, function(keyff,valff){                                     html += "<li id='rule'>question<br><textarea id='ruleinput' name='" + vald['pattern'] + "' value='" + vald['pattern'] + "'>"+vald['pattern']+"</textarea>";                                     $.each(valff, function(keyfff,valfff){                                         html += "<li id='rule'>random response<br><textarea id='ruleinput' name='" + vald['pattern']+"-answer" + "' value='" + valfff + "'>"+valfff+"</textarea></li>";                                     });                                     html += "</li>";                                 });                             });                             html+='</div>';                        }else{                             html+='<div id="'+vald['pattern']+'" class="row" name="question" style="background-color: #314458;margin: 10px;border-radius:15px;">';                            //single level pattern                            html += "<li id='rule'>question<br><textarea id='ruleinput' name='" + vald['pattern'] + "' value='" + vald['pattern'] + "'>"+vald['pattern']+"</textarea></li>";                            html += "<li id='rule'>response<br><textarea id='ruleinput' name='" + vald['pattern']+"-answer"  + "' value='" + vald['template'] + "'>"+vald['template']+"</textarea></li>";                            html+='</div>';                        }                     });             });             document.getelementbyid('current-bot').innerhtml = html;         }     }); });