javascript - 将 JSON 文件转换为 Javascript 对象-6ren

javascript - 将 JSON 文件转换为 Javascript 对象

转载作者：太空宇宙更新时间：2023-11-04 15:26:44

25

4

我正在尝试将此 json 文件转换为 javascript 对象，然后以表格格式显示它(目前不要担心表格的外观，一旦解决，我会修复它。 ) 我看不出我做错了什么无法检索 json 对象，因为它们在程序运行时打印在控制台中。 statechangehandler 的两次回调存在语法错误，但在接下来的两次回调中，打印了 json 对象，不太清楚为什么。任何帮助将不胜感激，在此先感谢。

问题2.html:

<html>

<head>
  <title>Question 2</title>
  <script>
    function makeAjaxQueryVideo() {

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {
        readyStateChangeHandler(xhttp);
      };

      xhttp.open("GET", "Question2.json", true);
      xhttp.send();
    }

    function readyStateChangeHandler(xhttp) {
      console.log("Callback function readyStateChangeHandler is executed");
      console.log("readyState = " + xhttp.readyState);
      console.log("status = " + xhttp.status);
      console.log("responseText:");
      console.log(xhttp.responseText);

      handleStatusSuccess(xhttp);
    }

    function handleStatusFailure(xhttp) {
      var displayDiv = document.getElementById("display");
      displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
    }

    function handleStatusSuccess(xhttp) {
      var jsonText = xhttp.responseText;

      var videoObj = JSON.parse(jsonText);
      console.log(videoObj);
      console.log("title is " + videoObj.title);

      displayVideo(videoObj);
    }

    function displayVideo(videoObj) {

      var html = "<h2>Stock Market Activity " + videoObj.queryTime + "</h2>";
      html += "<table border='1'>";
      html += "<tr><th>Stock</th><th>Value</th><th>Change</th><th>Net / %</th></tr>";
      for (var i = 0; i < videoObj.result.length; i++) {
        var videoObj1 = videoObj.result[i];
        html += "<tr>";
        html += "<td><b>" + videoObj1.title + "</b></td>";
        html += "<td align='right'>" + videoObj1.channel + "</td>";
        html += "<td style='color:green' align='right'>";
        html += videoObj1.view;
        html += "<img src='stockUp.png' />";
        html += "</td>";
        html += "<td align='right'>" + videoObj1.link + "%</td>";
        html += "</tr>";
      }
      html += "</table>";

      var displayDiv = document.getElementById("display");
      displayDiv.innerHTML = html;
    }
  </script>
</head>

<body>
  <button onClick="makeAjaxQueryVideo()">Get Search Result</button>
  <div id="display"></div>
</body>

</html>

问题2.json:

{
"result": {
"searchKeyword": "Mathematics",
"video": [
  {
    "title": "Chaos Game",
    "channel": "Numberphile",
    "view": "428K",
    "link": "http://www.youtube.com/watch?v=kbKtFN71Lfs",
    "image": "http://i.ytimg.com/vi/kbKtFN71Lfs/0.jpg",
    "length": "8:38"
  },
  {
    "title": "Australian Story: Meet Eddie Woo, the maths teacher you wish 
 you'd had in high school",
    "channel": "ABC News (Australia)",
    "view": "223K",
    "link": "http://www.youtube.com/watch?v=SjIHB8WzJek",
    "image": "http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg",
    "length": "28:08"
  },
  {
    "title": "Ham Sandwich Problem",
    "channel": "Numberphile",
    "view": "557K",
    "link": "http://www.youtube.com/watch?v=YCXmUi56rao",
    "image": "http://i.ytimg.com/vi/YCXmUi56rao/0.jpg",
    "length": "5:53"
  },
  {
    "title": "Magic Square Party Trick",
    "channel": "Numberphile",
    "view": "312K",
    "link": "http://www.youtube.com/watch?v=aQxCnmhqZko",
    "image": "http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg",
    "length": "3:57"
  },
  {
    "title": "The 8 Queen Problem",
    "channel": "Numberphile",
    "view": "909K",
    "link": "http://www.youtube.com/watch?v=jPcBU0Z2Hj8",
    "image": "http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg",
    "length": "7:03"
  }
]
}
}

最佳答案

There is a syntax error for two callbacks to the statechangehandler, but then on the next two callbacks, the json objects are printed, not quite sure why.

每次状态改变时，您都会调用 handleStatusSuccess ……甚至在它达到成功状态之前。

您可能应该改用 load 事件处理程序。

function makeAjaxQueryVideo() {
    var xhttp = new XMLHttpRequest();
    xhttp.addEventListener("load", handler)
    xhttp.open("GET", "Question2.json");
    xhttp.send();
}

function handler() {
    console.log("Callback function readyStateChangeHandler is executed");
    console.log("readyState = " + this.readyState);
    console.log("status = " + this.status);
    console.log("responseText:");
    console.log(this.responseText);
    handleStatusSuccess(this);
}

关于javascript - 将 JSON 文件转换为 Javascript 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58549294/

25

4

0

