javascriptでのjsonファイルの読み込みについて

投稿者: Anonymous

以下のようなjsonファイルをjavascriptで読み込みたいです。
現在、XMLHttpRequestとjson.parseを利用する手法を試していますが、1つ目の要素が<1 empty slot>となりそこだけがデータを取得できない状況です。
jsonファイルの方は書き換えずに読み込みをしたいのですが、どのようにすればよいのでしょうか。
よろしくお願いいたします。

data.json
{
  "1": {
    "aaa": "aaa", 
    "bbb": 0, 
    "ccc": 0, 
    "ddd": 0, 
    "eee": 0, 
    "fff": 0, 
    "ggg": 0
  }, 
  "2": {
    "aaa": "aaa", 
    "bbb": 1, 
    "ccc": 1, 
    "ddd": 1, 
    "eee": 1, 
    "fff": 1, 
    "ggg": 1
  }, 
  "3": {
    "aaa": "aaa", 
    "bbb": 2, 
    "ccc": 2, 
    "ddd": 2, 
    "eee": 2, 
    "fff": 2, 
    "ggg": 2
  }
}

read.html
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

(function (handleload) {
  var xhr = new XMLHttpRequest;

  xhr.addEventListener('load', handleload, false);
  xhr.open('GET', 'data.json', true);
  xhr.send(null);
}(function handleLoad (event) {
  var xhr = event.target,
      data = JSON.parse(xhr.responseText);

  console.log(data);
}));

</script>
</head>
<body>
<ul id="demo"></ul>
</body>
</html>

コンソールでの結果
[…]
2: Object { aaa: "aaa", bbb: 1, ccc: 1, … }
3: Object { aaa: "aaa", bbb: 2, ccc: 2, … }
__proto__: Object { … }

解決

本家スタックオーバフローにもありますが、
https://stackoverflow.com/questions/44513811/empty-slots-in-javascript-objects

ブラウザによるconsole.API挙動の違いのようです。
データ自体はきちんと取れていますが、consoleで吐き出すと取れていないように見えるのだと思います。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *