長いのでfor文を使ってコードを短くしたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
JavaScriptでボタンを押したらGoogleスプレッドシートに書き込んでいる表が縦に出てくるようにします。

発生している問題・エラーメッセージ

長いのでfor文を使って下のコードを短くしたいのですが、苦戦しています。

エラーメッセージ

該当のソースコード

$("#mybtn").on("click", showdata);
        async function showdata() {
          let data = await loadSheets(sheetId, range);
          //console.log(data.values[0][0]);
          $("#contents").append(data.values[1][1]);
          $("#contents").append(
            "<img height='100px' src='" + data.values[1][2] + "'/>"
          );
          $("#contents").append(data.values[1][3]);
          $("#contents").append("<br>");
          $("#contents").append(data.values[1][4]);
          $("#contents").append("<br>");

          $("#contents").append(data.values[2][1]);
          $("#contents").append(
            "<img height='100px' src='" + data.values[2][2] + "'/>"
          );
          $("#contents").append(data.values[2][3]);
          $("#contents").append("<br>");
          $("#contents").append(data.values[2][4]);
          $("#contents").append("<br>");
          $("#contents").append(data.values[3][1]);
          $("#contents").append(
            "<img height='100px' src='" + data.values[3][2] + "'/>"
          );
          $("#contents").append(data.values[3][3]);
          $("#contents").append("<br>");
          $("#contents").append(data.values[3][4]);
          $("#contents").append("<br>");
        }
      });

試したこと

$("#contents").append(data.values[1][1]); これを $("#contents").append(data.values[i][1]);に変えれば出来るのかと思ってなんとかやってみましたがだめでした、、。

補足情報（FW/ツールのバージョンなど）

このサイトを使って質問するのは初めてなのでなにか不備があったら教えていただきたいです。

Comments

[m.ts10806]

＞なにか不備があったら

不備、ではないですが、わからないなりにも自身でやってみることからではないでしょうか。
※ただ、forもやり方によってはより冗長になることもあり得ます。何でもかんでもループが良いわけではないです。

Answer 1

明記されていませんでしたので、loadSheets(sheetId, range) の結果、values プロパティに２次元配列が得られるものとして回答します。

test = [
  [null,null,null,null],
  [null,"x1","im1","y1","z1"],
  [null,"x2","im2","y2","z2"],
  [null,"x3","im3","y3","z3"],
  [null,"x4","im4","y4","z4"]
];


  let
    //rows = data.values.slice(1),
    rows = test.slice(1),
    html = "",
    BR = "<BR>" // 文字列結合処理で二重引用符を省略するため宣言
  ;
  for( let i=0, l=rows.length; i<l; ++i ) {
    let cols = rows[i];
    html += cols[1]
      + '<img src="' + cols[2] + '" height="100">'
      + cols[3] + BR
      + cols[4] + BR;
  }
  console.log( html );
  /* => 以下、ワンライナーで出力される
     x1<img src="im1" height="100">y1<BR>z1<BR>
     x2<img src="im2" height="100">y2<BR>z2<BR>
     x3<img src="im3" height="100">y3<BR>z3<BR>
     x4<img src="im4" height="100">y4<BR>z4<BR>
   */

  // jQuery API は必要最小限の利用にすると軽量化できる
  $("#contents").append( html );

苦戦しています

• 反復処理
• 文字列結合

（文字列はシングルクォートにすると、慣れ親しんだHTMLの属性をハードコードしやすい）

• jQuery#append( content ) を必要最小限で利用する

（content は well formed markupなフォーマットの文字列も可能）。

Comments

[uri_0114]

とても分かりやすい説明ありがとうございます。おかげで理解することができました(__)

Answer 2

$("#mybtn").on("click", showdata);
	async function showdata() {
		let data = await loadSheets(sheetId, range);
		for(var i = 1; i < data.length; i ++){
			$("#contents").append(data.values[i][1]);
			$("#contents").append(
			"<img height='100px' src='" + data.values[i][2] + "'/>"
			);
			$("#contents").append(data.values[i][3]);
			$("#contents").append("<br>");
			$("#contents").append(data.values[i][4]);
			$("#contents").append("<br>");
		}
	}
});

Comments

[uri_0114]

ありがとうございます。　for文で短くする方法、理解することができました。