Question

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

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

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

＆＃13;

(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;
  };

}())

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

SCREENSHOT 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
        }
    ]
}

Answer 1

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

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

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

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

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

1 个答案: