Как я могу создать гиперссылку из значения JSON?

Question

Я использую jQuery, AJAX и JSON для создания неупорядоченного списка ссылок. По сути это навигационное меню. Имя каждой ссылки и ее URL являются значениями в файле JSON: name и html_url соответственно.

Я уже написал код, который создает базовый список c (см. Ниже), но теперь мне нужно сделать каждый элемент списка гиперссылкой, которая соответствует его собственному значению URL.

Может кто-нибудь посоветовать, как я извлекаю значение URL для каждого элемента в файле JSON и применяю его к своему коду, чтобы каждый элемент списка становился гиперссылкой, которая загружает соответствующий 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

Чтобы сделать это, вам нужно обернуть содержимое li в элемент * a, для которого href соответствует URL-адресу объекта в ответе JSON. Попробуйте это:

$.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');
  }
});

Answer 2

Добавьте список за пределами l oop, затем просто объедините значения url и name в каждом элементе списка:

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>')
        );
    });
}

Подсказка: одинарные кавычки для JS, двойные для HTML. Сохраняет много хлопот и избежать.