>source

내 html 파일에서 assoc 배열을 반복하면 모든 assoc 배열이 아닌 첫 번째 값 만 반환하지만 console.log에서 볼 때 올바르게 작동하지만 HTML로 인쇄 할 때 궁금합니다.오류 없음그러나 모든 데이터가 반복되는 것은 아닙니다.
인쇄를 처리하는 방법을 사용하여 배열과 관련된 모든 데이터를 HTML로 완전히 LOOP자바 스크립트.

<!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 버전이 필요합니다. 도와 주셔서 미리 감사드립니다 ..

  • 답변 # 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("");
    
    

  • 답변 # 2

    여기에서 innerHTML을 새 텍스트로 업데이트 할 때마다

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

    다음을 수행 할 수 있습니다.

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

관련 자료

  • 이전 scala - 정규식을 사용한 웹 로그 데이터 추출
  • 다음 node.js - 단일 쿠키 키에 여러 값을 저장하는 방법