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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1221閲覧

jQueryで配列をループ処理していたら、勝手にカンマが出力される

ninjanin

総合スコア26

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/04/03 10:37

clickしたらdata-tagsの配列をリストにして出力していますが、
なぜか「イヌ」と「ネコ」の間にカンマが出力されます。

どうすればこのカンマをなくせるでしょうか?

html

1<p> 2<textarea data-tags="" id="target"> 3clickしたらdata-tagsの配列をリストにして出力していますが、 4なぜか「イヌ」と「ネコ」の間にカンマが出力されます。 5</textarea> 6</p> 7 8<button type="button">click</button> 9 10<div id="area"> 11</div>

jquery

1/* 2* データ属性に配列を追加する 3**********************************************/ 4var arr = ["イヌ","ネコ"]; 5$('textarea').data('data-tags', arr); 6 7 8/* 9* データ属性の配列をリストにして出力する 10**********************************************/ 11$(document).on("click","button", function(){ 12 // リストを生成 13 var output_tags = []; 14 var input_tags = $('#target').data('data-tags'); 15 $.each(input_tags, function(i, val) { 16 var input_tag = '<li>'+input_tags[i]+'</li>'; 17 output_tags.push(input_tag); 18 }); 19 // リストを出力 20 var result_tags = ` 21 <div>タグ一覧</div> 22 <ul> 23 ${output_tags} 24 <li>キジ</li> 25 <li>トラ</li> 26 </ul> 27 `; 28 $('#area').html($(result_tags)); 29});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

JavaScriptでは配列を無理やり文字列に変換した際、
カンマ区切りになります。

JavaScript

1var a = ["hoge", "piko"]; 2 3console.log("" + a); 4// "hoge,piko" 5 6console.log(a.toString()); 7// "hoge,piko"

これを解決してやるには明示的に配列を文字列に変換させてやる必要があります。
配列とわかっているならArray.prototype.joinを使いましょう。

JavaScript

1var a = ["hoge", "piko"]; 2 3// 空文字を指定してjoinさせてやるのがポイント 4console.log(a.join('')); 5// "hogepiko"

『おまけ』

今回は["<li>イヌ</li>", "<li>ネコ</li>"]というような文字列に予めなっていましたが、joinを上手く利用するとこんなやり方も可能です。

JavaScript

1var b = ["イヌ", "ネコ"]; 2console.log(`<li>${b.join('</li><li>')}</li>`); 3// "<li>イヌ</li><li>ネコ</li>"

もしくはArray.prototype.mapを使ってもスマートに作れます。

JavaScript

1var b = ["イヌ", "ネコ"]; 2console.log(b.map(it => `<li>${it}</li>`).join('')); 3// "<li>イヌ</li><li>ネコ</li>"

投稿2019/04/03 10:52

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ninjanin

2019/04/03 12:19 編集

ありがとうございます。 「joinを上手く利用するバージョン」がかなり難解なのですが、、汗 なぜ、 ${b.join('</li><li>')} のように、リストタグを閉じる順序が逆になっているのでしょうか? あともし <li>ネコ</il> ではなくて <li><input type="text" value="ネコ"><span></span></il> だと、「joinを上手く利用するバージョン」はどうなりますか?
papinianus

2019/04/03 14:22 編集

ネコというか任意の要素"elm"の配列を、「"接頭辞"+"elm"+"接尾辞"」のかたちにjoinで形成する方法は `"接頭辞"+array.join("接尾辞"+"接頭辞")+"接尾辞"` が定型パターンです。なぜとか言わず覚えてください。 joinはセパレータを"間にはさむ"機能ですから、 b.join("</li><li>")は イヌ^ネコ^サル この^の位置に、</li><li>を入れて イヌ</li><li>ネコ</li><li>サル これで、最初の要素の開始タグと、最後の要素の閉じタグが足りないので、${}の前後にそれぞれ<li>と</li>が補われています。 なので、こう `<li><input type="text" value="${b.join('"><span></span></il><li><input type="text" value="')}"><span></span></il>`
guest

0

ベストアンサー

output_tagsに配列が入っていて、そのまま出力しようとしているからです。
表示前にjoinしましょう。

【Array.prototype.join() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

投稿2019/04/03 10:51

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ninjanin

2019/04/03 12:18

ありがとうございます。読んでおきます。
ninjanin

2019/04/03 14:05 編集

「表示前にjoin」という処理を入れてみました。19行目です。 しかし相変わらず「イヌ」と「ネコ」の間にカンマが入ってしまいます。 https://jsfiddle.net/dsqbg06m/ 教えていただいたリンク先では、カンマをなくすためにはこの19行目のようにjoinすれな良いと書いてあるように思うのですが、何が間違っているか教えていただけませんでしょうか。
kei344

2019/04/03 14:05

joinしても変数の中身が変わらないからです。これはMDNの例が良くないですね・・・。 output_tags = output_tags.join(''); https://jsfiddle.net/meash5ny/
ninjanin

2019/04/03 14:10

なるほど。joinさせるときは変数を再定義する必要があるわけですね。どうもありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問