HTML веб-форма vals для моих данных JavaScript Obj

Question

У меня есть предустановленные данные JS obj, как показано ниже в пределах var json; Я пытаюсь создать простую HTML-форму; где я хотел бы взять пользовательский ввод и записать запись в виде набора данных в моем исходном объекте JS.

Ниже приведены исходные данные JS obj. Представленные пользовательские входные данные будут заполнять значения «Имя, Тип, DateModifed и Размер» как набор данных новый в пределах json. Проблема заключается в получении значений поля ввода для отправки в мой объект JS в качестве дополнительных данных.

var json =[{
            "Name": "zips",
            "Type": "Directory",
            "DateModified": "6/14/2018 17:22:50",
            "Size": "5 KB",
        }, {
            "Name": "presets",
            "Type": "Directory",
            "DateModified": "5/11/2018 7:32:10",
            "Size": "2 KB",
        }, {
            "Name": "workflow",
            "Type": "Non-Directory",
            "DateModified": "6/26/2018 10:29:59",
            "Size": "6 KB",
        },{
            "Name": "software",
            "Type": "Directory",
            "DateModified": "3/16/2018 10:29:59",
            "Size": "16 KB",
        },{
            "Name": "mmm_data",
            "Type": "Directory",
            "DateModified": "6/27/2018 1:19:29",
            "Size": "3 KB",
        }, 
         // i.e. would like new block to populate via web form entry
        {
            "Name": "jobs",
            "Type": "Directory",
            "DateModified": "4/27/2018 11:59:59",
            "Size": "3 KB",
        }, 
         // end area outline
];

HTML-форма:

<code> <div id="addUpload">
            <p>Insert details below for new upload:</p>
            <form id="test" action="#" method="post">
            <div class="form-group">
                <label for="name">Name</label>
                <input class="form-control" type="text" name="name" id="name" />
            </div>
            <div class="form-group">
                <label for="select">Type</label>
                <select name="select" class="form-control">
                    <option value="none" selected="selected">Directory</option>
                    <option value="nonDir">Non-Directory</option>
                </select>

            </div>
            <div class="form-group">
                <label for="email">Date Modified</label>
                <input class="form-control" type="text" name="dateM" id="dateM" />
            </div>
            <div class="form-group">
                <label for="size">Size</label>
                <input class="form-control" type="sized" name="sized" id="sized" />
            </div>
            <p>
                <input type="submit" value="Upload New" class="btn btn-primary btn-block" />
            </p>
        </form> 
        <pre id="output">

недавняя неудачная логика:

//    function UploadAdd() {
//        function toJSONString( form ) {
//            var obj = {};
//            var elements = form.querySelectorAll( "input, select, textarea" );
//            for( var i = 0; i < elements.length; ++i ) {
//                var element = elements[i];
//                var name = element.name;
//                var value = element.value;
//
//                if( name ) {
//                    obj[ name ] = value;
//                }
//            }
//
//            return JSON.stringify( obj );
//        }
//
//        document.addEventListener( "DOMContentLoaded", function() {
//            var form = document.getElementById( "test" );
//            var output = document.getElementById( "output" );
//            form.addEventListener( "submit", function( e ) {
//                e.preventDefault();
//                var json = toJSONString( this );
//                output.innerHTML = json;
//
//            }, false);
//
//        });

визуал (проверка не проблема, просто обработка сообщения):

Answer 1

Это может быть то, что вы хотите. Это просто операция «выдвигать в массив» с событием click.

var json =[{
            "Name": "zips",
            "Type": "Directory",
            "DateModified": "6/14/2018 17:22:50",
            "Size": "5 KB",
        }, {
            "Name": "presets",
            "Type": "Directory",
            "DateModified": "5/11/2018 7:32:10",
            "Size": "2 KB",
        }, {
            "Name": "workflow",
            "Type": "Non-Directory",
            "DateModified": "6/26/2018 10:29:59",
            "Size": "6 KB",
        },{
            "Name": "software",
            "Type": "Directory",
            "DateModified": "3/16/2018 10:29:59",
            "Size": "16 KB",
        },{
            "Name": "mmm_data",
            "Type": "Directory",
            "DateModified": "6/27/2018 1:19:29",
            "Size": "3 KB",
        }, 
         // i.e. would like new block to populate via web form entry
        {
            "Name": "jobs",
            "Type": "Directory",
            "DateModified": "4/27/2018 11:59:59",
            "Size": "3 KB",
        }, 
         // end area outline
];


document.querySelector("#submit").onclick=()=>{
	json.push({
		Name:document.querySelector("#name").value,
		Type:document.querySelector("select").value,
		DateModified:dateM.value,
		Size:sized.value
	});

output.innerText=JSON.stringify(json);

}

<div id="addUpload">
    <p>Insert details below for new upload:</p>
    <form id="test" action="#" method="post">
    <div class="form-group">
        <label for="name">Name</label>
        <input class="form-control" type="text" name="name" id="name" />
    </div>
    <div class="form-group">
        <label for="select">Type</label>
        <select name="select" class="form-control">
            <option value="none" selected="selected">Directory</option>
            <option value="nonDir">Non-Directory</option>
        </select>

    </div>
    <div class="form-group">
        <label for="email">Date Modified</label>
        <input class="form-control" type="text" name="dateM" id="dateM" />
    </div>
    <div class="form-group">
        <label for="size">Size</label>
        <input class="form-control" type="sized" name="sized" id="sized" />
    </div>
    <p>
        <input id="submit" type="button" value="Upload New" class="btn btn-primary btn-block" />
    </p>
</form> 
<div id="output"></div>