javascript多次元配列で画像を表示する　3　json記述

多次元配列で画像を表示する。

json記述で汎用性のある多次元配列で、画像を表示する。

<style>
/*
div{
	background: tan;
	width: 10%;
	overflow: hidden;
}
p img{
	width: 50%;
	float: left;
}
*/
</style>
<script>

//json記述
var imgList = [
[
  { url: 'http://aaa/', img: 'img0.jpg', alt: 'AAA' },
  { url: 'http://bbb/', img: 'img1.jpg', alt: 'BBB' },
  { url: 'http://ccc/', img: 'img2.jpg', alt: 'CCC' },
  { url: 'http://ddd/', img: 'img3.jpg', alt: 'DDD' }
],
[
  { url: 'http://eee/', img: 'img4.jpg', alt: 'EEE' },
  { url: 'http://fff/', img: 'img5.jpg', alt: 'FFF' },
  { url: 'http://ggg/', img: 'img6.jpg', alt: 'GGG' },
  { url: 'http://hhh/', img: 'img7.jpg', alt: 'HHH' }
],
[
  { url: 'http://iii/', img: 'img8.jpg', alt: 'III' },
  { url: 'http://jjj/', img: 'img9.jpg', alt: 'JJJ' },
  { url: 'http://kkk/', img: 'img10.jpg', alt: 'KKK' },
  { url: 'http://lll/', img: 'img11.jpg', alt: 'LLL' }
],
[
  { url: 'http://mmm/', img: 'img12.jpg', alt: 'MMM' },
  { url: 'http://nnn/', img: 'img13.jpg', alt: 'NNN' },
  { url: 'http://ooo/', img: 'img14.jpg', alt: 'OOO' },
  { url: 'http://ppp/', img: 'img15.jpg', alt: 'PPP' }
]
]

var src = imgList.length;
console.log(src);// => 4

for(var a = 0; a < src; a++) {
  document.write("<div>");
  for (var i = 0; i < src; i++ ) {
    document.write("<p>");
    document.write("<a href='" + imgList[a][i].url + "'>");
    document.write("<img src='" + imgList[a][i].img + "' alt='" + imgList[a][i].alt + "'>");
    document.write("</a>");
    document.write("</p>");
  }
  document.write("</div>");
}
</script>