Iterating arrays events & listeners javascript

Question

I am trying to iterate a simple array using event and listeners , but when I try to see the content on html with property inner I receive a large sequence of numbers ... I think I don't know how to render this information.

The HTML

<body onload="exampleFunctions()">
    <div id="cargarMenu"><ul>
  <li><a href="spain.html">España</a></li>
  <li><a href="france.html">Francia</a></li>
  <li><a href="countries.html">Países por region</a></li>
</ul>
</div>
    <div id="cargarInfo"><div id="nombre"></div>
<div id="capital"></div></div>
    <div id="wrapper">FOO! 012345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152</div>

My Listener has the following content

<script>
var wrapper = document.getElementById('wrapper');
 window.addEventListener("infoCountries",function(e){
    totalnames = e.detail.totalNames;
    for(var i=0;i<totalnames;i++){
         wrapper.innerHTML +=i;
    };
  })
</script>
</body>

And my event , I think is correctly created

$(document).ready(function() {
    $.ajax({
        url: "https://restcountries.eu/rest/v2/region/europe"
    }).then(function(data) {
        var names = new Array();
        var capital= new Array();
        var borders = new Array();
        var subregion = new Array();
        for(var i=0;i<data.length;i++){ 
            names.push(data[i].name);
            capital.push(data[i].capital);
            for(var j=0;j<data[i].borders.length;j++){
                borders.push(data[i].borders[j]);   
            }
            subregion.push(data[i].subregion);  
        }
        var evt = new CustomEvent("infoCountries",{
          detail:{
                nm:names,
                totalNames:names.length,
                capital: capitales,
                borders: borders,
                subregion:subregion
            }
        });
        window.dispatchEvent(evt);
    });
});

Could anyone help to me?

wrapper.innerHTML +=i concatenates the value of i to the inner HTML. i is a number, so you get a bunch of numbers. — Barmar
– Barmar, Commented Jun 16, 2017 at 22:19
I sorry , but the problem is that array arrive 0123456789 (with this format) when in this case the array will be "1","2","3","4","5".. — jc1992
– jc1992, Commented Jun 16, 2017 at 22:36
i is just the numbers from 0 to totalNames-1. You're not doing anything with the array. — Barmar
– Barmar, Commented Jun 16, 2017 at 22:37

Barmar · Accepted Answer · 2017-06-16 22:40:54Z

1

You're just concatenating the numbers from 0 to totalNames-1, you're not doing anything with the names array. It should be:

 window.addEventListener("infoCountries",function(e){
    var totalnames = e.detail.totalNames;
    var names = e.detail.nm;
    for(var i=0;i<totalnames;i++){
         wrapper.innerHTML += names[i] + " ";
    };
  })

answered Jun 16, 2017 at 22:40

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

3 Comments

jc1992 Over a year ago

Thanks ! :D , You answers solve my problem ... but is the best way to itearte the listener ?

Barmar Over a year ago

It's a normal way to iterate through an array. You can also use names.forEach().

Barmar Over a year ago

There's not much point to the totalNames property in the object, since you can just use names.length to get the length of the array.

Collectives™ on Stack Overflow

Iterating arrays events & listeners javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related