取得したJSONデータをランダムにHTML上に出力させたい

Question

下記のようにjQueryで外部のJSONデータをfor in文でHTML内に出力させている状態で、JSONに記述している順番ではなくランダムに出力させたいのですが、どのようなロジックで処理すればいいかがわからず悩んでいます。

【HTML（js）】

〜 一部抜粋 〜
<ul id="wrap">
 <script>
  $(function(){
   $.getJSON("./sample.json",function(list){
    for(var i in list) {
     var h = '<li>'
	   + list[i].area
           + '<ul>';
	   for(var j in list[i].city){
	    h += '<li>'
	      + list[i].city[j].name
	      + '</li>';
           }
           h += '</ul>'
              + '</li>';
	   $("#wrap").append(h);
     }
   });
  });
 </script>
</ul>

【JSON】

[
 {
  "area": "東北",
  "city": [
   {"name": "青森"},
   {"name": "秋田"},
   {"name": "盛岡"},
   {"name": "仙台"}
  ]
 },
 {
  "area": "関東",
  "city": [
   {"name": "東京"},
   {"name": "埼玉"},
   {"name": "千葉"}
  ]
 },
 {
  "area": "近畿",
  "city": [
   {"name": "大阪"},
   {"name": "神戸"},
   {"name": "京都"}
  ]
 }
]

【出力後のHTML】

<ul id="wrap">
 <li>東北
  <ul>
   <li>青森</li>
   <li>秋田</li>
   <li>盛岡</li>
   <li>仙台</li>
  </ul>
 </li>
 <li>関東
  <ul>
   <li>東京</li>
   <li>埼玉</li>
   <li>千葉</li> 
  </ul>
 </li>
 <li>近畿
  <ul>
   <li>大阪</li>
   <li>京都</li>
   <li>神戸</li> 
  </ul>
 </li>
</ul>

配列の値をランダムに表示させるようにしたところ、変数hに入っている文字「<、u、l、」単位でランダムに表示されてしまい、for文でループさせているブロック（id="wrap"直下のli要素）単位で表示させるのが実現したいことです。そもそも、上記のようなアプローチではなく他の方法を検討する必要があるのかもしれませんが、、

id="wrap"直下のli要素の並びをランダムに表示させるようにしたいのですが、どのようにすればいいのかご教授いただけますと幸いです。

---

【解決後のjs】

<script>
  $(function(){
   $.getJSON("./sample.json",function(list){
    var arry = list;
    var numbers = [];
    for (var i = 0; i < arry.length; i++) {
     numbers.push(Math.random());
    }
    var atRandom = arry.sort(function (a, b) {
     return numbers[arry.indexOf(a)] - numbers[arry.indexOf(b)];
    });
    for(var i in atRandom) {
     var h = '<li>'
           + atRandom[i].area
           + '<ul>';
      for(var j in atRandom[i].city){
        h += '<li>'
           + atRandom[i].city[j].name
           + '</li>';
      }
      h += '</ul>'
         + '</li>';
      $("#wrap").append(h);
     }
   });
  });
 </script>

Answer 1

配列を並び替えるにはsortを使います。
参考サイト: Array.prototype.sort()

えっ、ランダムにしたいのにsortじゃ無理？
言いたい事はわかりますがまずは聞いてください。

sortメソッドにはソート順決定のアルゴリズムとしてコールバック関数を埋め込む事が可能です。

function compare(a, b) {
  if (ある順序の基準において a が b より小) {
     return -1;
  }
  if (その順序の基準において a が b より大) {
     return 1;
  }
  // a は b と等しいはず
  return 0;
}

Math.random()で同じ要素数のランダムな数値の配列を別途用意してやって…
これをソートの定義表として利用すれば良いのです。

var list = [
  {area: "東北", city: [{name: "青森"}, {name: "秋田"}, {name: "盛岡"}, {name: "仙台"}]},
  {area: "関東", city: [{name: "東京"}, {name: "埼玉"}, {name: "千葉"}]},
  {area: "近畿", city: [{name: "大阪"}, {name: "神戸"}, {name: "京都"}]}
];
// ランダムな値の配列を用意
var numbers = [];
for (var i = 0; i < list.length; i++) {
  numbers.push(Math.random());
}
var atRandom = list.sort(function (a, b) {
  return numbers[list.indexOf(a)] - numbers[list.indexOf(b)];
})

console.log(numbers); // [0.3628977291901645, 0.6156880969149652, 0.42720050635830575]
console.log(atRandom); // [{東北}, {近畿}, {関東}]

あれ？　「li要素の並びをランダムに表示させるようにしたい」んですか？
回答文のコードは大本の地方名をランダムに並べ替えてしまったので、ちょっと違いますが、
やるべき事は全く一緒のはずなので頑張って実装してみてくださいね。

Comments

[miyabi-sun]

因みに今回ソートのコールバック関数内でlist.indexOf(a)としていますが、
これはlistが`オブジェクトの配列`だから成り立っています。
もし文字列や数値かつ、同じ値が複数存在する場合、このコードでランダムに並び替えようとしてもうまく動かなさそうです。
また別途値と乱数をセットにした配列を用意する流れになりますが、コードの難度がかなり上がりますので割愛しました。

[s_ogawa]

早速のご返答、ご教授ありがとうございます。
教えていただいたソースコードのそのままコピペで恐縮ですが、見事に希望する要件が実現できました。
（教えていただいたのソースコードを追記したものを本文に更新しています）

恥ずかしながら、配列を並び替えるというところに至らなかったため、大変勉強になりました。
追記でいただいておりました下記の部分については今回は外部のJSONファイルでデータを取り扱う前提のため、問題なさそうです。詳細ありがとうございました。

素早く問題が解決でき感謝しております、まだまだ勉強していきたいと思います。