html 基本JSON：如何将下面的JSON显示为链接列表？

frebpwbc 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(104)

我有以下JSON URL列表：

{
"1": [
    {"name": "link 1",
     "url": "https://url-for-link-1.com"},
    {"name": "link 2"
     "url": "https://url-for-link-2.com"},
    {"name": "link 3",
     "url": "https://url-for-link-3.com"}
    ]
"2": [
    {"name": "link 4",
     "url": "https://url-for-link-4.com"},
    {"name": "link 5"
     "url": "https://url-for-link-5.com"},
    {"name": "link 6",
     "url": "https://url-for-link-6.com"}
    ]   
}

我有下面的javascript：

<script>
    $.getJSON( "/assets/json/resource-links.json", function( data ) {
        var items = [];
        $.each( data, function( id, name, url ) {
        items.push( "<li>" + "< a href='" + url + "'>" name + "</a>" + "</li>" );
        });
        $( "<ul/>", {
        html: items.join( "" )
        }).appendTo( "#" + id );
    });
</script>

我的DIV的ID如下所示：

<div id="1" class="links">
    <ul>
</div>
<div id="2" class="links">
    <ul>
</div>

如何读取JSON列表并将其放入DIV？

Html

来源：https://stackoverflow.com/questions/74820823/basic-json-how-do-i-display-the-following-json-as-a-list-of-links

2条答案

按热度按时间

2w3rbyxf1#

你可以简单地使用一个基本函数

$.getJSON('/assets/json/resource-links.json', function (data) {
  for (const key in data) {
    const links = data[key];
    const div = document.getElementById(key);
    const ul = document.createElement('ul');

    for (const link of links) {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = link.url;
      a.textContent = link.name;
      li.appendChild(a);
      ul.appendChild(li);
    }

    div.appendChild(ul);
  }
});

赞(0）回复(0）举报 2022-12-16

ktca8awb2#

你可以试试这个：

$.getJSON( "test.json", function( data ) {
    $.each( data, function( id, links) {
        $.each(links, function (i, elem){
            $(`#${id} ul`).append(`<li><a href="${elem.url}">${elem.name}</a></li>`)
        })
    });
});

因为你有嵌套的对象，所以你应该有嵌套的循环，当它迭代你的链接时，你可以很容易地把li附加到指定的ul上，a是它的一个孩子。

赞(0）回复(0）举报 2022-12-16

我来回答

html 基本JSON：如何将下面的JSON显示为链接列表？

2条答案

相关问题

热门标签

最新问答