Converting JavaScript array into JavaScript object

Question

I have the following array which is generated using for loop.

{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30}

I am using this to create a heatmap using the addon from following url: http://www.patrick-wied.at/static/heatmapjs/examples.html

I need to pass the above array as a javascript object to heatmap.js file in the following format. How can I achieve this? How can I convert my array into JavaScript object?

data: {
[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]

};

I am calling this functin

 setDataSet: function(obj, internal)

An array IS an object. typeof [] === "object" and [] instanceof Object are both true. — Niet the Dark Absol, Feb 6 '13 at 10:07
yes but when I do following it throws an error data: [heatmap_data[1]] — Sahil, Feb 6 '13 at 10:10
I need to pass those array into this function: setDataSet: function(obj, internal) — Sahil, Feb 6 '13 at 10:14
are you sure your code is correct? no key for the array in data object? — Rain Diao, Feb 6 '13 at 10:21

Andy · Accepted Answer · 2013-02-06 10:40:01Z

data: {
[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]};

isn't valid. You're missing a key for the array:

{data: {points:[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]}};

You could do it like this:

var points = [
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30} 
];

var data = {'points':points};

or

var data = {'data':{'points':points}};

if you need data inside to get a correct data object.

leroyse · Answer 2 · 2013-02-06 13:08:56Z

A/ I believe that you are using the addon to display the heatmap on a google map, therefore your array should contain lat/long values and not plain numbers.

B/ if it is an array, it is something defined as:

var arr = [ {x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30} ];

Node the [ & ] to denote an array. Each of the {} element is one object in the array !

C/ The data passed to heatmap should be of the sort:

var heatMapData ={
    max: 480,
    data: arr
};

where arr has a highest count of 480 (number of occurrences at that coordinate) in all its elements (from the source-code of heatmap: the max occurrence - the heatmaps radial gradient alpha transition is based on it)

