时间戳

首页 > 解决方案 > 使用 JavaScript 到 HTML (JSON) 的数组的循环关联

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

问题描述

我想知道当我在我的 html 文件中循环 assoc 数组时只返回第一个值而不是所有 assoc 数组，但是当我在 console.log 中查看它时它工作正常但是当我用 HTML 打印它时没有错误但并非所有数据都会循环。
如何使用 javaScript 完全循环打印从数组关联到 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

我需要用于在 HTML 中循环数据的 javaScript 版本提前感谢您帮助我..

标签： javascripthtmljqueryarraysassociative-array

解决方案

只是为了寻求信息。最好不要多次更新内部 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("");

推荐阅读