成功解析了我的 .json 文件，但出现错误答案

【问题标题】：successfully parsed my .json file but there is an error成功解析了我的 .json 文件，但出现错误
【发布时间】：2018-03-12 22:26:42
【问题描述】：

我一直在继续我的拖放页面的工作，该页面将解析和显示 json 数据。

我能够解析 .json 文件并将其显示在控制台中，但最后出现错误（请参阅下面的屏幕截图）。我错过了代码中的任何内容吗？提前谢谢！

JSFiddle : https://jsfiddle.net/vy19a7sf/2/

(function() {
  var dropzone = document.getElementById("dropzone");

  dropzone.ondrop = function(event) {
    event.preventDefault();
    this.className = "dropzone";

    console.log(event.dataTransfer.files[0]);

      var fileInput = document.getElementById("dropzone");
      var fileDisplayArea = document.getElementById("displayarea");

      var file = event.dataTransfer.files[0]
      var textType = "";

        if (file.type.match(textType)) {
          var reader = new FileReader();

          reader.onload = function(read) {
            // fileDisplayArea.innerText = reader.result;

            var json = reader.result;
            for(var num = 0; num < json.length; num++) {
              obj = JSON.parse(json);
              // console.log(obj["value"][num]);
              console.log(obj["value"][num]["changesetId"]);
              console.log(obj["value"][num]["author"]["displayName"]);
              console.log(obj["value"][num]["createdDate"]);
              console.log(obj["value"][num]["comment"]);
            }
          }

          reader.readAsText(file);
          }

          else {
            // fileDisplayArea.innerText = "File not supported!";
            console.log("File not supported!")
          }
}

  dropzone.ondragover = function() {
    this.className = "dropzone dragover";
    return false;
  };

  dropzone.ondragleave = function() {
    this.className = "dropzone";
    return false;
  };

}())

.dropzone {
  display: flex;
  line-height: 300px;
  justify-content: center;
  border: 2px dashed #ccc;
  color: #ccc;
}

.dropzone.dragover {
  border-color: #000;
  color: #000;
}

.displayarea {
  height: 200px;
  width: 100%;
  color: #000;
  padding: 20px;
  background-color: #e7e7e7;
  overflow-x: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
  <link rel="stylesheet" href="/css/styles.css" />
  <link rel="stylesheet" href="/changesets/css/styles.css" />
  <title>Code Metrics Tool</title>
</head>
<body>
  <header>
    <div>
      <a href="/">Code Metrics Tool</a>
    </div>
  </header>
  <main>
    <h2>Changesets</h2>
    <div class="dropzone" id="dropzone">Drop .json files here to convert</div>
  </main>
  <footer>
  </footer>

  <script src="/changesets/js/dragdrop.js"></script>

</body>
</html>

截图Console log was successfully printed, but at the end there is an error showing up

JSON 文件

{
    "count": 2,
    "value": [
        {
            "changesetId": 1456,
            "url": "https://.../changesets/1456",
            "author": {
                "displayName": "--",
                "url": "https://.../0e79980d-2df8-47b2-9aa3-4a7a118f1c90",
                "id": "0e79980d-2df8-47b2-9aa3-4a7a118f1c90",
                "uniqueName": "--",
                "imageUrl": "https://.../identityImage?id=0e79980d-2df8-47b2-9aa3-4a7a118f1c90"
            },
            "checkedInBy": {
                "displayName": "--",
                "url": "https://.../0e79980d-2df8-47b2-9aa3-4a7a118f1c90",
                "id": "0e79980d-2df8-47b2-9aa3-4a7a118f1c90",
                "uniqueName": "--",
                "imageUrl": "https://.../identityImage?id=0e79980d-2df8-47b2-9aa3-4a7a118f1c90"
            },
            "createdDate": "2018-02-28T11:20:36.52Z",
            "comment": "fixed problems",
            "commentTruncated": true
        },
        {
            "changesetId": 1451,
            "url": "https://.../changesets/1451",
            "author": {
                "displayName": "--",
                "url": "https://.../f62e6531-cb28-6ebb-bb5c-1663549c6165",
                "id": "f62e6531-cb28-6ebb-bb5c-1663549c6165",
                "uniqueName": "--",
                "imageUrl": "https://.../identityImage?id=f62e6531-cb28-6ebb-bb5c-1663549c6165"
            },
            "checkedInBy": {
                "displayName": "--",
                "url": "https://.../f62e6531-cb28-6ebb-bb5c-1663549c6165",
                "id": "f62e6531-cb28-6ebb-bb5c-1663549c6165",
                "uniqueName": "--",
                "imageUrl": "https:///identityImage?id=f62e6531-cb28-6ebb-bb5c-1663549c6165"
            },
            "createdDate": "2018-02-26T11:47:42.233Z",
            "comment": "Added an item",
            "commentTruncated": true
        }
    ]
}

【问题讨论】：

json.length 是 json 文本的长度，而不是它所描述的数组或对象的长度
也粘贴json文件
我更新了我的第一篇文章，并添加了 json 文件..
您将电子邮件留在...
如果你喜欢你也可以new Response(file).json().then(json => {...})

标签： javascript html json parsing

【解决方案1】：

正如 Patrick Evans 评论的那样，json.length 不是“值”中数组的长度。

你也不想在那个循环中使用obj = JSON.parse(json)，你只需要解析一次。

要解决您描述的这个问题，您需要获取“value”数组中的实际 id。

let valueArray = obj.value;
valueArray.forEach(function(vel){
  console.log(vel.changesetId);
  console.log(vel.author);
  //etc..
});

【讨论】：