Я пытаюсь преобразовать этот файл json в объект javascript, а затем отобразить его в формате таблицы (не беспокойтесь о том, как выглядит таблица в данный момент, я исправлю это, как только это будет решено). ) Я не вижу, что я сделал неправильно, чтобы не иметь возможности извлекать объекты json, так как они печатаются в консоли при запуске программы. Существует синтаксическая ошибка для двух обратных вызовов к обработчику состояний, но затем в следующих двух обратных вызовах печатаются объекты json, не совсем понятно, почему. Любая помощь будет оценена, спасибо заранее.
Question2.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>
Question2.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"
}
]
}
}