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

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

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

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

jQuery

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

Q&A

解決済

2回答

5722閲覧

【jquery】pushするとカンマが入ってしまう問題

marimon

総合スコア32

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/05/22 14:52

編集2019/05/22 14:54

###実現したいこと
jqueryで配列にpushすると、なぜかカンマが入ってしまう問題を解決したいです。

###発生している問題
arrという配列のpassというキーに、画像のURLnothingが配列で入っていて、それらを<li>として出力しています。

しかしそれをcreate_list( state, img_list_arr ){}という関数で出力すると、出力される<li>の間にカンマが入って出力されるのです。

###該当のソースコード
こちらをご覧いただくと早いかと思います。
この変なカンマをなくしたいです。
https://jsfiddle.net/7rzj1g25/

そのソースコードは下記になります。

jquery

1 2 // 出力リストを作る 3 function create_list( state, img_list_arr ){ 4 list = ` 5 <li class="${state}"> 6 <ul>${img_list_arr}</ul> 7 </li> 8 `; 9 return list; 10 } 11 12 // 出力リストのデータ 13 const arr = [ 14 { 15 state: 'open', 16 pass: ['thumb/RED19428E011_TP_V.jpg','nothing'] 17 }, 18 { 19 state: 'close', 20 pass: ['nothing','thumb/058Kazukiya17103_TP_V1.jpg'] 21 } 22 ]; 23 24 // 出力リストにデータを入れる 25 function output( arr ) { 26 let result = []; 27 for(key in arr){ 28 const state = arr[key].state; 29 const pass_arr = arr[key].pass; 30 let img_list_arr = []; 31 $.each(pass_arr, function(i, v) { 32 if( v=='nothing' ){ 33 img_list_arr.push('<li>nothing</li>'); 34 } 35 else{ 36 img_list_arr.push('<li><img src="https://www.pakutaso.com/shared/img/'+v+'"></li>'); 37 } 38 }); 39 result.push( create_list( state, img_list_arr ) ); 40 } 41 return result; 42 } 43 44 // リストを出力 45 $('div').html( output(arr) ); 46 47

###試したこと

カンマが入っているなら削除しようと思い、
const pass_arr = arr[key].pass;
const pass_arr = arr[key].pass.split(',');としてみたのですが効果なしでした。

また、create_list( state, img_list_arr ){}の中でimg_list_arrを作っても効果なしです。

どうしたらカンマを消すことができるでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

そりゃ、
outputメソッドで返してるのが配列ですからね。
それを、jQueryのhtmlメソッドで無理くり文字列化してHTML化してますから。
,が入るのは至極当然の結果です。

outputメソッドで最終的に返すのは、文字列にしましょう。
kei344さんのおっしゃる通り、joinを使い、

javascript

1return result.join('');

として、配列を文字列に変換して、返しましょう。

投稿2019/05/22 15:04

miyabi_takatsuk

総合スコア9555

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

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

marimon

2019/05/22 15:59

理解できました。ありがとうございます。 ちなみに return result; ではなくて、 result.push( create_list( state, img_list_arr.join('') ) ); のことであってますか?何か誤解があったら教えて頂きたいです。
miyabi_takatsuk

2019/05/22 16:04

いえ、return result;→return result.join(''); で合ってます。 result.push( create_list( state, img_list_arr.join('') ) );は、HTML文字列を配列に入れる動作なので、 今回の場合はそのままでいいです。 (そこを、return result.join('');にするとそもそもおかしくなる)
marimon

2019/05/22 16:09

原因がわかってよかったです。どうもありがとうございました。
guest

0

結合するのはjoinです。

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

投稿2019/05/22 14:54

kei344

総合スコア69591

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

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

marimon

2019/05/22 15:01

結合する?すみませんどこの話ですか?
kei344

2019/05/22 15:04

output(arr)の結果が配列だから、結合して文字列にしてから$('div').html()に入れないといけません。
marimon

2019/05/22 15:57

そういうことですね。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問