外部のJSONデータの順番をランダムに変更させてHTMLへ出力する | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
0%

Programmingプログラミングナレッジ

Posted:2018.07.31

外部のJSONデータの順番をランダムに変更させてHTMLへ出力する

こちらのコンテンツで過去記事「外部のJSONデータをjQueryを使ってHTMLへ出力する」にて、JSONデータをjQueryを使ってHTMLに出力する方法をあげていましたが、今回はその応用編として、配列を並び替えることでJSONデータの順序をランダムに変更させてHTMLに出力させていきたいと思います。

 

まずは前提条件として、下記の外部JSONファイルのデータを使っていきます。通常通りこの並び順で出力させる場合はこちらの記事「外部のJSONデータをjQueryを使ってHTMLへ出力する」を参考にしてください。

【JSON】

[
  {
    "num": "001",
    "list": "リストA",
    "content": "コンテンツA"
  },
  {
    "num": "002",
    "list": "リストB",
    "content": "コンテンツB"
  },
  {
    "num": "003",
    "list": "リストC",
    "content": "コンテンツC"
  }
]

 

ではこの並び順を変更させてjQueryでHTMLに出力していきます。下記のコードを記述します。

【HTML / jQuery】

<dl id="wrap">
  <script type="text/javascript">
    $(function(){
      $.getJSON("../json/sample.json", function(sample_list){
        var arry = sample_list;
        var numbers = [];
        for (var i = 0; i < arry.length; i++ ) {
          numbers.push(Math.randam());
        }
        var randArry = arry.sort(function(a, b)) {
          return numbers[arry.indexOf(a)] - numbers[arry.indexOf(b)];
        }
        for(var i in randArry){
          var h = '<dt>'
                + randArry[i].num
                + ':'
                + randArry[i].list
                + '</dt>'
                + '<dd>'
                + randArry[i].content
                + '</dd>';
          $("dl#wrap").append(h);
        }
      });
    });
  </script>
</dl>

 

外部のJSONファイルを参照するので、getJSON関数で、外部JSONファイルを指定し、コールバック関数内に、JSONデータをランダムに出力させるコードを記述していきます。

 

まずは、外部JSONデータを変数に入れます。続いて、ランダムな変数を格納させるため空の配列を変数に入れます。その変数をMath.randam関数でランダムな配列を作成します。続いてsort関数で先ほど作成したランダムな配列に合わせて並び替えていきます。その並び替えたものを変数に入れておきます。

 

最後にランダムに並び替えた配列が入った変数をfor in文でループさせて、JSONの値が入るように繰り返していきます。そしてappend関数で指定した要素内に出力させます。実際の出力結果は以下のようになります。

【HTML】(出力後)

<dl id="wrap">
  <dt>002:リストB</dt><dd>コンテンツB</dd>
  <dt>003:リストC</dt><dd>コンテンツC</dd>
  <dt>001:リストA</dt><dd>コンテンツA</dd>
</dl>

 

いかがでしょうか、ブログ投稿記事などを順不同にアーカイブとして出力させたりと色々使えるところはありそうですね。少しややこしいですが、配列を自由に操作できるといろんな用途に対応できるので勉強していきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】