owned mediaウェブ制作に役立つコンテンツを発信中!

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

最終更新日: Update!!
こちらのコンテンツで過去記事「外部の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>
  いかがでしょうか、ブログ投稿記事などを順不同にアーカイブとして出力させたりと色々使えるところはありそうですね。少しややこしいですが、配列を自由に操作できるといろんな用途に対応できるので勉強していきたいと思います。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

comments

  • オガワ シンヤ

    2018.11.28
    まる様 いつも当メディアの記事をご覧いただきありがとうございます。 また、親切丁寧なご指摘も誠にありがとうございます。 恥ずかしながら初歩的なミスに気づかず、このような形でお知らせいただけるのはありがたい限りでございます。 これからも皆様にとって役に立つような情報発信を続けていければと思います。 これからもどうぞ宜しくお願いいたします。
  • まる

    2018.11.28
    オガワさま 非常に分かりやすく、サンプルコードーをコピペすることで、実際の動きがわかる形にまとめて下さって大変参考になりました。この場をかりてお礼申し上げます。 さて、記事を参考にさせていただく中で、2点ほど気がついた点がありましたので、ご連絡させていただきます。 1) Math.randam() → Math.random() 2) var randArry = arry.sort(function(a, b)) { return numbers[arry.indexOf(a)] - numbers[arry.indexOf(b)]; } ↓ var randArry = arry.sort(function(a, b) { return numbers[arry.indexOf(a)] - numbers[arry.indexOf(b)]; }); 冒頭でも述べましたが、非常に分かりやすくまとめてくださっているぶん、サンプルコードをコピペしても再現出来ない。ということが、記事の信頼性を下げてしまう恐れを感じ「大変もったいない。」事だと思った為、ご連絡をさせていただきました。(お節介と感じられましたら、出過ぎた行動にお詫び申し上げます) 今後も良記事の配信に期待させていただきます。

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram