グローバルオブジェクトに仕込んだ連想配列を取得したいのですが・・・

いつもありがとうございます。
いま、オンロード時にAjax経由で適当な連想配列を取得し、JS側で適当な配列に格納します。配列の中身は個々のオブジェクトになるかと思います[object, object・・・]の形）。
そして、オンロード時にたとえばクリックボタンを生成し、それをクリックしたときにそのオブジェクトにアクセスしたいのですがうまくいきません。
具体的なテストコードは以下の通りです。

環境：centos6.6 ,php5.4.36, chrome 最新版

test.php
<?php
if (isset($_GET["func"]) && $_GET["func"] == "init") {
  $array = [["category" => "和食", "food" => "寿司"], ["category" => "洋食", "food" => "オムライス"]];
  $json = json_encode($array);
  echo $json;
  exit();
}
?>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var Ajax = new XMLHttpRequest();
var menu = "";
window.onload = function() {
  var url = "test.php" + "?dummy=" + new Date().getTime() + "&func=" + "init";
  Ajax.open("GET", url, true);
  Ajax.send(null);
  Ajax.onreadystatechange = function() {
    if (Ajax.readyState == 4 && Ajax.status == 200) {
      this.menu = JSON.parse(Ajax.responseText);
      alert(this.menu[1].food+"お願いします!");
      var out = "<input type='button' onclick='moppen();' value='もっぺん叫ぶ'>";
      document.getElementById("result").innerHTML = out;
    }
  }
}
function moppen() {
  alert(this.menu[1].food+"お願いします!"); // ここがうまく動かない
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>