Quran / Translation / Recitor List

Get Quran, Translation and Recitor list with this one list of data.

Url: http://api.globalquran.com/quran?key=api_key



JSON Response:  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
    }
}



Examples:

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:

Comments


blog comments powered by Disqus

.