[英]having trouble with my JavaScript for loop
I am attempting to loop through my returned JSON array and display the values in a table. 我试图循环我返回的JSON数组并在表中显示值。 My array contains multiple objects with multiple values, so each object would = a new row and each value would = a new cell.
我的数组包含多个具有多个值的对象,因此每个对象将=一个新行,每个值将=一个新单元格。
Here's one version I have tried: 这是我试过的一个版本:
function refreshUrlArray(urlsRetrieved) {
$('#response').html('Attempting to update your URLs, please wait...');
var urlsObj = urlsRetrieved;
console.log("JSON results returned from DB query: " + urlsObj);
//Create object holding table
$table = "<table id='urlTable'><td>Name</td><td>Release Time</td><td>Release Date</td><td>Category</td><td>Genre</td><td>URL</td>";
//debugging (loop count)
var c = 0;
for (var key in urlsObj) {
if (urlsObj.hasOwnProperty(key)) {
var val = urlsObj[key];
$table += "<tr>";
$table + "<td>" + val.name; + "</td>";
$table + "<td>" + val.releaseTime; + "</td>";
$table + "<td>" + val.releaseDate; + "</td>";
$table + "<td>" + val.category; + "</td>";
$table + "<td>" + val.genre; + "</td>";
$table + "<td>" + val.url; + "</td>";
$table += "</tr>";
//debugging (loop count)
c++;
console.log("Count: " + c);
}
}
$('#response').html('Attempting to display your URLs, please wait...');
$('#content01').append($table);
};
I also tried the following: 我也尝试过以下方法:
function refreshUrlArray(urlsRetrieved) {
$('#response').html('Attempting to update your URLs, please wait...');
var urlsObj = urlsRetrieved;
console.log("JSON results returned from DB query: " + urlsObj);
//Create object holding table
$table = "<table id='urlTable'><td>Name</td><td>Release Time</td><td>Release Date</td><td>Category</td><td>Genre</td><td>URL</td>";
//debugging (loop count)
var c = 0;
for (var i = 0; i < urlsObj.length; i++) {
$table += "<tr>";
$table + "<td>" + urlsObj[i].name; + "</td>";
$table + "<td>" + urlsObj[i].releaseTime; + "</td>";
$table + "<td>" + urlsObj[i].releaseDate; + "</td>";
$table + "<td>" + urlsObj[i].category; + "</td>";
$table + "<td>" + urlsObj[i].genre; + "</td>";
$table + "<td>" + urlsObj[i].url; + "</td>";
$table += "</tr>";
//debugging (loop count)
c++;
console.log("Count: " + c);
}
$('#response').html('Attempting to display your URLs, please wait...');
$('#content01').append($table);
};
Both versions are returning the same results. 两个版本都返回相同的结果。 I get the table headers, and I get a bunch of empty rows in my table.
我得到了表头,我在表中得到了一堆空行。 The debugging count I added in the loop hits 405 before it stops.
我在循环中添加的调试计数在停止之前命中405。 As far as I can guess, I think the loop is looping through one time for every individual character of my JSON results
据我所知,我认为循环对于我的JSON结果的每个字符循环一次
Any ideas on what I am not doing correctly? 关于我做得不对的任何想法? Thanks.
谢谢。
JSON Response (has been tested an IS correctly formatted JSON): JSON响应(已经过测试,IS格式正确的JSON):
[{"userId":4,"name":"Doctor Who","releaseTime":"2015-11-22 12:45:24","releaseDate":"Monday","category":"Television","genre":"Action","url":"http:\/\/www.netflix.com\/browse?jbv=70142441&jbp=0&jbr=1"},{"userId":4,"name":"Game Of Thrones","releaseTime":"2015-11-22 13:34:06","releaseDate":"Tuesday","category":"Television","genre":"Drama","url":"http:\/\/www.tvmuse.com\/tv-shows\/Game-of-Thrones_25243\/"}]
Your problem is with JSON parsing. 您的问题是使用JSON解析。
First do this: This will convert your JSON string object to Javascript Objects, in which you can loop through. 首先执行此操作:这会将您的JSON字符串对象转换为Javascript对象,您可以在其中循环。
var items = JSON.parse('[{"userId":4,"name":"Doctor Who","releaseTime":"2015-11-22 12:45:24","releaseDate":"Monday","category":"Television","genre":"Action","url":"http:\/\/www.netflix.com\/browse?jbv=70142441&jbp=0&jbr=1"},{"userId":4,"name":"Game Of Thrones","releaseTime":"2015-11-22 13:34:06","releaseDate":"Tuesday","category":"Television","genre":"Drama","url":"http:\/\/www.tvmuse.com\/tv-shows\/Game-of-Thrones_25243\/"}]');
Then, do this 然后,这样做
for(i=0; i<items.length; i++){
console.log(items[i].url);
console.log(items[i].name); //etc
}
Change your script to: 将您的脚本更改为:
function refreshUrlArray(urlsRetrieved) {
$('#response').html('Attempting to update your URLs, please wait...');
var urlsObj = urlsRetrieved;
var details = JSON.parse(urlsObj);
//console.log(details.length);
table = "<table id='urlTable'><td>Name</td><td>Release Time</td><td>Release Date</td><td>Category</td><td>Genre</td><td>URL</td>";
for(var i = 0; i < details.length; i++){
records = details[i];
//Create object holding table
table += "<tr>";
table += "<td>" + records.name; + "</td>";
table += "<td>" + records.releaseTime; + "</td>";
table += "<td>" + records.releaseDate; + "</td>";
table += "<td>" + records.category; + "</td>";
table += "<td>" + records.genre; + "</td>";
table += "<td>" + records.url; + "</td>";
table += "</tr>";
}
table += "</table>";
$('#response').html('Attempting to display your URLs, please wait...');
$('#content01').html(table);
}
You need to parse the JSON string. 您需要解析JSON字符串。 After parsing the JSON with JSON.parse as below,
用JSON.parse解析JSON后,如下所示,
var items = JSON.parse(json_response);
You are adding the strings but not assigning them to the $table
. 您正在添加字符串但不将它们分配给
$table
。
Replace lines inside the loop as below 如下所示替换循环内的行
$table += "<td>" + urlsObj[i].name; + "</td>";
$table += "<td>" + urlsObj[i].releaseTime; + "</td>";
$table += "<td>" + urlsObj[i].releaseDate; + "</td>";
$table += "<td>" + urlsObj[i].category; + "</td>";
$table += "<td>" + urlsObj[i].genre; + "</td>";
$table += "<td>" + urlsObj[i].url; + "</td>";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.