​x
 
1
<!doctype html>
2
<title>Example</title>
3
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
4
<script>
5
$(function() {
6
  $("#getData").click(function() {
7
  
8
    // Put artistList element and JSON file location into a variable
9
    var artistList = $("#artistList");
10
    var url = "https://web.QHMit.com/jquery/examples/artists.txt";
11
​
12
    // Get the JSON file
13
    $.getJSON(url, function(data) {
14
​
15
      // Put artist info into a variable
16
      var artists = data.artists.map(function(item) {
17
        return item.artistname + " (" + item.born + ")";
18
      });
19
      
20
      // Remove all child nodes (including text nodes)
21
      artistList.empty();
22
​
23
      // Format artists with HTML tags
24
      if (artists.length) {
25
        var content = "<li>" + artists.join("</li><li>") + "</li>";
26
        var list = $("<ul>").html(content);
27
        artistList.append(list);
28
      }
29
    });
30
  });
31
});
32
</script>
33
​
34
<button id="getData">Display Artists</button>
35
<div id="artistList"></div>