如何使用javascript代码将多个对象数据插入div类或img源？

Question

I have 2 table from database, "event participant" and "event participant media".

I've export the data from both tables to javascript variables and the results are as below

var participant_obj = [ // from event_participant

{"0":"13","id":"13","1":"3","eventid":"3","2":"PT. JTour Kreatif","name":"PT. JTour Kreatif",
"3":"","profilepic":"","4":"","idnumber":"","5":"","birthplace":"","6":"0000-00-00",
"birthdate":"00000000","7":"[e-mail]","email":"[e-mail]","8":"qwert.com",
"website":"qwert.com","9":"1234567890","phone":"1234567890","10":"qwert","sosmed":"qwert",
"11":"qwert","cp_note":"qwert","12":"","genre":"","13":"","trademark":"",
"14":"perjalanan & liburan","business":"perjalanan & liburan","15":"up to 10%",
"sale":"up to 10%","16":"","sale_note":"","17":"","community":"",
"18":"Vestibulum nec condimentum metus. Vestibulum vel mattis sapien, venenatis tincidunt 
odio.","description":"Vestibulum nec condimentum metus. Vestibulum vel mattis sapien,
venenatis tincidunt odio.","19":"2016-08-05 08:15:12","created_at":"2016-08-05 08:15:12",
"20":"2016-08-12 21:11:19","updated_at":"2016-08-12 21:11:19"},


{"0":"17","id":"17","1":"3","eventid":"3","2":"&#34pakaian 'batman' super&#34",
"name":"&#34pakaian 'batman' super&#34","3":"","profilepic":"","4":"","idnumber":"",
"5":"","birthplace":"","6":"0000-00-00","birthdate":"0000-00-00","7":"sdfhsd@sdg",
"email":"[e-mail]","8":"https:\/\/www.facebook.com",
"website":"https:\/\/www.facebook.com","9":"2346234632","phone":"2346234632","10":"sdfh",
"sosmed":"sdfh","11":"abcd","cp_note":"abcd","12":"","genre":"","13":"","trademark":"",
"14":"pakaian","business":"pakaian","15":"kosong","sale":"kosong","16":"","sale_note":"",
"17":"","community":"","18":"sdfhsdfh","description":"sdfhsdfh","19":"2016-09-01 07:56:47",
"created_at":"2016-09-01 07:56:47","20":"2016-09-03 16:57:12",
"updated_at":"2016-09-03 16:57:12"}}

];

and

var participant_media   = [ // from event_participant_media

{"0":"27","id":"27","1":"13","participantid":"13","2":null,"type":null,"3":"image",
"format":"image","4":"DSCN6741.JPG","link":"DSCN6741.JPG","5":"2016-09-03 09:46:25",
"created_at":"2016-09-03 09:46:25","6":"2016-09-03 14:46:25",
"updated_at":"2016-09-03 14:46:25"},

{"0":"28","id":"28","1":"13","participantid":"13","2":null,"type":null,"3":"image",
"format":"image","4":"DSCN6742.JPG","link":"DSCN6742.JPG","5":"2016-09-03 09:46:43",
"created_at":"2016-09-03 09:46:43","6":"2016-09-03 14:46:43",
"updated_at":"2016-09-03 14:46:43"},

{"0":"29","id":"29","1":"17","participantid":"17","2":null,"type":null,"3":"image",
"format":"image","4":"20121001_202706.jpg","link":"20121001_202706.jpg",
"5":"2016-09-03 12:08:18","created_at":"2016-09-03 12:08:18","6":"2016-09-03 17:08:18",
"updated_at":"2016-09-03 17:08:18"},

{"0":"30","id":"30","1":"17","participantid":"17","2":null,"type":null,"3":"image",
"format":"image","4":"20150313_051134.jpg","link":"20150313_051134.jpg",
"5":"2016-09-03 12:08:45","created_at":"2016-09-03 12:08:45","6":"2016-09-03 17:08:45",
"updated_at":"2016-09-03 17:08:45"}

];

and then I insert object's name id 13 into html tag like this

var obj = _.find(participant_obj, function(obj){return obj.id == 13});
var name = obj['name'];
document.querySelector("div#dp_head h2").innerHTML = name;

so in HTML

<div id="dp_head">
  <h2>(result from participant id name)</h2>
</div>

its easy for me to input one object's name, but the problem is, each participant has two object images (as you can see in var participant_media). usually in php i will writing like this

<?php
$sql=mysqli_query($con,"SELECT * FROM `event_participant_media` WHERE`participantid` = 13 AND `format` = 'image'"); 
while($s=mysqli_fetch_array($sql)){ 
?>
   <div class="dp_media_img">
      <img src="<?php echo $s['link']; ?>" />
   </div>
<?php
}
?>

if tried this

var obj_media_img = _.find(participant_media, function(obj_media){return obj_media.participantid == participantid && obj_media.format == "image"});
var img_numbers = Object.keys(obj_media_img).length;
for(var i=0; i<img_numbers; i++){
    var images = obj_media_img[i]['link'];
    document.getElementsByClassName("dp_media_img")[i].document.querySelectorAll("div.dp_media_img img").src = "participant_media/"+images;
}

but not working. i have to insert images to

<div class="dp_media_img">
  <img src="<?php echo $s['link']; ?>" />
</div>

with javascript code

hope you can help me.

tq.

(sorry if there's a wrong word or grammar in my post)

Answer 1

It looks like there is a problem in the following line:
document.querySelector("div#dp_head h2").innerHTML = name;
The space between "div#dp_head h2" isn't a recognized method. Also, the # character is sufficient for referencing the div by its id. This should fix this error:

var x = document.getElementById('dp_head');
document.querySelector('h2').innerHTML = name;