文章推荐： c# - C++ CLR win32 或其他？

文章推荐： html - 我怎样才能摆脱选择输入边框

文章推荐： javascript - 如何使用 JavaScript 中的 href 值转到链接？

c++ - 将迭代器存储到字符串中(转换、转换、追加？)
我正在尝试将一个字符串逐个字符地复制到另一个字符串中。目的不是复制整个字符串，而是复制其中的一部分(我稍后会为此做一些条件......) 但我不知道如何使用迭代器。你能帮帮我吗？ std::stri
C++:转换/转换 void 指针到结构引用
我想将 void 指针转换为结构引用。结构的最小示例: #include "Interface.h" class Foo { public: Foo() : mAddress((uint
javascript - 为什么一个元素从窗口的左上角开始它的 css3 转换/转换？
这有点烦人:我有一个 div，它从窗口的左上角开始过渡，即使它位于文档的其他任何位置。我试过 usign -webkit-transform-origin 但没有成功，也许我用错了。有人可以帮助我吗？
html - 有什么方法可以检测 CSS3 转换/转换/动画的过程状态？
假设，如果将 CSS3 转换/转换/动画分配给 DOM 元素，我是否可以检测到该过程的状态？我想这样做的原因是因为我正在寻找类似过渡链的东西，例如，在前一个过渡之后运行一个过渡。最佳答案我在 h
CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像
最近我遇到了“不稳定”屏幕，这很可能是由 CSS 转换引起的。事实上，它只发生在 Chrome 浏览器上(可能还有 Safari，因为一些人也报告了它)。知道如何让它看起来光滑吗？此外，您可能会注意
jquery - CSS3 转换(转换)在 Firefox 中不起作用，但在 Chrome 和 Safari 中起作用
我正在开发一个简单的 slider ，它使用 CSS 过渡来为幻灯片设置动画。我用一些基本样式和一些 javascript 创建了一支笔 here .注意:由于 Codepen 使用 Prefixfr
Linq 转换
我正在使用以下代码返回 IList: public IList FindCodesByCountry(string country) { var query =
转换、计算的RESTful设计
如何设计像这样的操作: 计算转化翻译例如:从“EUR”转换为“CNY”金额“100”。这是 /convert?from=EUR&to=CNY&amount=100 RESTful 吗？最佳答
Jquery 转换
我使用 jquery 组合了一个图像滚动器，如下所示 function rotateImages(whichHolder, start) { var images = $('#' +which
CSS 转换
如何使用 CSS (-moz-transform) 更改一个如下所示的 div: 最佳答案你可以看看Mozilla Developer Center .甚至还有例子。但是，在我看来，您的具体示例不
CSS 转换
我需要帮助我正在尝试在选中和未选中的汉堡菜单上实现动画。我能够为菜单设置动画，但我不知道如何在转换为 0 时为左菜单动画设置动画 &__menu { transform: translateX(
swift :转换
我正在为字典格式之间的转换而苦苦挣扎:我正在尝试将下面的项目数组转换为下面的结果数组。本质上是通过在项目第一个元素中查找重复项，然后仅在第一个参数不同时才将文件添加到结果集中。 var items:[
具有相同布局的不同类型之间的C++转换
如果我有两个定义相同的结构，那么在它们之间进行转换的最佳方式是什么？ struct A { int i; float f; }; struct B { int i; float f; }; void
Javascript 转换
我编写了一个 javascript 代码，可以将视口(viewport)从一个链接滑动到另一个链接。基本上一切正常，你怎么能在那里看到http://jsfiddle.net/DruwJ/8/ 我现在的
meteorjs 图像上传/转换
我需要将文件上传到 meteor ，对其进行一些图像处理(必要时进行图像转换，从图像生成缩略图)，然后将其存储在外部图像存储服务器(s3)中。这应该尽可能快。您对 nodejs 图像处理库有什么建议
KDB+，转换，左操作数
刚开始接触KDB+，有一些问题很难从Q for Mortals中得到。说，这里 http://code.kx.com/wiki/JB:QforMortals2/casting_and_enumera
JSF float 转换
我在这里的一个项目中使用 JSF 1.2 和 IceFaces 1.8。我有一个页面，它基本上是一大堆浮点数字段的大编辑网格。这是通过 inputText 实现的页面上的字段指向具有原始值的值对象
SceneKit 转换 ScnMatrix4
ScnMatrix4 是一个 4x4 矩阵。我的问题是什么矩阵行对应于位置(ScnVector3)，旋转(ScnVector4)，比例(ScnVector3)。第 4 行是空的吗？编辑: 我玩弄了
Scala map 转换
恐怕我是 Scala 新手: 我正在尝试根据一些简单的逻辑将 Map 转换为新 Map: val postVals = Map("test" -> "testing1", "test2" -> "te
基于配置文件的 XSLT 转换
输入: This is sample 1 This is sample 2 输出: ~COLOR~[Green]This is sample 1~COLOR~[Red]This is sam

首页

博学

6Ren·AI

商城

javascript - 将 JSON 文件转换为 Javascript 对象