<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<!-- ここに出力します -->
</ul>
<script>
$(function(){
json = "./list.json";
target = $("#list");
$.getJSON(json, function(data, status){
for(var n in data){
var text = '<li>';
if (data[n].url){
line = '<a href="'+data[n].url+'" target="_blank"><span>'+data[n].name+'</span></a>';
} else {
line = '<i><span>'+data[n].name+'</span></i>';
}
text = text+line+'</li>';
$(target).append(text);
}
})
})
</script>
</body>
</html>
これは分かり易いですね。
