Loop associated of array using JavaScript to HTML (JSON)

Question

I am wondering when I loop the assoc array in my html file return only first value not all assoc array, but when I view it in console.log its working correctly but when I print it in HTML no error but not all data will loop.
How to process print completely LOOP all the data from associated of array to html using 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>

Here' image that result for that script:
Result: https://www.screencast.com/t/1F7zyUcxkd
Expected: https://www.screencast.com/t/1F7zyUcxkd

I need javaScript version for looping data in HTML Thanks in advance for helping me..

You're overwriting the same element each time through the loop. You'll only see the final value. If you want to see all of them, you should concatenate rather than overwriting. — Barmar
– Barmar, Commented Dec 14, 2020 at 6:20
@Barmar can you give me more details and idea exactly what you mean, I am not really got yet in javaScript. Thanks — Renniel Fernandez
– Renniel Fernandez, Commented Dec 14, 2020 at 6:22

D. Seah · Accepted Answer · 2020-12-14 06:31:39Z

1

just for information seek. It will be better to not update the inner HTML so many times. you can do this instead.

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("");

answered Dec 14, 2020 at 6:31

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Renniel Fernandez Over a year ago

Thanks Sir. @D. Seah, great, no repeat html many times perfect! Thank you very much..

Renniel Fernandez Over a year ago

Hello Sir @D. Sean ... How can I make input field unique using the function below inter 0 <=5 or anways ... PART 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>

Renniel Fernandez Over a year ago

... PART 2 <div class="form-group"> <input type="text" id="gpsCountryCode_nb" name="gpsCountryCodeNb-${i}" value="${value.geoplugin_countryCode}" class="form-control"> </div> `; } }).join("");

D. Seah Over a year ago

it is hard to understand your questions. Can you please post a new question? thanks

Md Sabbir Alam · Accepted Answer · 2020-12-14 06:22:12Z

1

Because everytime you are updating the innerHTML with the new text here,

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

You can do the following,

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

answered Dec 14, 2020 at 6:22

Md Sabbir Alam

5,0643 gold badges19 silver badges31 bronze badges

1 Comment

Md Sabbir Alam Over a year ago

If that solves your problem please mark this as your answer. @RennielFernandez

Collectives™ on Stack Overflow

Loop associated of array using JavaScript to HTML (JSON)

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related