質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

jQueryでの配列出力

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,740

sbc

score 21

前提・実現したいこと

・前提
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:Array[0](未選択状態)

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
期待した結果にはなったが、もっとスマートな方法はありますでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/04/10 12:04

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

    キャンセル

  • kei344

    2017/04/10 14:03

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

    キャンセル

回答 3

+2

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

// 前略

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+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 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/11 09:16

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

    キャンセル

0

モダンなブラウザであれば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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/10 14:13

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る