jQueryでの配列出力

Question

###前提・実現したいこと
・前提
POST送信用フォーム：Form
Formの中にある「詳細フィールド(textarea)」：Textarea
Formと同じ画面内にある別フォームModal：Modal
Modalの中身：ラジオボタン・text・セレクトリスト

・実現したいこと
Modalにて設定した項目・内容をTextareaに出力したい。

###わからないこと
出力処理のeachに入らず、出力されない

###該当のソースコード

function output() {

// Textareaへの出力用配列
var output = [];

// radioButton のラベルタイトル
output['radioButton'] = radioButton.text()

// 複数選択selectboxで選択されている値(text)
var selectedText = [];
$selected = $Field_2.find('#selected option:selected');
$selected.each(function () {
    selectedText.push($(this).text());
});

// 普通のtext
output['string'] = string.text()

// 出力箇所
$.each(output, function (key, text) {
    $('#textarea').append(key + ' : ' + text + "\n");
});

###試したこと
Modal内の各要素を配列化することはできている。

[追記]
・each直前のoutputの中身

output: Array[0]

radioButtn:"らじお"

length:0
selected:Array0
string:"てきすと"


###試したこと2

function output() {

// Textareaへの出力用配列
var output = [];

// radioButton のラベルタイトル
output.push({'radioButton' : radioButton.text()} );

// 複数選択selectboxで選択されている値(text)
var selectedText = [];
$selected = $Field_2.find('#selected option:selected');
$selected.each(function () {
    selectedText.push($(this).text());
});
output.push({'selected' : selectedText});

// 普通のtext
output.push({'string' : string.text()});

// 出力箇所
$.each(output, function (key, text) {
    $('#textarea').append(key + ' : ' + text + "\n");
});

・結果
出力はされているがキーが配列番号になってしまう。
0:[object Object]
1:[object Object]
2:[object Object]
3:[object Object]

###試したこと3
試したこと2 の最後のeach部分を以下のように修正。

var result = $('#textarea').val();
$.each(output, function (key, object) {
 $.each(object, function (title, text) {
 if (result[title] !== '') {
 result += (title + ':' + text + '\n');
 }
 })
});
$('#textarea').val(result);

・結果
title : text
title : text
title : text
title : text
期待した結果にはなったが、もっとスマートな方法はありますでしょうか。

Comments

[kei344]

何がわからないか、エラーは出ていないのか、出力できているなら結果はどうなっているかなど、具体的に質問文に追記いただいたほうが回答を得られやすいと思います。また、状況の再現が可能なHTML/JavaScriptを質問文に追記ください。

[kei344]

「もっとスマートな方法」とは、どのあたりを持って「スマートで無い」という判断をしたのかを具体的に追記ください。

Answer 1

jQuery.each

出力はされているがキーが配列番号になってしまう。

jQuery.each の動作は特殊で第一引数の内容によって処理を変えます。
https://api.jquery.com/jQuery.each/

• 第一引数が「配列」なら Array#forEach 相当の動きをします(key: 0, 1, 2,...)
• 第一引数が「配列以外のオブジェクト」なら Object.entries を Array#forEach する動きをします

この場合、第一引数は配列なので forEach 相当の動きとなり、期待通りに動作しません。

配列初期化子とオブジェクト初期化子

そもそも、配列を拡張して任意のキーを持たせるのは使い方が間違っています。
改善するにはオブジェクト初期化子({})か new Map を使用して下さい。
append されない問題は maisumakun さんが指摘された通り、.val() を使えば解消出来ます。

二次元配列

先述のオブジェクト初期化子も new Map も使用していませんが、二次元配列でも同様の処理が可能です。

var output = [['radioButton', radioButton.text()], ['selected', jQuery('#selected>option:selected').text()], ['string', selectedText]];
jQuery('#textarea')[0].value = output.map(function (entry) { return entry.join(': '); }).join('\n');

ただ、key名を手打ちしているのがエレガントさに欠けます。
スマートに書くなら既存のform関連要素からkey/valueを機械的に読み取る機構が必要だと思います。
yambejp さんが提案される FormData はその一つですね。
勿論、自前で組んでもいいと思います。

Re: sbc さん

Comments

[sbc]

ご丁寧な説明ありがとうございます。
.eachの引数によって処理が変わることは存じ上げませんでした。
objectにすることによって解決致しましたのでこちらをベストアンサーとさせて頂きます。

Answer 2

$(...).append()にHTMLでない文字列を渡すと、それはセレクタとみなされてしまいます。まとめて.val()でセットするほかないです。

// 前略

var result = $('#textarea').val();
$.each(output, function (key, text) {
    result += (key + ' : ' + text + "\n");
});
$('#textarea').val(result);

Answer 3

モダンなブラウザであればFormDataから抜いたほうがラクかもしれませんね

<script>
function myfunc(){
  var f1=new FormData(document.getElementById('f1'));
  var ta1=document.getElementById('ta1');
  ta1.value="";
  f1.forEach(function(i,j){
    ta1.value+=j+":"+i+"\n";
  })
}
</script>
<form id="f1">
hoge:<input type="text" name="hoge" value="123"><br>
fuga:<input type="radio" name="fuga" value="1">:1
<input type="radio" name="fuga" value="2">:2
<input type="radio" name="fuga" value="3" checked>:3<br>
piyo:<input type="checkbox" name="poyo" value="1" checked>:1
<input type="checkbox" name="poyo" value="2">:2
<input type="checkbox" name="poyo" value="3" checked>:3<br>
hogera:<select name="hogera">
<option value="">---</option>
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
</select>
</form>

<form>
<textarea id="ta1" style="height:200px"></textarea>
<input type="button" value="check" onclick="myfunc()">
</form>

Comments

[yambejp]

>Modal内の各要素を配列化することはできている

の配列化がきちんとできてないだけでは？
FormDataは試されました？