Currently stuck on a university project where I've set up an array of images like this:
var testdata = [
{
"imageID": 17,
"uploadedDate": "2020-07-31 03:56:56.243139",
"filepathOriginal": "test_images/image1.jpg"
},
{
"imageID": 18,
"uploadedDate": "2020-07-31 04:06:14.711057",
"filepathOriginal": "test_images/image2.jpg"
},
{
"imageID": 19,
"uploadedDate": "2020-07-31 04:08:10.360168",
"filepathOriginal": "test_images/image3.jpg"
}
];
I'm looking to loop through this array and show each image in a modal for user viewing. I've been trying to use a for-loop without success. Does anyone have any suggestions or solutions?
The HTML code for the modal is as follows:
<!--modal header: includes functional closing button for modal to return to page-->
<div class="modal-header">
<span class="closeBtn">×</span>
<h2>Image search and processing</h2>
<p>Please select the dates you wish to search: </p>
</div>
<div class="modal-body">
<form id="modal-form" class="form" >
<!--date picker for querying API-->
<input id="datepicker"/>
<button id="submit">Submit</button>
<script type="text/javascript" src="js/pipeline.js"></script>
<!--floating buttons to submit process or clear form/array and return to page-->
<button type="submit" class="floating-btn" value ="submit">+</button>
<button type="reset" class="floating-btn2" value ="reset" onclick="return hideImage()">x</button>
<!--hidden input that adds selected images to an array for processing-->
<input type="hidden" name="list" id="list">
</form>
</div>
Your help on this matter would be immensely valuable!