Цикл, связанный с массивом с использованием JavaScript в HTML (JSON)

ProgramBox

Цикл, связанный с массивом с использованием JavaScript в HTML (JSON)

Post author:admin
Запись опубликована:27 октября, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #arrays #associative-array

#javascript #HTML #jquery ( jquery ) #массивы #ассоциативный-массив

Вопрос:

Мне интересно, когда я перебираю массив assoc в своем html-файле, возвращается только первое значение, а не весь массив assoc, но когда я просматриваю его в консоли.зарегистрируйте его работу правильно, но когда я печатаю его в HTML, ошибок нет, но не все данные будут зацикливаться.
Как обработать печать, полностью ПЕРЕМЕСТИТЕ все данные из связанного массива в 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.log(text);

});

</body>
</html>

Вот ‘изображение этого результата для этого скрипта:
Результат: https://www.screencast.com/t/1F7zyUcxkd
Ожидается: https: //www.screencast.com/t/1F7zyUcxkd

Мне нужна версия JavaScript для зацикливания данных в HTML Заранее спасибо за помощь..

1. Вы перезаписываете один и тот же элемент каждый раз через цикл. Вы увидите только конечное значение. Если вы хотите увидеть их все, вам следует объединить, а не перезаписывать.

2. }); </script> </body> </html>

3. @Barmar можете ли вы дать мне более подробную информацию и понять, что именно вы имеете в виду, я еще не совсем разбираюсь в JavaScript. Спасибо

4. Кто-то уже ответил.

Ответ №1:

просто для получения информации ищите. Будет лучше не обновлять внутренний 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("");

1. Спасибо, сэр. @D. Seah, отлично, не повторять html много раз идеально! Большое вам спасибо..

2. Здравствуйте, сэр @D. Шон … Как я могу сделать поле ввода уникальным, используя приведенную ниже функцию inter 0 <=5 или наоборот… ЧАСТЬ 1 document.getElementById(«mypanel»).innerHTML = DataRequest.map(значение => { var text = «»; var i; for (i = 0; i < 5; i ) { return ` <div class=»form-group»> <тип ввода =»текст» идентификатор =»gpsPlace_nb» имя=»gpsPlaceNb-$ {i}» значение=»${value.geoplugin_place}» класс =»элемент управления формой»> </ div>

3. … ЧАСТЬ 2 <div class=»form-group»> <тип ввода =»текст» id=»gpsCountryCode_nb» name=»gpsCountryCodeNb-${i}» value=»${value.geoplugin_countryCode}» class=»form-control»> </div> `; }}).join(«»);

4. трудно понять ваши вопросы. Не могли бы вы, пожалуйста, задать новый вопрос? Спасибо

Ответ №2:

Потому что каждый раз, когда вы обновляете innerHTML новым текстом здесь,

 document.getElementById("mypanel").innerHTML = text;

Вы можете сделать следующее,

 document.getElementById("mypanel").innerHTML  = text;