質問: $('#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 期待した結果にはなったが、もっとスマートな方法はありますでしょうか。
回答: ### 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 さん