Question posted in
You can find the official documentation here.

How can I create a hyperlink from a JSON value? – Jquery ajax

I am using jQuery, AJAX and JSON to build an unordered list of links. Essentially it’s a navigation menu. The name of each link and its URL are both values within the JSON file: name and html_url respectively.

I have already written the code that creates the basic list (see below), but I now need to make each list item a hyperlink that corresponds to its own particular URL value.

Can someone please advise how I pull the URL value for each item in the JSON file and apply it to my code so that each list item becomes a hyperlink that loads the appropriate URL? Thanks in advance for feedback.

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

Sample JSON data is below:

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
Tags:

2

Answers


  1. 0

    Append the list outside your loop, then just concatenate the url and name values in each list item:

    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: Single quotes for JS, double for HTML. Saves a lot of hassle and escaping.

    Login or Signup to reply.
  2. 0

    To make this work you need to wrap the content of the li in an a element, whose href is set to the URL from the object in the JSON response. Try this:

    $.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');
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search