<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
var data = [
{
"content":"ffffffff ",
"doctorAddress":"img/1.png",
"doctorId":1,
"doctorName":"楊小松",
"img":[
{
"headId":1,
"imgAddress":"img/1.jpg",
"imgAddressId":1
},
{
"headId":1,
"imgAddress":"img/2.jpg",
"imgAddressId":2
}
],
},
{
"content":"ffffffff",
"doctorAddress":"img/1.png",
"doctorId":1,
"doctorName":"楊小松",
"img":[
{
"headId":7,
"imgAddress":"img/2.jpg",
"imgAddressId":4
}
],
}
];
var box = document.getElementsByClassName('box')[0]
var DOM = '';
for (var i=0;i<data.length;i++){
DOM += `
<ul class="first">
<li>${data[i].doctorName}</li>
<li>`
for( var j = 0; j< data[i].img.length; j++) {
DOM += `
<p id="${data[i].img[j].imgAddressId}"></p>
`
}
DOM +=`</li>
</ul>
`
}
box.innerHTML = DOM;
</script>
</body>
</html>
