schema.org.ComputerLanguage.JsonLD2Html.201702141306

Create HTML ul elements from JSON-LD.

by ytyaru

HTML

<script id="lang-ld" type="application/ld+json">
[{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "手続き型言語、関数型言語、コンパイラ言語。",
  "url": "https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E"
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C++",
  "alternateName": "cpp",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "C言語の拡張として開発された。",
  "url": "https://ja.wikipedia.org/wiki/C%2B%2B",
  "sameAs": ["https://ja.wikipedia.org/wiki/C%2B%2B", "https://ja.wikipedia.org/wiki/Microsoft_Visual_C%2B%2B", "https://ja.wikipedia.org/wiki/%E3%83%9C%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89", "https://ja.wikipedia.org/wiki/GNU%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3", "https://ja.wikipedia.org/wiki/Clang", "https://ja.wikipedia.org/wiki/Intel_C%2B%2B_Compiler"]
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C#",
  "alternateName": "CSharp",
  "description": "マルチパラダイムプログラミング言語",
  "disambiguatingDescription": "強い型付け、命令型、宣言型、手続き型、関数型、ジェネリック、オブジェクト指向。",
  "url": "https://ja.wikipedia.org/wiki/C_Sharp",
  "sameAs": ["https://msdn.microsoft.com/ja-jp/library/kx37x362.aspx", "http://www.mono-project.com/docs/about-mono/languages/csharp/"]
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "Java",
  "description": "オブジェクト指向プログラミング言語",
  "disambiguatingDescription": "構造化・命令型・オブジェクト指向。",
  "url": "https://ja.wikipedia.org/wiki/C_Sharp",
  "sameAs": ["http://www.oracle.com/jp/technologies/java/standard-edition/overview/", "http://www.oracle.com/technetwork/jp/middleware/jrockit/overview/", "http://openjdk.java.net/", "http://gcc.gnu.org/java/"]
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "JavaScript",
  "description": "プロトタイプベースのオブジェクト指向スクリプト言語",
  "disambiguatingDescription":...

JavaScript

langs = JSON.parse(document.getElementById('lang-ld').text);
document.body.appendChild(createListTag(langs));

function createListTag(langs) {
  var ul = document.createElement('ul');
  for (var i = 0; i < langs.length; i++) {
    var li = document.createElement('li');
    li.appendChild(createLinkTag(langs[i].name, langs[i].url, langs[i].description));
    ul.appendChild(li);
  }
  return ul;
}

function createLinkTag(text, href, title) {
  var a = document.createElement('a');
  a.appendChild(document.createTextNode(text));
  a.setAttribute("href", href);
  a.setAttribute("title", title);
  return a;
}