如何从JSON值创建超链接

Question

我使用jQuery、AJAX和JSON来构建一个无序的链接列表。本质上它是一个导航菜单。每个链接的名称及其URL都是JSON文件中的值：分别为name和html_url。

我已经编写了创建基本列表的代码(见下文(，但现在我需要使每个列表项都成为一个超链接，该超链接对应于它自己的特定URL值。

有人能告诉我如何提取JSON文件中每个项目的URL值并将其应用于我的代码，以便每个列表项目都成为加载适当URL的超链接吗？提前感谢您的反馈。

$.ajax({
url: 'https://myurl.json',
dataType: 'json',
type: 'get',
cache: 'false',
success: function(data) {
$(data.categories).each(function(index, value) {
$('#testnav').append($("<ul>").append($("<li class='cat'>").append(value.name)))
});
}
});

示例JSON数据如下：

categories  
0   
id  360002246652
html_url    "https://sampleurl0"
position    0
created_at  "2019-10-18T17:42:11Z"
updated_at  "2020-02-28T04:37:01Z"
name    "Getting Started"
description ""
locale  "en-us"
source_locale   "en-us"
outdated    false
1   
id  360002246672
html_url    "https://sampleurl1"
position    1
created_at  "2019-10-18T17:42:35Z"
updated_at  "2020-02-06T17:40:43Z"
name    "API Reference"
description ""
locale  "en-us"
source_locale   "en-us"
outdated    false
2   
id  360002254991
url
html_url    "https://sampleurl2"
position    2
created_at  "2019-10-18T17:43:12Z"
updated_at  "2020-03-10T19:09:56Z"
name    "API Reference 2"
description ""
locale  "en-us"
source_locale   "en-us"
outdated    false
3   
id  360002255011
html_url    "https://sampleurl3"
position    3
created_at  "2019-10-18T17:43:50Z"
updated_at  "2019-10-24T21:34:24Z"
name    "Agent UI"
description ""
locale  "en-us"
source_locale   "en-us"
outdated    false

Answer 1

将列表附加到循环之外，然后将每个列表项中的url和名称值连接起来：

success: function(data) {
$('#testnav').append($('<ul id="navMenu"></ul>'));
$(data.categories).each(function(index, value) {
$('#navMenu').append(
$('<li class="cat"><a href="' + value.url + '"> + value.name + '</a></li>')
);
});
}

Protip：JS用单引号，HTML用双引号。省去了很多麻烦和逃跑。

Answer 2

要实现这一点，您需要将li的内容包装在a元素中，该元素的href设置为JSON响应中对象的URL。试试这个：

$.ajax({
url: 'https://myurl.json',
dataType: 'json',
type: 'get',
cache: 'false',
success: function(data) {
let $ul = $('<ul />');
let html = data.categories.map(c => `<li class="cat"><a href="${c.html_url}">${c.name}</a></li>`);
$ul.append(html).appendTo('#testnav');
}
});