How to get all matches properties from JSON payload in JavaScript

Question

I'm new and learning JSON but I have been having an issue with displaying some API results:

$.getJSON(url, function (data) {
    enText = data.data.count;
    arText = data.data.matches.text;
    document.getElementById('verseText').innerHTML = 'Matches: '+enText+'';
    document.getElementById('demo').innerHTML = arText;
})

enText works fine but how do I list the text of all the matches using JSON (above) into an HTML list assuming this is the endpoint: http://api.alquran.cloud/v1/search/abraham/all/en

Can you please describe that actually which result you want? I mean sample output you want? — Krutika Patel, Oct 06 '20 at 11:31

mkHun · Accepted Answer · 2020-10-06T12:30:40.170

1

In your API response matches is an array of object. So you need to iterate the loop to access the text value

$.getJSON("http://api.alquran.cloud/v1/search/abraham/all/en", function (data) {
    enText = data.data.count;
    arText = data.data.matches;

    var li= '';
    for (const x of arText) {
        li+='<li>'+x.text+' <span class="surah">'+x.surah.name+'</span></li>';

    }

    document.getElementById('verseText').innerHTML = 'Matches: ' + enText + '';
    document.getElementById('demo').innerHTML = li;
})

Otherwise if you want a single data, get it using index value. Like below code

arText = data.data.matches[0].text;
document.getElementById('demo').innerHTML = arText;

edited Oct 06 '20 at 12:30

answered Oct 06 '20 at 11:32

mkHun

5,891
8
38
85

How would I put each result in an li tag? – Oct 06 '20 at 11:36
3

Thanks so much! I would upvote but I dont have any points – Oct 06 '20 at 11:41
No worries. But you can accept my [answer](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) :) – mkHun Oct 06 '20 at 11:42
2

Oh, when I accepted an answer, I have enough points to upvote, lol – Oct 06 '20 at 11:59
What if I wanted to get the surah name. – Oct 06 '20 at 12:21
match>surah>name and put those right after the text – Oct 06 '20 at 12:22

score 1 · Answer 2 · answered Oct 06 '20 at 11:36

1

matches is a JSON Array. You need to iterate over elements and grab text property. Also, remember to declare variables in handler function with const, let or var.

$.getJSON(url, function (data) {
    const enText = data.data.count;
    const arText = data.data.matches
                       .map(m => `<li>${m.text}</li>`)
                       .join("");
    document.getElementById('verseText').innerHTML = 'Matches: '+enText+'';
    document.getElementById('demo').innerHTML = arText;
})

answered Oct 06 '20 at 11:36

Michał Ziober

37,175
18
99
146

1

@mkHun, good point. Of course we need to take under consideration one side effect: map function creates extra array with transformed elements. After that we need to iterate it again to join all elements to a String variable. Your for-of solution is definitely faster. In case user would like to provide some filter function or do more sophisticated modification on input array this approach allows easier way to implement it. Also, `String` concat is faster: [Array Join vs String Concat](https://stackoverflow.com/questions/7296594/array-join-vs-string-concat). But it depends from implementation. – Michał Ziober Oct 06 '20 at 12:10

How to get all matches properties from JSON payload in JavaScript

2 Answers2