Как перейти к следующему и предыдущему объекту в массиве JSON, возвращенном json_encode с jQuery?

70
5

В настоящее время я пытаюсь загрузить некоторые данные изображения JSON из файла PHP с помощью AJAX и с циклом jQuery по результатам щелчка следующей/предыдущей кнопки. Я могу успешно загрузить данные, когда я указываю указанный индекс (data.record [0].image;), но я хочу, чтобы он загружал первый индекс и ничего больше и перешел к следующей паре JSON.object.image key/value ON CLICK, но я не могу заставить следующие предыдущие кнопки работать. Вот что у меня до сих пор..

PHP:

    include('./connection.php');
$query = "SELECT artist, title, year, image, description, ID FROM voting";
$result = $mysqli->query($query);

if (!$result) die($mysqli->error);
$array = array();
while ($row = $result->fetch_object()) {
$array[] = $row;

}
echo json_encode(array('records' => $array), JSON_UNESCAPED_SLASHES);

JSON имеет следующий формат:

{"records":[
{
"artist":"At The Drive In",
"title":"Acrobatic Tenement ",
"year":"1996",
"image":"./img/atdi01.jpg",
"description":"Arguably the the pioneering album of post-hardcore, Acrobatic Tenement is At The Drive In seminal album. ",
"ID":"1"
}
]

Файл script.js:

      $("#get-data").click(function(){ //load JSON data...
$.getJSON("api.php", //gets a JSON data from api.php
function(data){ //callback function if request succeeds

$.each(data.records, function(i,record){
var current = 0;
var img = $("<img/>").attr({
id: "album_image",
class: "album",
src: data.records[i].image,
});
$("#content").html(img);
$("#next-bt").click(function(){
current + 1;
return false;
});
$("#prev-bt").click(function(){
current - 1;
return false;
});

});
}); //end of callback function and end of .getJSON statement
}); //end of button.click function

Пожалуйста помоги! Я собираюсь вытащить волосы.

спросил(а) 2018-02-25T01:21:00+03:00 2 года, 7 месяцев назад
1
Решение
90

Ваша петля не нужна. В вашем обработчике Ajax переместите данные в глобальную переменную данных. Затем вызовите render(). Попробуйте что-то вроде этого:

var records;
var current = 0;

$("#next-bt").click(next);
$("#prev-bt").click(prev);

$("#get-data").click(function(){ //load JSON data...
$.getJSON("api.php", //gets a JSON data from api.php
function(data){ //callback function if request succeeds
var records = data.records;
render();
}); //end of callback function and end of .getJSON statement
});
function render(){
var img = $("<img/>").attr({
id: "album_image",
class: "album",
src: records[current].image,
});
$("#content").html(img);
}
function next(){
current++;
render();
}
function prev(){
current--;
render();
}

Отказ: в этом коде должна быть проверка ошибок, чтобы мы не могли пройти мимо границ массива.

ответил(а) 2018-02-25T02:26:00+03:00 2 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема