將JavaScript數組轉換爲JavaScript對象

我有以下使用for循環生成的數組。將JavaScript數組轉換爲JavaScript對象

{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}

我使用此使用附加組件從下面的網址以創建熱圖： http://www.patrick-wied.at/static/heatmapjs/examples.html

我需要通過上述陣列作爲javascript對象到heatmap.js文件以下列格式。我怎樣才能做到這一點？我怎樣才能將我的數組轉換爲JavaScript對象？

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} 
] 

};

我打電話這個載體作用

setDataSet: function(obj, internal)

來源

2013-02-06 Sahil

數組是一個對象。 'typeof [] ===「object」'和'[] instanceof Object']都是真的。 –

是的，但當我跟着它拋出一個錯誤數據：[heatmap_data [1]] – Sahil

我需要將這些數組傳遞到此函數： setDataSet：function（obj，internal） – Sahil

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} 
]};

無效。您遺漏了數組的關鍵：

{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} 
]}};

你可以做這樣的：

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};

或

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

，如果你需要data內獲得正確的數據對象。

來源

2013-02-06 10:40:01 Andy

A/我相信你使用插件來顯示谷歌地圖上的熱圖，因此你的數組應該包含緯度/長度值而不是純數。

B/如果它是一個數組，它是被定義爲的東西：

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} ];

節點的[&]表示的陣列。每個{}元素都是數組中的一個對象！

C/傳遞到熱圖的數據應該是那種：

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

其中ARR具有480（出現次數在該座標）在其所有元素具有最高計數（從源熱圖的-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>

來源

2013-02-06 13:08:56 leroyse

將JavaScript數組轉換爲JavaScript對象

回答

相關問題