こちらのコンテンツで過去記事「外部の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.random());
        }
        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.random関数でランダムな配列を作成します。続いて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>

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