| Line 4: | Line 4: | ||
Get Quran, Translation and Recitor list with this one list of data. | Get Quran, Translation and Recitor list with this one list of data. | ||
| − | '''Url:''' [http://api.globalquran.com/quran http://api.globalquran.com/quran] | + | '''Url:''' [http://api.globalquran.com/quran http://api.globalquran.com/quran?key=api_key] |
| − | <br/>'''JSON Response: ''' [http://api.globalquran.com/quran http://api.globalquran.com/quran] | + | <br/>'''JSON Response: ''' [http://api.globalquran.com/quran http://api.globalquran.com/quran?key=api_key] |
<pre class="prettyprint javascript">{ | <pre class="prettyprint javascript">{ | ||
"quranList": { | "quranList": { | ||
| Line 64: | Line 64: | ||
<script> | <script> | ||
$.ajaxSetup({ cache: true, jsonpCallback: 'quranData' }); // define ajax setup | $.ajaxSetup({ cache: true, jsonpCallback: 'quranData' }); // define ajax setup | ||
| − | $.getJSON("http://api.globalquran.com/quran?jsoncallback=?", { | + | $.getJSON("http://api.globalquran.com/quran?key=api_key&jsoncallback=?", { |
format: "jsonp" | format: "jsonp" | ||
}, function(data) | }, function(data) | ||
Get Quran, Translation and Recitor list with this one list of data.
Url: [http://api.globalquran.com/quran http://api.globalquran.com/quran?key=api_key]
JSON Response: [http://api.globalquran.com/quran http://api.globalquran.com/quran?key=api_key]
{
"quranList": {
"ar.muyassar": {
"language_code": "ar",
"english_name": "King Fahad Quran Complex",
"native_name": "تفسير المیسر",
"format": "text",
"type": "tafsir",
"source": "Tanzil.info",
"default": null,
"last_update": "1969-12-31"
},
"quran-simple": {
"language_code": "ar",
"english_name": "simple",
"native_name": "",
"format": "text",
"type": "quran",
"source": "Tanzil.info",
"default": null,
"last_update": "2010-06-04"
},
"ar.jalalayn": {
"language_code": "ar",
"english_name": "Jalal ad-Din al-Mahalli and Jalal ad-Din as-Suyuti",
"native_name": "تفسير الجلالين",
"format": "text",
"type": "tafsir",
"source": "Tanzil.net",
"default": null,
"last_update": "1969-12-31"
},
....... json object trimmed
}
}
Example: Build Quran List.
<!DOCTYPE html>
<html>
<head>
<style>#demo-1{ color:lightBlue; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="demo-1">
</div>
<script>
$.ajaxSetup({ cache: true, jsonpCallback: 'quranData' }); // define ajax setup
$.getJSON("http://api.globalquran.com/quran?key=api_key&jsoncallback=?", {
format: "jsonp"
}, function(data)
{
/* Quran List */
$('#demo-1').append('Select Quran: ');
$("<select>").attr('id', 'quranList').appendTo("#demo-1");
$("<option>").attr('selected', 'selected').html('Select Quran').appendTo('#quranList');
$.each(data.quranList, function(quranID, by)
{
if (by.format == 'text' && by.type == 'quran')
$("<option>").val(quranID).html(by.english_name+' '+by.native_name).appendTo('#quranList');
});
});
</script>
</body>
</html>
Demo:
Example: Build Translation List.
/* Translation List */
$('#demo-2').append('Select Translation: ');
$("<select>").attr('id', 'transList').appendTo("#demo-2");
$("<option>").attr('selected', 'selected').html('Select Translation').appendTo('#transList');
$.each(data.quranList, function(quranID, by)
{
if (by.format == 'text' && by.type == 'translation')
$("<option>").val(quranID).html(by.english_name+' '+by.native_name).appendTo('#transList');
});
Demo:
Example: Build Recitor List.
/* Recitor List */
$('#demo-3').append('Select Recitor: ');
$("<select>").attr('id', 'recitorList').appendTo("#demo-3");
$("<option>").attr('selected', 'selected').html('Select Translation').appendTo('#recitorList');
$.each(data.quranList, function(quranID, by)
{
if (by.format == 'audio')
$("<option>").val(quranID).html(by.english_name+' '+by.native_name).appendTo('#recitorList');
});
Demo:
.