How to display text based on the position key in JSON response?

November 30, 2022

const apiUrl2 = `https://api.quran.com/api/v4/verses/random?language=en&words=true&translations=en&audio=1&tafsirs=en`;
    fetch(apiUrl2)
        .then((response) => response.json())
        .then(data => {

            console.log(data);
            for (let i = 0; i < data.verse.words.length; i++) {
                // var result = Object.values(data.words[i]);
                let datas = data.verse.words[i];
                console.log(datas.translation.text);
                // console.log(datas.sort());
                let sorted=datas.position;
                const propertyNames=Object.keys(sorted); 
                console.log(sorted);
                
                // console.log(result.sort());
                // document.getElementById('hadithNumber').innerHTML += ' ' + sorted.sort();
                // if (datas.position <= i) {
                //     let ayah = [];
                //     ayah.push();
                //     console.log(ayah[i]);
                // }
            }
        })
        .catch(error => {
            console.log(error);
        });

So Basically, I’ve this API to fetch Holy Quran Ayat/Verses in this API we have a key called Position according to which the words has to be shown to make the Ayat complete.
JSON

"verse": {
    "id": 5890,
    "verse_number": 6,
    "verse_key": "84:6",
    "hizb_number": 59,
    "rub_el_hizb_number": 236,
    "ruku_number": 528,
    "manzil_number": 7,
    "sajdah_number": null,
    "page_number": 589,
    "juz_number": 30,
    "words": [
        {
            "id": 6721,
            "position": 2,
            "audio_url": "wbw/084_006_002.mp3",
            "char_type_name": "word",
            "code_v1": "ﭲ",
            "page_number": 589,
            "line_number": 6,
            "text": "ﭲ",
            "translation": {
                "text": "mankind",
                "language_name": "english"
            },
            "transliteration": {
                "text": "l-insānu",
                "language_name": "english"
            }
        },
        {
            "id": 6722,
            "position": 3,
            "audio_url": "wbw/084_006_003.mp3",
            "char_type_name": "word",
            "code_v1": "ﭳ",
            "page_number": 589,
            "line_number": 6,
            "text": "ﭳ",
            "translation": {
                "text": "Indeed, you",
                "language_name": "english"
            },
            "transliteration": {
                "text": "innaka",
                "language_name": "english"
            }
        },
        {
            "id": 6723,
            "position": 4,
            "audio_url": "wbw/084_006_004.mp3",
            "char_type_name": "word",
            "code_v1": "ﭴ",
            "page_number": 589,
            "line_number": 6,
            "text": "ﭴ",
            "translation": {
                "text": "(are) laboring",
                "language_name": "english"
            },
            "transliteration": {
                "text": "kādiḥun",
                "language_name": "english"
            }
        },....}

As you can see in the response in words array we have a key called position we need to use that key to sort it and add text based on its value This is what I’ve tried till now.

>Solution :

You can create your own comparison function.

    function compare( a, b ) {
      if ( a.position < b.position ){
        return -1;
      }
      if ( a.position > b.position ){
        return 1;
      }
      return 0;
    }
    
    const apiUrl2 = `https://api.quran.com/api/v4/verses/random?language=en&words=true&translations=en&audio=1&tafsirs=en`;
        fetch(apiUrl2)
            .then((response) => response.json())
            .then(data => {
                            
                console.log(data);
                data.verse.words.sort(compare);
                for (let i = 0; i < data.verse.words.length; i++) {
                    // var result = Object.values(data.words[i]);
                    let datas = data.verse.words[i];
                    console.log(datas.translation.text);
                    // console.log(datas.sort());
                    let sorted=datas.position;
                    const propertyNames=Object.keys(sorted); 
                    console.log(sorted);
                    
                    // console.log(result.sort());
                    // document.getElementById('hadithNumber').innerHTML += ' ' + sorted.sort();
                    // if (datas.position <= i) {
                    //     let ayah = [];
                    //     ayah.push();
                    //     console.log(ayah[i]);
                    // }
                }
            })
            .catch(error => {
                console.log(error);
            });