Question

伙计们

我想从json文件中读取，我创建了json文件并使用ajax从中读取。我创建包含课程对象的视频对象（标题和URL）。我尝试阅读标题＆amp; HTML的url作为示例，但HTML页面中没有数据显示。

   {
  "video": {
    "HTML": [
      {
        "title": "HTML Intro",
        "URL": "http://www.youtube.com/embed/dD2EISBDjWM"
      },
      {
        "title": "Lists",
        "URL": "http://www.youtube.com/embed/09oErCBjVns"
      },
      {
        "title": "Tables",
        "URL": "http://www.youtube.com/embed/wvR40su_XBM"
      },
      {
        "title": "Links",
        "URL": "http://www.youtube.com/embed/U4UHoiK6Oo4"
      },

      {
        "title": "Images",
        "URL": "http://www.youtube.com/embed/Zy4KJeVN7Gk"
      }
    ],
    "CSS": [
      {
        "title": "Applying Styles",
        "URL": "http://www.youtube.com/embed/Wz2klMXDqF4"
      },
      {
        "title": "Selectors",
        "URL": "http://www.youtube.com/embed/6rKan6loNTw"
      },
      {
        "title": "Box Model",
        "URL": "http://www.youtube.com/embed/NR4arpSA2jI"
      },
      {
        "title": "Positioning",
        "URL": "http://www.youtube.com/embed/W5ycN9jBuBw"
      }
    ],
    "JavaScript": [
      {
        "title": "Introduction to JavaScript",
        "URL": "http://www.youtube.com/embed/yQaAGmHNn9s"
      },
      {
        "title": "Comments and Statements",
        "URL": "http://www.youtube.com/embed/yUyJ1gcaraM"
      },
      {
        "title": "Variables",
        "URL": "http://www.youtube.com/embed/og4Zku5VVl0"
      },
      {
        "title": "Functions",
        "URL": "http://www.youtube.com/embed/5nuqALOHN1M"
      },
      {
        "title": "Conditions",
        "URL": "http://www.youtube.com/embed/5gjr15aWp24"
      },
      {
        "title": "Objects",
        "URL": "http://www.youtube.com/embed/mgwiCUpuCxA"
      },
      {
        "title": "Arrays",
        "URL": "http://www.youtube.com/embed/nEvBcwlpkBQ"
      }
    ],
    "Jquery": [
      {
        "title": "Introduction",
        "URL": "http://www.youtube.com/embed/hMxGhHNOkCU"
      },
      {
        "title": "Event Binding",
        "URL": "http://www.youtube.com/embed/G-POtu9J-m4"
      },
      {
        "title": "DOM Accessing",
        "URL": "http://www.youtube.com/embed/LYKRkHSLE2E"
      },
      {
        "title": "Image Slider",
        "URL": "http://www.youtube.com/embed/KkzVFB3Ba_o"
      }
    ]
  }
}

我使用ajax从中读取，我需要阅读所有HTML标题和URL。这有什么不对？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="id01"></div>
<script>
var xhr;
  if (window.XMLHttpRequest)
  {
    xhr = new XMLHttpRequest();
  }
  else
  {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open('GET', 'video.json');
  xhr.onreadystatechange = function ()
  {
    if ((xhr.readyState === 4) && (xhr.status === 200)) {
        var arr = JSON.parse(xhr.responseText);
        var out = "<table>";
        for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        video[HTML][i].title +
        "</td><td>" +
       video[HTML][i].URL +
        "</td></tr>";
      }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
    }
  }
  xhr.send();
    </script>
</body>
</html>

Answer 1

尝试在video["HTML"][i].title替换"HTML"其中HTML为video[HTML][i].title的字符串，同时arr不是数组，而是对象

var out = "<table>";

for (var i = 0; i < json.video["HTML"].length; i++) {
  out += "<tr><td>" +
    json.video["HTML"][i].title +
    "</td><td>" +
    json.video["HTML"][i].URL +
    "</td></tr>";
}

out += "</table>";
document.getElementById("id01").innerHTML = out;

＆＃13;

var json = {
  "video": {
    "HTML": [{
        "title": "HTML Intro",
        "URL": "http://www.youtube.com/embed/dD2EISBDjWM"
      }, {
        "title": "Lists",
        "URL": "http://www.youtube.com/embed/09oErCBjVns"
      }, {
        "title": "Tables",
        "URL": "http://www.youtube.com/embed/wvR40su_XBM"
      }, {
        "title": "Links",
        "URL": "http://www.youtube.com/embed/U4UHoiK6Oo4"
      },

      {
        "title": "Images",
        "URL": "http://www.youtube.com/embed/Zy4KJeVN7Gk"
      }
    ],
    "CSS": [{
      "title": "Applying Styles",
      "URL": "http://www.youtube.com/embed/Wz2klMXDqF4"
    }, {
      "title": "Selectors",
      "URL": "http://www.youtube.com/embed/6rKan6loNTw"
    }, {
      "title": "Box Model",
      "URL": "http://www.youtube.com/embed/NR4arpSA2jI"
    }, {
      "title": "Positioning",
      "URL": "http://www.youtube.com/embed/W5ycN9jBuBw"
    }],
    "JavaScript": [{
      "title": "Introduction to JavaScript",
      "URL": "http://www.youtube.com/embed/yQaAGmHNn9s"
    }, {
      "title": "Comments and Statements",
      "URL": "http://www.youtube.com/embed/yUyJ1gcaraM"
    }, {
      "title": "Variables",
      "URL": "http://www.youtube.com/embed/og4Zku5VVl0"
    }, {
      "title": "Functions",
      "URL": "http://www.youtube.com/embed/5nuqALOHN1M"
    }, {
      "title": "Conditions",
      "URL": "http://www.youtube.com/embed/5gjr15aWp24"
    }, {
      "title": "Objects",
      "URL": "http://www.youtube.com/embed/mgwiCUpuCxA"
    }, {
      "title": "Arrays",
      "URL": "http://www.youtube.com/embed/nEvBcwlpkBQ"
    }],
    "Jquery": [{
      "title": "Introduction",
      "URL": "http://www.youtube.com/embed/hMxGhHNOkCU"
    }, {
      "title": "Event Binding",
      "URL": "http://www.youtube.com/embed/G-POtu9J-m4"
    }, {
      "title": "DOM Accessing",
      "URL": "http://www.youtube.com/embed/LYKRkHSLE2E"
    }, {
      "title": "Image Slider",
      "URL": "http://www.youtube.com/embed/KkzVFB3Ba_o"
    }]
  }
};

var out = "<table>";

for (var i = 0; i < json.video["HTML"].length; i++) {
  out += "<tr><td>" +
    json.video["HTML"][i].title +
    "</td><td>" +
    json.video["HTML"][i].URL +
    "</td></tr>";
}

out += "</table>";
document.body.innerHTML = out;

＆＃13;

Answer 2

这个

video[HTML][i].title

应该是

video.html[i].title

如何从html页面中的json文件中读取？

2 个答案: