循环遍历 JSON 中的数组答案

【问题标题】：Loop through array in JSON循环遍历 JSON 中的数组
【发布时间】：2020-10-06 23:15:50
【问题描述】：

我创建了一个循环来循环使用 this endpoint 的 API 中的信息：

以这种格式返回数据（为了简化而减少）：

{
    "query": "allah",
    "total_count": 3394,
    "took": 153,
    "current_page": 1,
    "total_pages": 170,
    "per_page": 20,
    "results": [
        {
            "id": 664,
            "verse_number": 171,
            "chapter_id": 4,
            "verse_key": "4:171",
            "text_madani": "يَا أَهْلَ الْكِتَابِ لَا تَغْلُوا فِي دِينِكُمْ وَلَا تَقُولُوا عَلَى اللَّهِ إِلَّا الْحَقَّ ۚ إِنَّمَا الْمَسِيحُ عِيسَى ابْنُ مَرْيَمَ رَسُولُ اللَّهِ وَكَلِمَتُهُ أَلْقَاهَا إِلَىٰ مَرْيَمَ وَرُوحٌ مِّنْهُ ۖ فَآمِنُوا بِاللَّهِ وَرُسُلِهِ ۖ وَلَا تَقُولُوا ثَلَاثَةٌ ۚ انتَهُوا خَيْرًا لَّكُمْ ۚ إِنَّمَا اللَّهُ إِلَٰهٌ وَاحِدٌ ۖ سُبْحَانَهُ أَن يَكُونَ لَهُ وَلَدٌ ۘ لَّهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الْأَرْضِ ۗ وَكَفَىٰ بِاللَّهِ وَكِيلًا",
            "words": [
                {
                    "id": 82924,
                    "position": 1,
                    "text_madani": "يَا أَهْلَ",
                    "text_indopak": null,
                    "text_simple": "يا اهل",
                    "verse_key": "4:171",
                    "class_name": "p105",
                    "line_number": 1,
                    "page_number": 105,
                    "code": "&#xfb51;",
                    "code_v3": "&#xfb51;",
                    "char_type": "word",
                    "audio": {
                        "url": "//verses.quran.com/wbw/004_171_001.mp3"
                    },
                    "translation": {
                        "id": 72752,
                        "language_name": "english",
                        "text": "O People",
                        "resource_name": null,
                        "resource_id": 59
                    },
                    "transliteration": {
                        "id": 72752,
                        "language_name": "english",
                        "text": "O People",
                        "resource_name": null,
                        "resource_id": 59
                    },
                    "highlight": null
                }
            ],
            "translations": [
                {
                    "resource_name": "Abdullah Muhammad Basmeih",
                    "text": "dan janganlah kamu mengatakan sesuatu terhadap <em class=\"hlt1\">Allah</em> melainkan yang benar; sesungguhnya Al Masih Isa",
                    "id": 217603,
                    "language_name": "malay",
                    "resource_id": 39
                }
            ]
        }
    ]
}

它遍历结果数组并在<li> 标记中显示每个结果。然后它通过翻译。以下 sn-p 仅显示数组的第一个元素，我想在我的列表项中包含一个新列表（就在 verse 键之后），所有翻译都包含在更多 <li> 标记中。有没有办法做到这一点？

sn-p：

$.getJSON(url, function (data) {
    count = data.total_count;
    took = data.took;
    results = data.results;
    
    var li = '';
    results = data.results;
    var li = '';
    for (const x of results) {
        
        li +=
        '<li>' +
        x.text_madani +
        '<br><span class="surah">' +
        x.translations[0].text +' - '+ x.translations[0].resource_name+
        '</span><br> <span class="surah">' +
        x.verse_key +
        '</span><br></li>';
    }

    document.getElementById('demo').innerHTML = li;

    document.getElementById('Results').innerHTML =
        'Results: ' + count + '';
    document.getElementById('Time').innerHTML =
        'Took: ' + took + ' milliseconds to load ' + count + ' results';
})

这是所有代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-2.1.1.min.js"
    ></script>
    <link
      href="https://fonts.googleapis.com/css?family=Google+Sans+Display:wght@300;400;700;800;900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <style>
      body {
        font-family: 'Google Sans Display', sans-serif;
      }
      em{
        font-weight:900;
        font-style: normal;
      }
      li {
        font-size: 20px;
        margin-bottom: 4vh;
        font-weight: 400;

      }
      .content {

        margin-left: 20vw;
        margin-right: 20vw;
        text-align: justify;
      }
      :root {
  --primary: #23adad;
  --greyLight: #23adade1;
  --greyLight-2: #cbe0dd;
  --greyDark: #2d4848;
}



ul {
  list-style-type: none;
}

.items-list {
  max-width: 90vw;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 3rem;
  justify-content: center;
  align-content: center;
}
@media only screen and (max-width: 600px) {
  .items-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.item {
  width: 10rem;
  height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--greyDark);
  cursor: pointer;
}
.item span {
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);
  border-radius: 0.6rem;
  padding: 2rem;
  font-size: 3rem;
  transition: all 0.3s ease;
}
.item:hover span {
  transform: scale(1.2);
  color: var(--primary);
}
.item p {
  font-size: 1.2rem;
  margin-top: 1rem;
  color: var(--greyLight);
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  margin: 3rem;
  border-radius: 0.6rem;
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(90, 97, 129, 0.05);
}
.page__numbers, .page__btn, .page__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.8rem;
  font-size: 1.4rem;
  cursor: pointer;
}
.page__dots {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--greyLight);
  cursor: initial;
}
.page__numbers {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
}
.page__numbers:hover {
  color: var(--primary);
}
.page__numbers.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
  border: 1px solid var(--primary);
}
.page__btn {
  color: var(--greyLight);
  pointer-events: none;
}
.page__btn.active {
  color: var(--greyDark);
  pointer-events: initial;
}
.page__btn.active:hover {
  color: var(--primary);
}

    </style>
<div class="content">
    <h3 id="Results"></h3>
    <h3 id="Time"></h3>
    <h6 id="demo"></h6>
  </div>
  <div id="app" class="container">  
    <ul class="page">
        <li class="page__btn"><span class="material-icons">chevron_left</span></li>
        <li class="page__numbers"> 1</li>
        <li class="page__numbers active">2</li>
        <li class="page__numbers">3</li>
        <li class="page__numbers">4</li>
        <li class="page__numbers">5</li>
        <li class="page__numbers">6</li>
        <li class="page__dots">...</li>
        <li class="page__numbers"> 10</li>
        <li class="page__btn"><span class="material-icons">chevron_right</span></li>
      </ul>
    </div>
    <script>
      window.onload = function () {
        var search = prompt('search');
        var arText;
        var enText;
        var surah;
        var ayahNumber;
        var surahAndAyah;
        $(document).ready(function () {
          getQuote();
          $('#shuffle').on('click', getQuote);
          $('#tweet').click(function () {
            var tweetLink = '' + '"' + enText + '" QS' + surahAndAyah;
            window.open(tweetLink);
          });
        });

        function getQuote() {
          var ayah = Math.floor(Math.random() * 6236) + 1;
          var url =
            'http://api.quran.com:3000/api/v3/search?q= ' +
            search +
            ' &size=20&page=0&language=en';

          arText;
          enText;
          surah;
          ayahNumber;
          surahAndAyah;

          $.getJSON(url, function (data) {
            count = data.total_count;
            took = data.took;
            results = data.results;
            
            var li = '';
            results = data.results;
            var li = '';
            for (const x of results) {
              
              li +=
                '<li>' +
                x.text_madani +
                '<br><span class="surah">' +
                x.translations[0].text +' - '+ x.translations[0].resource_name+
                '</span><br> <span class="surah">' +
                x.verse_key +
                '</span><br></li>';
            }

            document.getElementById('demo').innerHTML = li;

            document.getElementById('Results').innerHTML =
              'Results: ' + count + '';
            document.getElementById('Time').innerHTML =
              'Took: ' + took + ' milliseconds to load ' + count + ' results';
          })
            .done(function () {
              console.log('second success');
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
              //alert("You're offline! " + textStatus);
            })
            .always(function () {
              console.log('complete');
            });
        }
      };
    </script>
  </body>
</html>

【问题讨论】：

您能否分享一下您的 api 中的数据是什么样的？
在这里quran.api-docs.io/v3/search/8zmA9uBcdWsDXgqQR
您想要在当前的<li> 后面加上<li>？还是只是根据翻译来乘以结果？

标签： javascript arrays json api

【解决方案1】：

您可以通过循环访问 results 和 translations 键来实现，如下所示：


$.getJSON(url, function (data) {
  count = data.total_count;
  took = data.took;
  results = data.results;
  
  var li = '';
  results = data.results;
  for (const x of results) {
      li += '<li>' + x.text_madani + '<br>' +
        '<span class="surah">' + x.verse_key + '</span><ul>'
    for (const y of x.translations) {
      li += '<li><span class="surah">' + 
        y.text +' - '+ y.resource_name+
      '</span></li>';
    }
    li += '</ul></li>';
  }

  document.getElementById('demo').innerHTML = li;

  document.getElementById('Results').innerHTML =
    'Results: ' + count + '';
  document.getElementById('Time').innerHTML =
    'Took: ' + took + ' milliseconds to load ' + count + ' results';
})

请记住，如果您的数据未经过清理或未使用某种抽象来生成 HTML，这可能会弄乱您的 HTML。

不鼓励使用从 API 结果连接起来的字符串来创建 HTML。

【讨论】：

不起作用，更新问题以显示所有代码
@NinjaSauce 我不确定您要完成什么。请检查my comment
我希望它遍历翻译数组并在 verse 键之后立即在列表中显示其内容
@NinjaSauce 是这样的吗？
最后一件事，翻译有多种语言，我可以通过什么方式将它们过滤成特定的语言，比如英语？翻译数组确实带有语言 ID。无论如何，您可以过滤以仅显示英文翻译。对不起，我要求太多了。我是学习 JSON 的新手，正在学习中

【解决方案2】：

您可以创建一个新的 ul 元素并使用 insertAdjacentHTML('beforeend', str) 将文本附加为 HTML 元素。

function printTranslations(translations) {
  var ul = '<ul>';

  for (const text of translations) {
    ul +=
      '<li><span class="surah">' + 
         text.text + ' - ' + text.resource_name +
       '</span></li>';
  }

  return ul + '</ul>';
}

function (data) {
  count = data.total_count;
  took = data.took;
  results = data.results;

  var ul = document.createElement('ul');
  results = data.results;
  for (const x of results) {

    ul.insertAdjacentHTML('beforeend',
      '<li>' +
      x.text_madani +
      '<br><span class="surah">' +
      printTranslations(x.translations) +
      '<span class="surah">' +
      x.verse_key +
      '</span><br></li>');
  }

  document.getElementById('demo').appendChild(ul);

  document.getElementById('Results').innerHTML = 'Results: ' + count + '';
  document.getElementById('Time').innerHTML =
    'Took: ' + took + ' milliseconds to load ' + count + ' results';
}

【讨论】：

不起作用，更新问题以显示所有代码
我修复了一点，但如果你能说出你遇到的错误会有所帮助
它没有任何不同。还是一个翻译。我希望它在列表中显示翻译数组中的所有对象