Цикл, связанный с массивом, с использованием JavaScript в HTML (JSON)
Мне интересно, когда я зацикливаю массив assoc в моем html-файле, возвращаю только первое значение, а не весь массив assoc, но когда я просматриваю его в console.info, он работает правильно, но когда я печатаю его в HTML, никаких ошибок, но не все данные будут зацикливаться.
Как обработать печать полностью LOOP всех данных из связанного массива в html с помощью javaScript.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>JavaScript - read JSON from URL</title>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p id = "mypanel"></p>
<script>
var dataRequest = [
{
"place": "Visaya",
"countryCode": "PH",
"region": "Calabarzon",
"latitude": "14.5666700",
"longitude": "121.0333300",
"distanceMiles": 0.37,
"distanceKilometers": 0.59,
"directionAngle": 27.84,
"directionHeading": "NNE"
},
{
"place": "Tejeros",
"countryCode": "PH",
"region": "Calabarzon",
"latitude": "14.5666700",
"longitude": "121.0333300",
"distanceMiles": 0.37,
"distanceKilometers": 0.59,
"directionAngle": 27.84,
"directionHeading": "NNE"
},
{
"place": "Bancal",
"countryCode": "PH",
"region": "Calabarzon",
"latitude": "14.5666700",
"longitude": "121.0333300",
"distanceMiles": 0.37,
"distanceKilometers": 0.59,
"directionAngle": 27.84,
"directionHeading": "NNE"
}
];
dataRequest.forEach(function(value, index) {
var text = ` Place : ${value.place} <br />
val1 : ${value.countryCode} <br />
val2 : ${value.region} <br />
val3 : ${value.latitude} <br />
val4 : ${value.longitude} <br />
val5 : ${value.distanceMiles} <br />
val6 : ${value.distanceKilometers} <br />
val7 : ${value.directionAngle} <br />
val8 : ${value.directionHeading} <br />`;
// place to my HTML but not looping all data why??
document.getElementById("mypanel").innerHTML = text;
// with console all dataRequest will loop
console.info(text);
});
</body>
</html>
Вот изображение, полученное для этого скрипта:
Результат: https://www.screencast.com/t/1F7zyUcxkd
Ожидается: https://www.screencast.com/t/1F7zyUcxkd
Мне нужна версия javaScript для зацикливания данных в HTML Заранее спасибо за помощь..
}); </скрипт> </тело> </html>
@Barmar, не могли бы вы дать мне более подробную информацию и понять, что именно вы имеете в виду, я еще не очень хорошо разбираюсь в javaScript. Спасибо
Кто-то уже ответил.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Потому что каждый раз, когда вы обновляете innerHTML новым текстом здесь,
document.getElementById("mypanel").innerHTML = text;
Вы можете сделать следующее,
document.getElementById("mypanel").innerHTML += text;
Если это решит вашу проблему, отметьте это как свой ответ. @RennielFernandez
просто для поиска информации. Будет лучше не обновлять внутренний HTML столько раз. вы можете сделать это вместо этого.
document.getElementById("mypanel").innerHTML = dataRequest.map(value => {
return ` Place : ${value.place} <br />
val1 : ${value.countryCode} <br />
val2 : ${value.region} <br />
val3 : ${value.latitude} <br />
val4 : ${value.longitude} <br />
val5 : ${value.distanceMiles} <br />
val6 : ${value.distanceKilometers} <br />
val7 : ${value.directionAngle} <br />
val8 : ${value.directionHeading} <br />`;
}).join("");
Спасибо, сэр. @Д. Seah, отлично, не повторяйте html много раз идеально! Большое спасибо..
Здравствуйте, сэр @D. Шон... Как я могу сделать поле ввода уникальным, используя функцию ниже inter 0 <= 5 или всегда... ЧАСТЬ 1 document.getElementById("mypanel").innerHTML = dataRequest.map(value => { var text = " "; var i; for (i = 0; i < 5; i++) { return ` <div class = "form-group"> <input type = "text" id = "gpsPlace_nb" name = "gpsPlaceNb-${i }" value = "${value.geoplugin_place}" class = "form-control"> </div>
... ЧАСТЬ 2 <div class = "form-group"> <input type = "text" id = "gpsCountryCode_nb" name = "gpsCountryCodeNb-${i}" value = "${value.geoplugin_countryCode}" class = " форма-контроль"> </div> `; } }).присоединиться("");
трудно понять ваши вопросы. Не могли бы вы опубликовать новый вопрос? Спасибо
Вы перезаписываете один и тот же элемент каждый раз в цикле. Вы увидите только окончательное значение. Если вы хотите увидеть их все, вам следует объединить их, а не перезаписывать.