I have json file
[
{
"name": "Documents",
"types": [
{"name": "Documents1",
"url": "http://www.google.com" },
{"name": "Documents2",
"url": "http://www.facebook.com" },
]
},
{
"name": "binary",
"types": [
{"name": "binary1",
"link": "href=./mosq.tar.gz"
},
{"name": "binary2",
"link": "href=./mosq1.tar.gz"
}
]
}
]
I have the html code for this
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<body>
<label for="">Documents</label>
<select id="ddlDocuments"> </select> <br>
<label for="">Binary Download</label>
<select id="ddlbinary"> </select> <br>
<script type="text/javascript">
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.getJSON("test.json",
function (data) {
var details = '';
// ITERATING THROUGH OBJECTS
document.getElementById("ddlDocuments").insertBefore(new Option('', ''),
document.getElementById("ddlDocuments").firstChild);
$.each(data[0].types, function (key, value) {
var option = document.createElement("OPTION");
option.innerHTML = value.name;
option.value = value.url;
ddlDocuments.options.add(option);
});
$('#ddlDocuments').on('click', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.open(url,'_blank');
// window.location = url; // redirect
}
return false;
});
document.getElementById("ddlbinary").insertBefore(new Option('', ''),
document.getElementById("ddlbinary").firstChild);
$.each(data[2].types, function (key, value) {
var option = document.createElement("OPTION");
option.innerHTML = value.name;
option.value = value.link;
ddlbinary.options.add(option);
});
$('#ddlbinary').on('click', function () {
var retVal = confirm("Do you want to download ?");
if( retVal == true ) {
window.location = document.getElementById('test').href;
return true;
} else {
event.preventDefault();
return false;
}
});
});
});
</script>
Download
How its working right now is we get 2 dropdowns on the webpage for Documents and binary. On select of an option of binary we get a confirmation box to download or not. on click of yes it would download because i am using the div tag. But how do we download the respective file coming from the json.
It would be great if someone would help me.