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

Question

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

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

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

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

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

	
	// 出力リストを作る
	function create_list( state, img_list_arr ){
		list = `
				<li class="${state}">  
						<ul>${img_list_arr}</ul>	
				</li>
		`;
		return list;
	}
  
	// 出力リストのデータ
	const arr = [
		{  
       	 state: 'open',
       	 pass: ['thumb/RED19428E011_TP_V.jpg','nothing']
		},
		{  
       	 state: 'close',
       	 pass: ['nothing','thumb/058Kazukiya17103_TP_V1.jpg']
		}  
	];
	
	// 出力リストにデータを入れる
	function output( arr ) {
		let result = [];
		for(key in arr){
			const state = arr[key].state;
			const pass_arr = arr[key].pass;
			let img_list_arr = [];
			$.each(pass_arr, function(i, v) {
				if( v=='nothing' ){
					img_list_arr.push('<li>nothing</li>');
				}
				else{
					img_list_arr.push('<li><img src="https://www.pakutaso.com/shared/img/'+v+'"></li>');
				}
			});      
			result.push( create_list( state, img_list_arr ) );
		}
		return result;
	}
  
	// リストを出力
	$('div').html( output(arr) );
  
  

###試したこと

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

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

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

Answer 1

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

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

return result.join('');

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

Comments

[marimon]

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

[miyabi_pudding]

いえ、return result;→return result.join('');
で合ってます。

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

[marimon]

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

Answer 2

結合するのはjoinです。

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

Comments

[marimon]

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

[kei344]

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

[marimon]

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