jsonファイルを読み込んで、キーでソートしてDOMとして展開する。

やりたいこと

• jsonファイルを読み込みたい。
• jsonデータをつかって、記事の一覧をHTMLで出力したい。
• 出力場所は「<dl id="entryList"></dl>」の中。
• 「記事ID」でソートしたい。

jsonのなかみ

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },

JavaScriptを書いてみた。

// jsonファイル
const json_url = 'https://jsonplaceholder.typicode.com/posts/';

// jsonを読み込む
fetch(json_url)
  .then(response => response.json()) //json形式で返す
  .then(json_data => jsonArray(json_data))
  .catch(error => console.log(error));

//jsonデータを引数に受け取ってDOM操作を行う関数を作成
const jsonArray = (jsonObj) => {
 const data = jsonObj; //変数化

 // キーでソートする
 data.sort((a, b) => {
//  return (a.id < b.id) ? -1 : 1;  //オブジェクトの昇順ソート
  return (a.id > b.id) ? -1 : 1;  //オブジェクトの降順ソート
 });


 // HTMLを出力する
 Object.values(data).forEach(data => {

// テンプレートリテラル
let pub_html = `
<div>
　<dt>【${data.id}】${data.title}</dt>
　<dd>${data.body}</dd>
</div>
`;

  // #entryListの中に出力
  document.querySelector('#entryList').insertAdjacentHTML('afterend',pub_html);
 });
};

参考サイト