Iterating arrays events & listeners javascript

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()">
    
    
FOO! 012345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

My Listener has the following content


var wrapper = document.getElementById('wrapper');
 window.addEventListener("infoCountries",function(e){
    totalnames = e.detail.totalNames;
    for(var i=0;i
</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?


Source: stackoverflow-javascript