使用HTML輸入「姓名」屬性以獲得對象

在使用體解析器 ExpressJS，存在解析爲一個JavaScript對象的功能（或JSON，我不是很確定），一組輸入與定義的鍵具有相同名稱屬性的元素。使用HTML輸入「姓名」屬性以獲得對象

HTML（例如）：

<input type="text" class="name" name="name[foo]" placeholder="input1"/> 
<input type="text" class="name" name="name[bar]" placeholder="input2"/>

的JavaScript（如）：

var obj = req.body.name;

obj是由JavaScript瞭解的對象是{ "foo" : input1, "bar" : input2 }

我想使用標準jQuery獲得類似的功能ndle幾個相關的表單輸入。什麼到目前爲止—我試圖無濟於事—如下：

$(".name")得到包含文字HTML（用於抓取鍵 - 值對沒有幫助）的對象。

$(".name").map(function() {return $(this).val();}).get();產生一個數組的值，但沒有鍵。

$("input[name='name']")和$("input[name='name[]']")什麼也沒有。

我也曾嘗試以下的輸入轉換成一個數組，但它仍然不服務從形式拉動信息作爲JavaScript對象/ JSON的目的：

$.fn.inputsToArray = function() { 
    var values= []; 
    $.each(this, function (i, field) { 
    values.push(field.value); 
    }); 
    return values; 
};

是否有方式來完成我想要做的事NodeJS/body-parser？

解決方案：

由於gaetanoM的優秀的解決方案（下接受），我就能夠創建一個通用的jQuery的功能，可以任意jQuery對象（很明顯，它會在被稱爲只有在元素格式爲<input ... name="example[key]" ... />時才能正常工作，但我離題了）。

的功能正是如此叫：

var output = $(":input[name^=example]").inputsToObject();

功能被定義如下：

$.fn.inputsToObject = function() { 
    var values = {}; 
    values = $(this).get().reduce(function (acc, ele) { 
    var key = ele.name.match(/\[(.*)\]$/)[1]; 
    acc[key] = $(ele).val(); 
    return acc; 
    }, {}) 
    return values; 
}

來源

2017-06-09 Mattallurgy

對於首先你需要$(':input[name^=name]')以選擇具有名稱的所有輸入字段屬性開始與名字。隨着.get()你變換了jQuery結果爲上，你可以申請.reduce()數組：

var result = $(':input[name^=name]').get().reduce(function(acc, ele) { 
 
    var key = ele.name.match(/\[(.*)\]$/)[1]; // get the key 
 
    acc[key] = ele.getAttribute('placeholder'); // add to retval 
 
    return acc; 
 
}, {}); 
 
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="text" class="name" name="name[foo]" placeholder="input1"/> 
 
<input type="text" class="name" name="name[bar]" placeholder="input2"/>

來源

2017-06-09 14:38:05 gaetanoM

這是一個令人難以置信的有益的解決方案。我已經適應它，將其添加到一個jQuery方法，所以對於那些誰願意將其添加爲一個通用的方法，代碼如下。 '$ .fn.inputsToObject = function（）{ var vals = $（this）.get（）。reduce（function（acc，ele）var key = ele.name.match（/ \ [（。 *）\] $ /）[1]; ACC [鍵] = $（ELE）.VAL（）;返回 ACC; }，{}）返回瓦爾斯; } 因此調用它： var objectOutput = $（「：input [name^= name]」）。inputsToObject（）;' – Mattallurgy

@Mattallurgy非常感謝 – gaetanoM

使用HTML輸入「姓名」屬性以獲得對象

回答

相關問題