时间戳

首页 > 解决方案 > 循环遍历 JSON 中的数组

javascript - 循环遍历 JSON 中的数组

问题描述

我创建了一个循环来循环使用此端点的 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>

标签： javascriptarraysjsonapi

解决方案

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

推荐阅读