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

【问题标题】：How to get all matches properties from JSON payload in JavaScript如何从 JavaScript 中的 JSON 有效负载获取所有匹配属性
【发布时间】：2021-01-21 06:39:13
【问题描述】：

我是新手，正在学习 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

【问题讨论】：

你能描述一下你想要的结果吗？我的意思是你想要的样本输出？

标签： javascript html json api html-lists

【解决方案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;

【讨论】：

如何将每个结果放入一个 li 标签中？
非常感谢！我会投票，但我没有任何积分
不用担心。但你可以接受我的answer :)
哦，当我接受答案时，我有足够的积分来投票，哈哈
如果我想获得 surah 名称怎么办。

【解决方案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;
})

【讨论】：

@mkHun，说得好。当然，我们需要考虑一个副作用：map 函数使用转换后的元素创建额外的数组。之后，我们需要再次迭代它以将所有元素连接到 String 变量。您的 for-of 解决方案肯定更快。如果用户想提供一些过滤功能或对输入数组进行更复杂的修改，这种方法可以更简单地实现它。此外，String concat 更快：Array Join vs String Concat。但这取决于实施。