Working example code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo heatmap</title>
        <meta name="description" content="DEmo heatmap" />
        <meta name="author" content="noyb" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/site.css" type="text/css" media="screen" charset="utf-8" />
        <style>

        </style>
        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="jquery-1.6.2.min.js"><\/script>')
        </script>

        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="heatmap.js"></script>
        <script type="text/javascript" src="heatmap-gmaps.js"></script>
        <style>
            #heatmapArea{
                width: 800px;
                height: 600px;
                margin: 10px auto;
            }
        </style>

    </head>
    <body>
        <div id="heatmapArea"> map </div>

        <script>
            $(document).ready(function() {
                // standard gmaps initialization
                var myLatlng = new google.maps.LatLng(48.3333, 16.35);
                // define map properties
                var myOptions = {
                    zoom: 3,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: false,
                    scrollwheel: true,
                    draggable: true,
                    navigationControl: true,
                    mapTypeControl: false,
                    scaleControl: true,
                    disableDoubleClickZoom: false
                };
                // we'll use the heatmapArea
                var map = new google.maps.Map($("#heatmapArea")[0], myOptions);

                // let's create a heatmap-overlay
                // with heatmap config properties
                var heatmap = new HeatmapOverlay(map, {
                    "radius": 20,
                    "visible": true,
                    "opacity": 70
                });

                // here is our dataset
                var dat = [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1},{lat: 38, lng:-97, count: 2},{lat: 54, lng:-2, count: 1},{lat: 51.5167, lng:-0.7, count: 2},{lat: 51.5167, lng:-0.7, count: 6},{lat: 60.3911, lng:5.3247, count: 1},{lat: 50.8333, lng:12.9167, count: 9},{lat: 50.8333, lng:12.9167, count: 1},{lat: 52.0833, lng:4.3, count: 3},{lat: 52.0833, lng:4.3, count: 1},{lat: 51.8, lng:4.4667, count: 16},{lat: 51.8, lng:4.4667, count: 9},{lat: 51.8, lng:4.4667, count: 2},{lat: 51.1, lng:6.95, count: 1},{lat: 13.75, lng:100.517, count: 1},{lat: 18.975, lng:72.8258, count: 1},{lat: 2.5, lng:112.5, count: 2},{lat: 25.0389, lng:102.718, count: 1},{lat: -27.6167, lng:152.733, count: 1},{lat: -33.7667, lng:150.833, count: 1},{lat: -33.8833, lng:151.217, count: 2},{lat: 9.4333, lng:99.9667, count: 1},{lat: 33.7, lng:73.1667, count: 1},{lat: 33.7, lng:73.1667, count: 2},{lat: 22.3333, lng:114.2, count: 1},{lat: 37.4382, lng:-84.051, count: 1},{lat: 34.6667, lng:135.5, count: 1},{lat: 37.9167, lng:139.05, count: 1},{lat: 36.3214, lng:127.42, count: 1},{lat: -33.8, lng:151.283, count: 2},{lat: -33.8667, lng:151.225, count: 1},{lat: -37.65, lng:144.933, count: 2},{lat: -37.7333, lng:145.267, count: 1},{lat: -34.95, lng:138.6, count: 1},{lat: -27.5, lng:153.017, count: 1},{lat: -27.5833, lng:152.867, count: 3},{lat: -35.2833, lng:138.55, count: 1},{lat: 13.4443, lng:144.786, count: 2},{lat: -37.8833, lng:145.167, count: 1},{lat: -37.86, lng:144.972, count: 1},{lat: -27.5, lng:153.05, count: 1},{lat: 35.685, lng:139.751, count: 2},{lat: -34.4333, lng:150.883, count: 2},{lat: 14.0167, lng:100.733, count: 2},{lat: 13.75, lng:100.517, count: 5},{lat: -31.9333, lng:115.833, count: 1},{lat: -33.8167, lng:151.167, count: 1},{lat: -37.9667, lng:145.117, count: 1},{lat: -37.8333, lng:145.033, count: 1},{lat: -37.6417, lng:176.186, count: 2},{lat: -37.6861, lng:176.167, count: 1},{lat: -41.2167, lng:174.917, count: 1},{lat: 39.0521, lng:-77.015, count: 3},{lat: 24.8667, lng:67.05, count: 1},{lat: 24.9869, lng:121.306, count: 1},{lat: 53.2, lng:-105.75, count: 4},{lat: 44.65, lng:-63.6, count: 1},{lat: 53.9667, lng:-1.0833, count: 1},{lat: 40.7, lng:14.9833, count: 1},{lat: 37.5331, lng:-122.247, count: 1},{lat: 39.6597, lng:-86.8663, count: 2},{lat: 33.0247, lng:-83.2296, count: 1},{lat: 34.2038, lng:-80.9955, count: 1},{lat: 28.0087, lng:-82.7454, count: 1},{lat: 44.6741, lng:-93.4103, count: 1},{lat: 31.4507, lng:-97.1909, count: 1},{lat: 45.61, lng:-73.84, count: 1},{lat: 49.25, lng:-122.95, count: 1},{lat: 49.9, lng:-119.483, count: 2},{lat: 32.7825, lng:-96.8207, count: 6},{lat: 32.7825, lng:-96.8207, count: 7},{lat: 32.7825, lng:-96.8207, count: 4},{lat: 32.7825, lng:-96.8207, count: 41},{lat: 32.7825, lng:-96.8207, count: 11},{lat: 32.7825, lng:-96.8207, count: 3},{lat: 32.7825, lng:-96.8207, count: 10},{lat: 32.7825, lng:-96.8207, count: 5},{lat: 32.7825, lng:-96.8207, count: 14},{lat: 41.4201, lng:-75.6485, count: 4},{lat: 31.1999, lng:-92.3508, count: 1},{lat: 41.9874, lng:-91.6838, count: 1},{lat: 30.1955, lng:-85.6377, count: 1},{lat: 42.4266, lng:-92.358, count: 1},{lat: 41.6559, lng:-91.5228, count: 1},{lat: 33.9269, lng:-117.861, count: 3},{lat: 41.8825, lng:-87.6441, count: 6},{lat: 42.3998, lng:-88.8271, count: 1},{lat: 33.1464, lng:-97.0902, count: 1},{lat: 47.2432, lng:-93.5119, count: 1},{lat: 41.6472, lng:-93.46, count: 1},{lat: 36.1213, lng:-76.6414, count: 1},{lat: 41.649, lng:-93.6275, count: 1},{lat: 44.8547, lng:-93.7854, count: 1},{lat: 43.6833, lng:-79.7667, count: 1},{lat: 40.6955, lng:-89.4293, count: 1},{lat: 37.6211, lng:-77.6515, count: 1},{lat: 37.6273, lng:-77.5437, count: 3},{lat: 33.9457, lng:-118.039, count: 1},{lat: 33.8408, lng:-118.079, count: 1},{lat: 40.3933, lng:-74.7855, count: 1},{lat: 40.9233, lng:-73.9984, count: 1},{lat: 39.0735, lng:-76.5654, count: 1},{lat: 40.5966, lng:-74.0775, count: 1},{lat: 40.2944, lng:-73.9932, count: 2},{lat: 38.9827, lng:-77.004, count: 1},{lat: 38.3633, lng:-81.8089, count: 1},{lat: 36.0755, lng:-79.0741, count: 1},{lat: 51.0833, lng:-114.083, count: 2},{lat: 49.1364, lng:-122.821, count: 1},{lat: 39.425, lng:-84.4982, count: 3},{lat: 38.7915, lng:-82.9217, count: 1},{lat: 39.0131, lng:-84.2049, count: 1},{lat: 29.7523, lng:-95.367, count: 7},{lat: 29.7523, lng:-95.367, count: 4},{lat: 41.5171, lng:-71.2789, count: 1},{lat: 29.7523, lng:-95.367, count: 2},{lat: 32.8148, lng:-96.8705, count: 1},{lat: 45.5, lng:-73.5833, count: 1},{lat: 40.7529, lng:-73.9761, count: 6},{lat: 33.6534, lng:-112.246, count: 1},{lat: 40.7421, lng:-74.0018, count: 1},{lat: 38.3928, lng:-121.368, count: 1},{lat: 32.7825, lng:-96.8207, count: 1},{lat: 39.7968, lng:-76.993, count: 2},{lat: 40.5607, lng:-111.724, count: 1},{lat: 41.2863, lng:-75.8953, count: 1},{lat: 26.3484, lng:-80.2187, count: 1},{lat: 32.711, lng:-117.053, count: 2},{lat: 32.5814, lng:-83.6286, count: 3},{lat: 35.0508, lng:-80.8186, count: 3},{lat: 35.0508, lng:-80.8186, count: 1},{lat: -22.2667, lng:166.45, count: 5},{lat: 50.1167, lng:8.6833, count: 1},{lat: 51.9167, lng:4.5, count: 2},{lat: 54, lng:-2, count: 6},{lat: 52.25, lng:21, count: 1},{lat: 49.1, lng:10.75, count: 3},{lat: 51.65, lng:6.1833, count: 1},{lat: 1.3667, lng:103.8, count: 1},{lat: 29.4889, lng:-98.3987, count: 11},{lat: 29.3884, lng:-98.5311, count: 1},{lat: 41.8825, lng:-87.6441, count: 2},{lat: 41.8825, lng:-87.6441, count: 1},{lat: 33.9203, lng:-84.618, count: 4},{lat: 40.1242, lng:-82.3828, count: 1},{lat: 40.1241, lng:-82.3828, count: 1},{lat: 43.0434, lng:-87.8945, count: 1},{lat: 43.7371, lng:-74.3419, count: 1},{lat: 42.3626, lng:-71.0843, count: 1},{lat: 4.6, lng:-74.0833, count: 1},{lat: 19.7, lng:-101.117, count: 1},{lat: 25.6667, lng:-100.317, count: 1},{lat: 53.8167, lng:10.3833, count: 1},{lat: 50.8667, lng:6.8667, count: 3},{lat: 55.7167, lng:12.45, count: 2},{lat: 44.4333, lng:26.1, count: 4},{lat: 50.1167, lng:8.6833, count: 2},{lat: 52.5, lng:5.75, count: 4},{lat: 48.8833, lng:8.7, count: 1},{lat: 17.05, lng:-96.7167, count: 3},{lat: 23, lng:-102, count: 1},{lat: 20.6167, lng:-105.25, count: 1},{lat: 23, lng:-102, count: 2},{lat: 20.6667, lng:-103.333, count: 1},{lat: 21.1167, lng:-101.667, count: 1},{lat: 17.9833, lng:-92.9167, count: 1},{lat: 20.9667, lng:-89.6167, count: 2},{lat: 21.1667, lng:-86.8333, count: 1},{lat: 17.9833, lng:-94.5167, count: 1},{lat: 18.6, lng:-98.85, count: 1},{lat: 16.75, lng:-93.1167, count: 1},{lat: 19.4342, lng:-99.1386, count: 1},{lat: -10, lng:-55, count: 1},{lat: -22.9, lng:-43.2333, count: 1},{lat: 15.7833, lng:-86.8, count: 1},{lat: 10.4667, lng:-64.1667, count: 1},{lat: 7.1297, lng:-73.1258, count: 1},{lat: 4, lng:-72, count: 2},{lat: 4, lng:-72, count: 1},{lat: 6.8, lng:-58.1667, count: 1},{lat: 0, lng:0, count: 1},{lat: 48.15, lng:11.5833, count: 2},{lat: 45.8, lng:16, count: 15},{lat: 59.9167, lng:10.75, count: 1},{lat: 51.5002, lng:-0.1262, count: 1},{lat: 55, lng:73.4, count: 1},{lat: 52.5, lng:5.75, count: 1},{lat: 52.2, lng:0.1167, count: 1},{lat: 48.8833, lng:8.3333, count: 1},{lat: -33.9167, lng:18.4167, count: 1},{lat: 40.9157, lng:-81.133, count: 2},{lat: 43.8667, lng:-79.4333, count: 1},{lat: 54, lng:-2, count: 2},{lat: 39, lng:22, count: 1},{lat: 54, lng:-2, count: 11},{lat: 54, lng:-2, count: 4},{lat: 54, lng:-2, count: 3},{lat: 9.0833, lng:-79.3833, count: 2},{lat: 21.5, lng:-104.9, count: 1},{lat: 19.5333, lng:-96.9167, count: 1},{lat: 32.5333, lng:-117.017, count: 1},{lat: 19.4342, lng:-99.1386, count: 3},{lat: 18.15, lng:-94.4167, count: 1},{lat: 20.7167, lng:-103.4, count: 1},{lat: 23.2167, lng:-106.417, count: 2},{lat: 10.9639, lng:-74.7964, count: 1},{lat: 24.8667, lng:67.05, count: 2},{lat: 1.2931, lng:103.856, count: 1},{lat: -41, lng:174, count: 1},{lat: 13.75, lng:100.517, count: 2},{lat: 13.75, lng:100.517, count: 46}];
                // important: a datapoint now contains lat, lng and count property!
                var testData={
                        max: 46,
                        data: dat
                };

                // now we can set the data
                google.maps.event.addListenerOnce(map, "idle", function(){
                    // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
                    heatmap.setDataSet(testData);
                });
            });
        </script>
    </body>
</html>

asked	1 year ago
viewed	197 times
active	1 year ago

current community

your communities

more stack exchange communities

Converting JavaScript array into JavaScript object

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery arrays object or ask your own question.

Visit Chat

Hot Network Questions

current community

your communities

more stack exchange communities

Converting JavaScript array into JavaScript object

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery arrays object or ask your own question.

Visit Chat

Related

Hot Network Questions