使用 JavaScript 到 HTML (JSON) 循环关联数组

Question

我想知道什么时候在我的 html 文件 return 中循环 assoc 数组只有第一个值而不是所有 assoc 数组，但是当我在 console.log 中查看它时它工作正常但是当我在 HTML 中打印它时没有错误 但并非所有数据都会循环。
如何处理打印完全使用 javaScript.[=16=将数组关联的所有数据循环到html ]

<!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 中的数据在此先感谢您帮助我..

Answer 1

因为每次您在此处使用新文本更新 innerHTML，

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

您可以执行以下操作，

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

Answer 2

仅供参考。最好不要多次更新内部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("");

使用 JavaScript 到 HTML (JSON) 循环关联数组

Loop associated of array using JavaScript to HTML (JSON)

html

javascript

arrays

jquery

associative-array