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

我是新来的，正在学习

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

列表中

---

假设这是端点：

在API响应中，匹配的

是一个对象数组。因此，您需要迭代循环以访问
文本
值

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

匹配
是一个
JSON数组
。您需要迭代元素并获取
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;
})

$.getJSON（url、函数（数据）{
const-enText=data.data.count；
const-arText=data.data.matches
.map（m=>`
${m.text}
`）
.加入（“”）；
document.getElementById（'verseText'）。innerHTML='匹配：'+enText+''；
document.getElementById（'demo'）.innerHTML=arText；
})
你能描述一下你想要的结果吗？我的意思是你想要的样本输出？我如何将每个结果放入li标签中？非常感谢！我想投赞成票，但我没有任何理由不担心。但是你可以接受我的：）哦，当我接受一个答案时，我有足够的分数去投票，如果我想得到苏拉的名字呢。@mkHun，好的。当然，我们需要考虑一个副作用：map函数使用转换后的元素创建额外的数组。之后，我们需要再次迭代，将所有元素连接到一个字符串变量。您的解决方案速度肯定更快。若用户希望提供一些过滤功能或对输入数组进行更复杂的修改，这种方法可以更容易地实现它。另外，
String
concat速度更快：。但这取决于实施情况。非常感谢您的解释。：）
$.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;
})