how to edit javascript Objects with loop (Jvectormap)

Question

I'm new to Javascript objects and Jquery and I have no clue how I do something like this:

 series: {
                        regions: [{
                            values: {
                                for(i = 0; i < 10; i++){
                                    [countryname[i]] : countrycolor[i]
                                 }
                                [countrynames] : countrycolor,
                            }
                        }]
                    }

How do I make the for loop basically print out the country names and countrycolors that I have in an array.

Im using jvectormap and the full code which im using right now for the map is:

            var countrynames = "<?php if (isset($countryname)) {echo $countryname;}; ?>";
            var countrycolor = "<?php if (isset($countrycolor)) {echo $countrycolor;}; ?>";
            $('#world-map').vectorMap({
                map: 'world_mill',

                onRegionClick: function (event, code) {
                    window.location.href = "country.php?id=" + code;
                },


                series: {
                    regions: [{
                        values: {
                            [countrynames] : countrycolor,
                        }
                    }]
                }
            });

Answer 1

You could use reduce[1] function to achive what you want on plain javascript

{
  values: countrynames.reduce(function(result, country, index) {
    result[country] = countrycolor[index];
    return result;
  }, {});
}

[1] - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce