Я пытаюсь пройти через возвращаемый массив JSON и отображать значения в таблице. Мой массив содержит несколько объектов с несколькими значениями, поэтому каждый объект будет = новая строка, и каждое значение будет = новая ячейка.
Вот одна версия, которую я пробовал:
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);
};
Я также пробовал следующее:
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);
};
Обе версии возвращают те же результаты. Я получаю заголовки таблиц, и я получаю кучу пустых строк в таблице. Счет отладки, который я добавил в цикле, достигает 405, прежде чем он остановится. Насколько я могу догадаться, я думаю, что цикл цикл за один раз для каждого индивидуального характера моих результатов JSON
Любые идеи о том, что я делаю неправильно? Благодарю.
JSON Response (был протестирован 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\/"}]
Измените свой скрипт на:
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);
}
Ваша проблема заключается в разборе JSON.
Сначала сделайте так: это преобразует ваш строковый объект 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\/"}]');
Затем сделайте это
for(i=0; i<items.length; i++){
console.log(items[i].url);
console.log(items[i].name); //etc
}
Вам нужно проанализировать строку JSON. После разбора JSON с помощью JSON.parse, как показано ниже,
var items = JSON.parse(json_response);
Вы добавляете строки, но не присваиваете их $table
.
Замените линии внутри цикла, как показано ниже.
$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>";