我有一个包含抽认卡的数据库，其中包含以下字段:
cartid, front, back
我想从它们中检索数据并将它们推送到带有对象的 JavaScript 数组中。
有两个对象:脸部和背面；
例如，我在数据库中有两条记录:
| carid | front | back |
|:-----------|------------: |:------------:|
| 1 | face1 | back1 |
| 2 | face2 | back2 |
这是我尝试过的:
代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="caro.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="carousel">
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
<br>
<?php
include 'connection.php';
$stmt = $db->prepare("SELECT * FROM `cards`");
$stmt->bind_result($cartid, $front, $back);
$stmt->execute();
while ($stmt->fetch()) {
?>
<script>
let cards = []; //Array to store the front and the back of the flashcards
cards.push({
front: "<?php echo $front; ?>",
back: "<?php echo $back; ?>"
});
//flash carousel
let currentCard = 1,
carousel = document.querySelector(".carousel"),
next = document.querySelector(".next"),
prev = document.querySelector(".prev");
renderCards();
function renderCards() {
carousel.style.width = `${cards.length}00vw`;
cards.map(el => {
let div = document.createElement("div");
div.classList.add("card");
let front = document.createElement("div");
front.classList.add("front");
let back = document.createElement("div");
back.classList.add("back");
front.textContent = el.front;
back.textContent = el.back;
div.appendChild(front);
div.appendChild(back);
div.addEventListener("click", function (e) {
e.srcElement.parentNode.classList.toggle("active");
});
carousel.appendChild(div);
});
}
next.addEventListener("click", function (e) {
if (currentCard >= cards.length) {
return;
}
currentCard++;
cardFly();
});
prev.addEventListener("click", function (e) {
if (currentCard - 1 <= 0) {
return;
}
currentCard--;
cardFly();
});
function cardFly() {
carousel.style.transform = `translateX(-${currentCard - 1}00vw)`;
}
</script>
<?php
} //closing while loop
?>
</body>
</html>
问题是它只打印表格第一行的数据。 (正面1和背面1)。
编辑: 再次尝试 json_econde
$stmt = $db->prepare("
SELECT * FROM `cards`" );
$stmt->bind_result($cartid, $front, $back);
$stmt->execute();
$result_array = Array();
$result_array2 = Array();
while ($stmt->fetch()) {
$result_array[] = $front;
$result_array2[] = $back;
}
$json_array = json_encode($result_array);
$json_array2 = json_encode($result_array2);
那么如何将每个数据行推送到 javascript 数组呢？最终填充的数组应如下所示: pic
最佳答案
您想要使用结果创建一个数组，然后使用 json_encode 将数据采用 JavaScript 可以轻松使用的格式。
$cards = array();
while ($stmt->fetch()) {
$cards[] = array('front' => $front, 'back' => $back);
}
--
let cards = <?php json_encode($cards); ?>;
编辑
要将正面和背面放入各自的对象中，则需要创建两个数组，然后合并它们
$frontArr = array();
$backArr = array();
while($stmt->fetch()) {
$frontArr[] = $front;
$backArr[] = $back;
}
$cards = array($frontArr, $backArr);
关于javascript - 从 mysql 查询推送 javascript 数组对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57257379/