Проблемы с отображением массива PHP с помощью jquery
У меня возникают проблемы с отображением содержимого из массива (который может содержать от 0 до 3 элементов) в html с помощью jquery. Все это находится в одном файле php.
<?php
... other code
$watchlistArray = array();
while ($row = mysqli_fetch_assoc($result)) {
$watchlistArray[] = $row;
}
?>
Массив будет содержать от 0 до 3 элементов. Примеры результатов, полученных с использованием
<?php echo json_encode($watchlistArray)?>
2 результат
[{"prod_id":"41","prod_name":"An old desk","prod_highest_price":"69.30","prod_picture":"2.jpg","prod_end_date":"2018-04-05 20:40:00"},{"prod_id":"58","prod_name":"A brand new Iphone 8!","prod_highest_price":"795.00","prod_picture":"1.jpg","prod_end_date":"2018-09-24 20:40:00"}]
3. Результаты
[{"prod_id":"42","prod_name":"A new sofa","prod_highest_price":"153.00","prod_picture":"3.jpg","prod_end_date":"2018-04-06 20:40:00"},{"prod_id":"41","prod_name":"An old desk","prod_highest_price":"69.30","prod_picture":"2.jpg","prod_end_date":"2018-04-05 20:40:00"},{"prod_id":"40","prod_name":"An old chair","prod_highest_price":null,"prod_picture":"2.jpg","prod_end_date":"2018-04-12 20:40:00"}]
Теперь для отображения этого с помощью jquery и html.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
size = <?php echo sizeof($watchlistArray);?>;
if (size === 0) {
$('#watchlist0').html('No one has bidded on this item!');
}
if (size >= 1) {
$('#watchlist0').html(' <a href = "../product/productPage.php?prod_ID=<?php echo $watchlistArray[0]["prod_id"]; ?>">\n' +
' <img src = "../Browse/Images/<?php echo $watchlistArray[0]["prod_picture"] ?>"\n' +
' class = "img-rounded img-responsive">\n' +
' </a>\n' +
' <h4><?php echo $watchlistArray[0]["prod_name"] ?></h4>\n' +
' Current price: <strong><?php echo $watchlistArray[0]["prod_highest_price"] ?></strong>');
}
if (size >= 2) {
$('#watchlist1').html(' <a href = "../product/productPage.php?prod_ID=<?php echo $watchlistArray[1]["prod_id"]; ?>">\n' +
' <img src = "../Browse/Images/<?php echo $watchlistArray[1]["prod_picture"] ?>"\n' +
' class = "img-rounded img-responsive">\n' +
' </a>\n' +
' <h4><?php echo $watchlistArray[1]["prod_name"] ?></h4>\n' +
' Current price: <strong><?php echo $watchlistArray[1]["prod_highest_price"] ?></strong>');
}
if (size >= 3) {
alert ("case 3")
$('#watchlist2').html(' <a href = "../product/productPage.php?prod_ID=<?php echo $watchlistArray[2]["prod_id"]; ?>">\n' +
' <img src = "../Browse/Images/<?php echo $watchlistArray[2]["prod_picture"] ?>"\n' +
' class = "img-rounded img-responsive">\n' +
' </a>\n' +
' <h4><?php echo $watchlistArray[2]["prod_name"] ?></h4>\n' +
' Current price: <strong><?php echo $watchlistArray[2]["prod_highest_price"] ?></strong>');
}
})
</script>
<body>
<div class = "container">
<div class = "row">
<div class = "col-sm-4" align = "center" id = "watchlist0">
</div>
<div class = "col-sm-4" align = "center" id = "watchlist1">
</div>
<div class = "col-sm-4" align = "center" id = "watchlist2">
</div>
</div>
</div>
</body>
</html>
Я пробовал это разными способами (используя оператор switch, цикл и т. д.), Но всегда сталкиваюсь с одной и той же проблемой. Информация отображается только тогда, когда в массиве 3 элемента. Если я возьму код, который запускается, когда size> = 3, я получу 2 изображения и другую информацию, отображаемую, когда есть как 3, так и 2 элемента. Это действительно странно, и я пытался часами - пожалуйста, помогите отстающему ученику.
ОБНОВИТЬ
Спасибо всем за предложения. Поскольку вывод статичен, я реализовал это в php, используя оператор switch с эхом html.
<?php
$arrSize = sizeof($watchlistArray);
switch ($arrSize) {
case 0:
echo "case 0 HTML";
break;
case 1:
echo 'case 1 HTML';
break;
case 2:
echo 'case 3 HTML';
break;
case 3:
echo 'case 3 HTML';
}
?>
Возможно, это не самый эффективный способ сделать это (поскольку каждое эхо относится к одним и тем же элементам HTML), но он работает!
Я бы рекомендовал вам просмотреть исходный код, который браузер получает, создаваемый файлом php. Вы даже можете обновить свой вопрос, указав его выше.
@jeroen Я сделал это так, и это хорошо сработало. Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
ваши условия совпадают ..
if (size>=2)
а также
if (size>=3)
оба будут вызываться, когда есть 3 элемента .. попробуйте заменить их на
if (size==2)
...........
if (size>=3)
Я не думаю, что это проблема, поскольку (size == 0) тоже не работает. Например: <? Php echo json_encode ($ watchlistArray)?> Возвращает []. size == 0 не работает.
ваше условие проверяет размер if (size === 0), который проверяет, равно ли значение 0 и является ли размер целым числом ... попробуйте if (size == 0) или if size === "0"
как вы должны заметить, даже если условия перекрываются, результат будет правильным, потому что индексы жестко запрограммированы. обратите внимание, как код в if (size> = 1) вызывает ключ [1] массива?
Даже если вы решили проблему - как я только что увидел, я отправлю свой ответ. Может быть, это поможет вам в дальнейшем. Я не уверен на 100%, чего вы пытались достичь в этих условиях, но я предположил, что вы хотите отобразить div col-sm-4 для каждого продукта, найденного в $watchlistArray.
Действительно, js не требуется, если только вы не выполняете запрос ajax для получения данных из базы данных. Обратите внимание, что в своем коде я изменил имя переменной $watchlistArray на $products, потому что он мне больше подходит. В принципе, код считывает все продукты в списке продуктов и отображает их в ячейках col-sm-4. Если количество продуктов в списке продуктов превышает максимальное количество продуктов, отображаемых в строке (3 в вашем случае), то создается новая строка. Вы можете запустить код как есть.
Примечание: старайтесь избегать использования php-конструкций внутри js-кода. Вместо этого значения переменных php могут быть переданы в качестве аргументов js-функциям, которые могут вызываться для атрибутов событий (onclick, onload и т. д.) Элементов html.
<?php
// This is just a hard-coded list. Build it as you wish (with db data for example).
$products = [
[
'prod_id' => '42',
'prod_name' => 'A new sofa',
'prod_highest_price' => '153.00',
'prod_picture' => '3.jpg',
'prod_end_date' => '2018-04-06 20:40:00'
],
[
'prod_id' => '41',
'prod_name' => 'An old desk',
'prod_highest_price' => '69.30',
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-05 20:40:00'
],
[
'prod_id' => '40',
'prod_name' => 'An old chair',
'prod_highest_price' => null,
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-12 20:40:00'
],
[
'prod_id' => '57',
'prod_name' => 'An interesting book',
'prod_highest_price' => '18.86',
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-21 15:18:23'
],
[
'prod_id' => '58',
'prod_name' => 'A big apple',
'prod_highest_price' => '12.19',
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-23 03:09:55'
],
];
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset = "UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo</title>
<!-- CSS resources -->
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type = "text/css" rel = "stylesheet" />
<!-- JS resources -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type = "text/javascript"></script>
<style type = "text/css">
.row {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.product {
text-align: center;
}
</style>
<body>
<div class = "container">
<?php
if (isset($products) && $products) {
$numberOfProductsPerRow = 3; /* How many products should be allowed in a row? */
$numberOfDisplayedProductsPerRow = 0; /* How many products are already displayed in a row? */
foreach ($products as $key => $product) {
$productId = $product['prod_id'];
$productPicture = $product['prod_picture'];
$productName = $product['prod_name'];
$productHighestPrice = $product['prod_highest_price'];
if ($numberOfDisplayedProductsPerRow % $numberOfProductsPerRow === 0) {
?>
<div class = "row">
<?php
}
?>
<div class = "col-sm-4 product" id = "product<?php echo $key; ?>">
<a href = "../product/productPage.php?prod_ID=<?php echo $productId; ?>">
<img src = "../Browse/Images/<?php echo $productPicture; ?>" class = "img-rounded img-responsive" alt = "<?php echo $productName; ?>">
</a>
<h4>
<?php echo $productName; ?>
</h4>
<div>
Current price: <span class = "highest-price"><?php echo $productHighestPrice; ?></span>
</div>
</div>
<?php
$numberOfDisplayedProductsPerRow++;
if ($numberOfDisplayedProductsPerRow === $numberOfProductsPerRow) {
$numberOfDisplayedProductsPerRow = 0;
?>
</div>
<?php
}
}
} else {
?>
<div class = "row">
<div class = "col-sm-12">
No one has bidded on this item!
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
Мне это нравится гораздо больше, чем то, как я это делал, и я тоже узнал несколько новых вещей. Спасибо!
@AakashBhalla Добро пожаловать. Я рад, что смог вам помочь и, особенно, что вы узнали что-то новое из моего ответа. Совет: вы можете применять операцию по модулю всякий раз, когда речь идет о динамическом построении строк / ячеек. Желаю удачи.
Почему вы смешиваете php и javascript, вывод кажется статическим и зависит от значения переменной php, поэтому, похоже, нет необходимости в javascript.