循环遍历 JSON 中的数组

Question

我创建了一个循环来循环使用此端点的 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": "ﭑ",
                    "code_v3": "ﭑ",
                    "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>标记中。 然后它通过翻译。 以下代码段仅显示数组的第一个元素，我想在我的列表项中包含一个新列表（紧跟在 verse 键之后），所有翻译都包含在更多<li>标签中。 有没有办法做到这一点？

片段：

$.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>

Answer 1

您可以创建一个新的 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';
}

Answer 2

您可以通过循环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。