0

I have fetched values From my MySQL Database and stored it in JSON Format. Now What I am trying to do is that I need to show those values on the JvectorMap. but I am not able to do it.

Here is my PHP code :

$json_data=array(); 

foreach($result as $rec)  
{  
$json_array['Country']=$rec['user_country'];  
 $json_array['CountryCode']=$rec['country_code']; 
$json_array['persons']=$rec['usercountry']; 

array_push($json_data,$json_array);  
}  echo json_encode($json_data) ;

The JSON That I am recieving is :

[
  {"Country":"Australia","CountryCode":"AU","persons":"5"}, 
  {"Country":"Spain","CountryCode":"ES","persons":"2"}, 
  {"Country":"India","CountryCode":"IN","persons":"8"}, 
  {"Country":"Mexico","CountryCode":"MX","persons":"4"},
  {"Country":"United States","CountryCode":"US","persons":"4"}
]

The Script that I am using is :

<script type="text/javascript">
var dataC = '<?php echo $data  ; ?>' ;
var countryData = {};
$.each(dataC, function() {
countryData[this.CountryCode] = this.persons;
});

$(function() {
 $('#world-map').vectorMap({
    map: 'world_mill_en',
    series: {
        regions: [{
            values: countryData, //load the data
            scale: ['#C8EEFF', '#0071A4'],
            normalizeFunction: 'polynomial'}]
    },
    //-----------------------------------------------
    // changed to onRegionLabelShow from onLabelShow
    //-----------------------------------------------
    onRegionLabelShow: function(e, el, code) {
        //search through dataC to find the selected country by it's code
        var country =$.grep(dataC, function(obj, index) {
            return obj.CountryCode == code;
        })[0]; //snag the first one
        //only if selected country was found in dataC
        if (country != undefined) { 
           el.html(el.html() + 
                "<br/><b>Code: </b>" +country.CountryCode + 
                "<br/><b>Name: </b>" + country.Country + 
                "<br/><b>persons: </b>" + country.persons);
        }
    }
});
});​
</script>

But I am getting the error :

" jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"Country":"Australia","CountryCode":"AU","persons":"5"},{"Country":"Spain","CountryCode":"ES","persons":"2"},{"Country":"India","CountryCode":"IN","persons":"8"},{"Country":"Mexico","CountryCode":"MX","persons":"4"},{"Country":"United States","CountryCode":"US","persons":"4"}] "

4
  • there've been no characters. this code is really bothering me now. is there any other method ? Commented Mar 25, 2019 at 6:42
  • As a matter of fact , there was a space in my Code. thanks for mentioning that. I removed the spaces but the main problem now I am facing is that how can I fetch the values in dataC object from php myql data Commented Mar 25, 2019 at 7:20
  • I have updated the questions with the current Error : please have a look. @JaromandaX Commented Mar 25, 2019 at 7:31
  • Please have a look into the issue @JaromandaX Commented Mar 25, 2019 at 10:49

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.