如何从 JavaScript 中的 JSON 负载获取所有匹配属性

Question

我是新手，正在学习 JSON，但我一直无法显示一些 API 结果：

$.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 工作正常，但我如何使用 JSON （上文）列出所有匹配项的文本到 HTML 列表中假设这是终点：http://api.alquran.cloud/v1/search/abraham/all/en

Answer 1

在您的 API 响应中 matches 是一个对象数组。所以你需要迭代循环来访问text值

$.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;
})

否则如果你想要单个数据，使用索引值获取它。喜欢下面的代码

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

Answer 2

matches 是一个 JSON Array。您需要遍历元素并获取 text 属性。此外，请记住在处理函数中使用 const、let 或 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;
})

如何从 JavaScript 中的 JSON 负载获取所有匹配属性

How to get all matches properties from JSON payload in JavaScript

html

javascript

api

json

html-lists