JSON для цикла через массив показывает только последнее значение
Я пытаюсь создать простой HTTP-пост-запрос, используя AXIOS. Это как Ajax-запрос для извлечения данных. Вот HTML. Он отправляет запрос на публикацию в getData.php.
<!doctype html>
<html>
<head>
<title>axios - post example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>Axios.post</h1>
<form role="form" class="form" onsubmit="return false;">
<div class="form-group">
<label for="data">Output</label>
<textarea id="data" class="form-control container" rows="5"></textarea>
</div>
<button id="post" type="button" class="btn btn-primary">POST</button>
</form>
<!--<div id="output" class=""></div>-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
(function () {
document.getElementById('post').onclick = function () {
var output = document.getElementById('data');
axios.post('getData.php')
.then(function (res) {// console.log(res.data);
output.className = 'container';
for (i = 0; i < res.data.length; i++) {
output.innerHTML = res.data[i].id + "\n" + res.data[i].name;
}
})
.catch(function (err) {
output.className = 'container text-danger';
output.innerHTML = err.message;
});
};
})();
</script>
</body>
</html>`
В getData.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password,"db_test");$sql = "SELECT * FROM user";
$result = $conn->query($sql);
$resultArray = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$resultArray[] = $row;
}
echo json_encode($resultArray);
return;
} else {
echo "0 results";
}
$conn->close();
?>
Но когда я пытаюсь выполнить цикл по массиву, он возвращает только последнюю строку. Он выбирает данные из таблицы и создает массив. Что не так с циклом for?
Решение
output.innerHTML = res.data[i].id + "\n" + res.data[i].name;
просто заменит все ранее добавленное.
output.innerHTML += res.data[i].id + "\n" + res.data[i].name;
бы исправить вашу проблему.
Другие решения
Потому что ваша перезапись output.innerHTML В течение цикла так last value только существует.
использование appendChild()
output.appendChild(res.data[i].id + "\n" + res.data[i].name);