Я пытаюсь вызвать данные из API и включить их на свою HTML-страницу. Данные возвращаются в формате JSON, однако я пытаюсь добавить их в элемент списка на странице, но, похоже, он не хочет сотрудничать.
function getGames() {
$query = "SELECT * FROM games ORDER BY name";
try {
global $db;
$games = $db->query($query);
$games = $games->fetchAll(PDO::FETCH_ASSOC);
echo '{"game": ' .json_encode($games) .'}';
} catch (Exception $ex) {
echo '{"error": {"text":' .$ex->getMessage() .'}}';
}
}
Выше мой вызов API.
Ниже приведены мои методы вставки данных на страницу:
// root URL for restful web services
var rootURL ="http://localhost/GameReviewWebsite/api/games";
//when thr DOM is ready
$(document).ready(function(){
findAll();
// findById();
});
var findAll=function(){
console.log('findAll');
$.ajax({
type: 'GET',
url: rootURL,
dataType: 'json', // data type of response
success: renderList
});
};
function renderList(data){
list = data.games;
$('#gameList li').remove();
$.each(list, function(index, game){
$('#gameList').append('<li><a href="#" id="' +game.id+'">'+game.name+'</a></li>');
});
}
И вот данные, которые я получаю:
{"game": [
{"id":"2","name":"FIFA 19","developer":"EA Sport","genre":"Sports","review":"2","description":"A game based on real world soccer teams and tournaments."},
{"id":"1","name":"Rocket League","developer":"Psyonix","genre":"Sports","review":"4","description":"A soccer-like game where players driver rocket propelled cars around an arena."},
{"id":"4","name":"SCUM","developer":"Gamepires","genre":"Survival","review":"5","description":"A game where the user plays a human that must survive in a future dominated by robots."},
{"id":"6","name":"Trials Fusions","developer":"RedLynx","genre":"Sports","review":"1","description":"A game where players take control of a skilled motocross rider that tries to navigate through a course filled with obstacles"}
]}
2 ответа
Неправильные имена переменных,
list = data.games;
Должно быть
list = data.game;
Так как игра - это имя игрового массива
{"game": [
{"id":"2","name":"FIFA 19","developer":"EA Sport","genre":"Sports","review":"2","description":"A game based on real world soccer teams and tournaments."},
{"id":"1","name":"Rocket League","developer":"Psyonix","genre":"Sports","review":"4","description":"A soccer-like game where players driver rocket propelled cars around an arena."},
{"id":"4","name":"SCUM","developer":"Gamepires","genre":"Survival","review":"5","description":"A game where the user plays a human that must survive in a future dominated by robots."},
{"id":"6","name":"Trials Fusions","developer":"RedLynx","genre":"Sports","review":"1","description":"A game where players take control of a skilled motocross rider that tries to navigate through a course filled with obstacles"}
]}
function renderList(data){
list = data.game;
$('#gameList li').remove();
$.each(list, function(index, game){
$('#gameList').append('<li><a href="#" id="' +game.id+'">'+game.name+'</a></li>');
});
}
У вас есть опечатка в назначении переменной списка, это должно быть list = data.game
, а не list = data.games
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.