jsのオブジェクトでのループ処理

Question

slider-proをオブジェクトで定義してforEachでループさせたかったのですが、うまくできなく。
レクチャーいただければ幸いです

var hoge = {
　key0: "01.jpg", 
  key1: "02.jpg",
  key3: "03.jpg",
};

Object.keys(hoge).forEach((key) => {
	console.log(key);// キー(key)
	console.log(hoge[key]);// 値(value)
});

//img
const elmImg = document.createElement("img");
elmImg.classList.add("sp-image");
elmImg.setAttribute('alt', Object.keys(hoge));
elmImg.src = "img/gallery/01.jpg";

document.querySelector('.sp-slide').appendChild(elmImg);

document.querySelector('.sp-thumbnails').appendChild(elmImg);

//pタグキャプション
document.querySelector('.sp-slide').insertAdjacentHTML('beforeend','<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">hogeのkey0、key1</p>');

再現したいHTML

<div class="slider-pro">
<div class="sp-slides">

<div class="sp-slide">
<img class="sp-image" src="img/gallery/01.jpg" alt="key0">
<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">key0</p>
</div>

<div class="sp-slide">
<img class="sp-image" src="img/gallery/02.jpg" alt="key1">
<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">key1</p>
</div>
</div>

<div class="sp-thumbnails">
<img class="sp-thumbnail" src="img/gallery/01.jpg" alt="key0">
<img class="sp-thumbnail" src="img/gallery/02.jpg" alt="key0">
</div>
</div>

Comments

[int32_t]

> うまくできなく。

「うまくできない」「うまく動かない」は技術的質問では禁句です。
どういう結果を期待していて、実際はどうなってしまうのか、具体的にかいてください。

Answer 1

おそらくやりたいことはこういうことじゃないかなと想定して回答させていただきます。
参考になれば幸いです。

var hoge = {
    key0: "01.jpg", 
    key1: "02.jpg",
    key3: "03.jpg",
};

let elmDiv;
let elmImg;
let elmThumb;

Object.keys(hoge).forEach((key) => {
    console.log(key);// キー(key)
    console.log(hoge[key]);// 値(value)

    elmDiv = document.createElement("div");
    elmDiv.classList.add("sp-slide");

    //img
    elmImg = document.createElement("img");
    elmImg.classList.add("sp-image");
    elmImg.setAttribute('alt', hoge[key]);
    elmImg.src = hoge[key];

    elmDiv.appendChild(elmImg);

    //pタグキャプション
    elmDiv.insertAdjacentHTML('beforeend','<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">hogeのkey0、key1</p>');

    document.querySelector('.sp-slides').appendChild(elmDiv);

    elmThumb = document.createElement("img");
    elmThumb.classList.add("sp-thumbnail");
    elmThumb.setAttribute('alt', hoge[key]);
    elmThumb.src = hoge[key];

    document.querySelector('.sp-thumbnails').appendChild(elmThumb);
});

<div class="slider-pro">
    <div class="sp-slides">
    </div>

    <div class="sp-thumbnails">
    </div>
</div>

Comments

[KKsall]

かなりの情報不足の中想定して頂きありがとうございます。
投稿頂いた通りです。

一点ご質問ですが、以下のｐタグのテキスト部分も「hogeのkey0、key1」ではなく、オブジェクトhogeの「key0」「key1」と画像に対応してるテキストを入れたいのですが、変数定義して取得すればいけるのでしょか？

elmDiv.insertAdjacentHTML('beforeend','<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">hogeのkey0、key1</p>');

[koji]

そうですね、変数を定義すれば可能です。

elmDiv.insertAdjacentHTML('beforeend',`<p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">${hoge[key]}</p>`);