javascriptの入力型配列からjsonを作成する

Question

フォームを送信するときに、フォームオブジェクトを取得してオブジェクトを作成しています。今の状況では、私は入力タイプの配列を持っています。たとえば、5つまでの新しい入力タイプのテキストを追加するたびに、クリックタイプの「タスクリンク」の入力タイプがあります。 それは、3、2、5または私はそれは本当にありません

See screenshot for better understanding

<input type="text" name="arr[]"> 
<input type="text" name="arr[]"> 

function submit_task_form (form_obj) { 

    var get_form = document.getElementById(form_obj); 

    var form_data = {}; 
    for(var i=0; i<get_form.length; i++) { 
     form_data.task_link = get_form[i]; 
    } 

Answer 1

以下のコードを参照してください、私はオブジェクトを作成するJavaScriptでそれをどのように処理するかを、将来的に20まで上げる場合には可能性がありオブジェクトまたは配列が必要かどうかを明確にするため、ここでは両方を示すいくつかの例があります。これらの例はES6にあります。私はあなたが構文に精通していない場合は、ES5でそれらを書き換えることができます。

両方の例では、入力要素にはlinkというクラスがあります（他の入力と区別するため）。

<input class="link" value="sdfs" /> 

1）アレイDEMO

入力をピックアップし、mapでそれらを反復：

function getLinks() { 
    const links = document.querySelectorAll('.link'); 
    return [...links].map(link => link.value); 
} 

OUTPUT

[ "sdfs", "34", "min", "987" ] 

ES5構文DEMO

function getLinks() { 
    var links = document.querySelectorAll('.link'); 
    var arr = []; 
    for (var i = 0; i < links.length; i++) { 
    arr.push(links[i].value); 
    } 
    return arr; 
} 

2）オブジェクトDEMO

これはリンク値のキーとしてデータ-id属性を利用します。

<input class="link" data-id="1" value="sdfs" /> 

今回は、reduceというオブジェクトを作成します。

function getLinks() { 
    const links = document.querySelectorAll('.link'); 
    return [...links].reduce((obj, link) => { 
    const id = link.dataset.id; 
    obj[id] = link.value; 
    return obj; 
    }, {}); 
} 

OUTPUT

{ 
    1: "sdfs" 
    2: "34" 
    3: "min" 
    4: "987" 
} 

ES5構文DEMO

function getLinks() { 
    const links = document.querySelectorAll('.link'); 
    var obj = {}; 
    for (var i = 0; i < links.length; i++) { 
    let id = links[i].dataset.id; 
    obj[id] = links[i].value; 
    } 
    return obj; 
}