如何将指定JSON解析为链接列表并插入对应DIV容器？

问题背景 #

现有如下JSON结构的链接数据：

{
  "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"}
  ]   
}

页面中的HTML容器（注意补全未闭合的</ul>标签）：

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

原JavaScript代码因遍历逻辑、HTML拼接等问题，无法正确将链接插入对应容器，以下是修正后的代码：

修改后的代码 #

$.getJSON("/assets/json/resource-links.json", function(data) {
    // 遍历每个容器ID对应的链接数组
    $.each(data, function(containerId, links) {
        var items = [];
        // 遍历当前ID下的每个链接对象
        $.each(links, function(index, link) {
            // 用模板字符串简洁拼接链接HTML，避免语法错误
            items.push(`<li><a href="${link.url}">${link.name}</a></li>`);
        });
        // 将生成的列表项插入对应容器内的ul中
        $(`#${containerId} ul`).html(items.join(""));
    });
});

关键修改说明 #

• 调整遍历层级：原代码仅做单层遍历，未处理每个ID对应的链接数组，现在增加第二层遍历，逐个解析每个链接对象
• 修复HTML拼接错误：原代码中< a>标签多了空格，字符串拼接缺少加号，改用模板字符串既简洁又能避免语法失误
• 修正容器定位：原代码在遍历外部处理DOM插入，无法对应到正确容器，现在在每个ID的遍历周期内，直接定位到对应容器的ul标签插入内容
• 补全页面结构：原HTML中的ul标签未闭合，建议补全以保证页面结构合法

内容的提问来源于stack exchange，提问作者m0nde