連想配列をオブジェクトに変更したい

slider-proをjsの連想配列で出力するコードでキーがかぶっても上書きされないようにしたく、連想配列からオブジェクトに変更したいのですが、自分で変更すると「 [object Object]」とエラーが出てしまい、うまく行えず。
レクチャーいただけますと幸いです。

				<section>
					<h2 class="tit-basic01">hoge</h2>
					<div class="slider-pro slider-clinic">
						<div class="sp-slides"></div>
						<div class="sp-thumbnails"></div>
					</div>
					<script>
					(()=>{
					var clinicGallery = {
					'hoge1': 'hoge_gallery01.jpg',
					'hoge2': 'hoge_gallery02.jpg',
					};
					let slides = document.querySelector('.sp-slides');
					let thumbs = document.querySelector('.sp-thumbnails');
					const createElement = (elm,attr) =>{
					let e = document.createElement(elm);
					for(var k in attr) e.setAttribute(k,attr[k]);
					return e;
					}
					const addItem = key => {
					let value = clinicGallery[key];
					let wrp = createElement('div',{
						class: 'sp-slide'
					});
					let img = createElement('img',{
						src: 'images/'+value,
						alt: key,
						class: 'sp-image'
					});
					let cap = createElement('p',{
						class: 'sp-layer sp-black sp-white sp-padding',
						'data-position': 'bottomLeft',
						'data-vertical': 0,
						'data-width': '100%',
						'data-show-transition': 'up'
					});
					let tmb = createElement('img',{
						src: 'images/'+value,
						alt: key,
						class: 'sp-thumbnail'
					});
					wrp.appendChild(img);
					wrp.appendChild(cap);
					cap.textContent = key;
					slides.appendChild(wrp);
					thumbs.appendChild(tmb);
					};
					for(let k in clinicGallery) addItem(k);
					})();
					</script>
				</section>

以下のようにしたい

					var clinicGallery = [
					{key: 'hoge1', value: 'hoge_gallery01'},
					{key: 'hoge2', value: 'hoge_gallery02'},
					];

行動規範の内容に同意します

回答1件

ベストアンサー

元ソースを活かすとこんなかんじ
根本的なリファクタリングした方がよいかもしれませんが・・・

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  /*
4  var clinicGallery = {
5    'hoge1': 'hoge_gallery01.jpg',
6    'hoge2': 'hoge_gallery02.jpg',
7  };
8    */
9  var clinicGallery = [
10    {key: 'hoge1', value: 'hoge_gallery01'},
11    {key: 'hoge2', value: 'hoge_gallery02'},
12    ];
13  let slides = document.querySelector('.sp-slides');
14  let thumbs = document.querySelector('.sp-thumbnails');
15  const createElement = (elm,attr) =>{
16    let e = document.createElement(elm);
17    for(var k in attr) e.setAttribute(k,attr[k]);
18    return e;
19  }
20  const addItem = x => {
21    let value = x.value
22    let wrp = createElement('div',{
23    class: 'sp-slide'
24    });
25    let img = createElement('img',{
26    src: 'images/'+value,
27    alt: x.key,
28    class: 'sp-image'
29    });
30    let cap = createElement('p',{
31    class: 'sp-layer sp-black sp-white sp-padding',
32      'data-position': 'bottomLeft',
33      'data-vertical': 0,
34      'data-width': '100%',
35      'data-show-transition': 'up'
36      });
37    let tmb = createElement('img',{
38    src: 'images/'+value,
39    alt: x.key,
40    class: 'sp-thumbnail'
41    });
42    wrp.appendChild(img);
43    wrp.appendChild(cap);
44    cap.textContent = x.key;
45    slides.appendChild(wrp);
46    thumbs.appendChild(tmb);
47  };
48  clinicGallery.forEach(addItem);
49});
50</script>
51<section>
52	<h2 class="tit-basic01">hoge</h2>
53	<div class="slider-pro slider-clinic">
54		<div class="sp-slides"></div>
55		<div class="sp-thumbnails"></div>
56	</div>
57</section>