Javascript 配列 ループについて

Question



やりたいこと

・要素をループさせる
・配列で作った値を順番にそれぞれ表示させる
・配列のテキストが終わったら、ループを終了させる

!明](530d22b60c463177f2a48a25d28d5a7b.jpeg)

試したこと

Javascriptの初心者のため、わからないことが分からないなりに、頑張って調べました。
頑張りましたが、ここでギブアップです、、、

for (var i = 0; i < 10; i++) {
document.write (i);

  var myData = 'ヘキサゴン,テキスト,スクロールバー,ページネーション,その他１,その他２';
  myData.toString();
  var myArray = myData.split(',');
  myArray;

  for (var i = 0; i < myArray.length; i++) {
    var div = document.getElementById('ItemsName');
    div.innerHTML = myArray ;
  }


}

どなたか、正解を教えていただけませんでしょうか＞＜

Comments

[kei344]

HTMLを提示してください。

[m.ts10806]

myData は何を元に生まれた文字列なのでしょうか？質問者さんが仰っている「要素」とは？

[m.ts10806]

現在のコードでできていること、できていないこと、起きていることは何でしょうか？エラー等起きていたらそれもご提示ください。

Answer 1

こんな感じでどうでしょう
https://codepen.io/og24715/pen/vjvypL?editors=1010

あー React 使えるなら次のように書けますね。

render() {
  // 仮に textList という テキストの配列があったとして
  const textList = ['This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card'];
  // 本来なら private メソッドに隠蔽するか、Item コンポーネントとして切り出すべき
  const renderitem = (text) => (
    <div>
      <img src="http://placehold.jp/150x150.png">
      <p>{text}</p>
    </div>
  );
  return (
    <div>
      {...textList.map(renderitem)}
    </div>
  );
}

Comments

[hitominjar]

ありがとうございます！！！非常に助かりました＞＜