We Keep Coding

Javascript multiple json data combination

I have json data like this:
{
    variant_57    : {
        variant_id        : 57,
        variant_name    : "Color",
        options                : [
            {option_id:62, option_name:"Blue"},
            {option_id:63, option_name:"White"}
        ]
    },
    variant_71    : {
        variant_id        : 71,
        variant_name    : "Size",
        options                : [
            {option_id:85, option_name:"S"},
            {option_id:86, option_name:"M"},
            {option_id:87, option_name:"L"}
        ]
    },
};
The number of options within a variant might change as well as the number of variants. I keep this short so that there wouldn't be too many unnecessary codes. The result that I wanted based on the example above is this.
[
[
{variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
{variant_id:71,variant_name:"Size",option_id:85,option_name:"S"}
],
[
{variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
{variant_id:71,variant_name:"Size",option_id:86,option_name:"M"}
],
[
{variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
{variant_id:71,variant_name:"Size",option_id:87,option_name:"L"}
],
[
{variant_id:57,variant_name:"Color",option_id:63,option_name:"White"},
{variant_id:71,variant_name:"Size",option_id:85,option_name:"S"}
],
[
{variant_id:57,variant_name:"Color",option_id:63,option_name:"White"},
{variant_id:71,variant_name:"Size",option_id:86,option_name:"M"}
],
[
{variant_id:57,variant_name:"Color",option_id:63,option_name:"White"},
{variant_id:71,variant_name:"Size",option_id:87,option_name:"L"}
]
];
If there was another variant which was named 'type of fabric', the result that I wanted would have been like this.
[
    [
        {variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
        {variant_id:71,variant_name:"Size",option_id:85,option_name:"S"},
        {variant_id:101,variant_name:"Fabric",option_id:105,option_name:"Linen"}
    ],
    [...],
    [...],
   .............
];
Thanks.

Object with Key:Value where every Value is an Array of Objects - cannot iterate [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
I am downloading data via d3.json when create an object with each record that holds downloaded data. Each object will be stored in an array. I lost the ability to iterate over the array.
I have tried using multi-dimensional array, and still cannot iterate over the created object.
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
// console.log(datamodel)
const url1 = "https://www.quandl.com/api/v3/datasets/YALE/SPCOMP.json?start_date='2015-01-01'&end_date='2018-09-30'&api_key=4QuxetVDNP8R3sYg9CED";
// Fetch the JSON data and console log it
d3.json(url1).then(function(data) {
data.dataset.data.forEach(element => {
tObject['date']=element[0];
tObject['spx'] = element[1];
tObject['rate']=element[5];
datamodel['mkt'].push(tObject); //creating an array of objects
tObject={};
});
});
I repeat the code above for other datasets to fill "confidence, homes"
I need to iterate after downloading over the datamodel, and update the "combined" so that I can have more stats, like change per date, ratios.
For instance: going to debug console in any browser, I can access the datamodel variable via datamodel.mkt
The debug console allows me to iterate over the objects, not sure why code ran in JS file does not allow me to iterate not get length of the array. I am so lost.

I hit the API in browser and copied the data in my js file. I call this function in HTML onload. Half of this function does what your code did to fill data in datamodel.mkt
Then it loops over the data present in datamodel.mkt and copies the elements in datamodel.combined
Please note that the commented forEach loop also works. You can uncomment the console.log to view the datamodel object in console
Hope this helps.
function setData(){
var data = {"dataset":{"id":539984,"dataset_code":"SPCOMP","database_code":"YALE","name":"S\u0026P Composite","description":"This data set consists of monthly stock price, dividends, and earnings data and the consumer price index (to allow conversion to real values), all starting January 1871. Further info at http://www.econ.yale.edu/~shiller/data.htm.","refreshed_at":"2019-08-24T02:51:26.805Z","newest_available_date":"2019-08-31","oldest_available_date":"1871-01-31","column_names":["Year","S\u0026P Composite","Dividend","Earnings","CPI","Long Interest Rate","Real Price","Real Dividend","Real Earnings","Cyclically Adjusted PE Ratio"],"frequency":"monthly","type":"Time Series","premium":false,"limit":null,"transform":null,"column_index":null,"start_date":"2015-01-01","end_date":"2018-09-30","data":[["2018-09-30",2901.5,52.34,130.39,252.439,3.0,2944.5129194578,53.115907704436,132.32295004932,32.6228911205],["2018-08-31",2857.82,51.89,127.75333333333,252.146,2.89,2903.555479266,52.720428095231,129.79784975768,32.390276880301],["2018-07-31",2793.64,51.44,125.11666666667,252.006,2.89,2839.9251892812,52.29226089855,127.18960684468,31.886366962159],["2018-06-30",2754.35,50.99,122.48,251.989,2.91,2800.1731263567,51.838302217557,124.51765553258,31.630556496455],["2018-05-31",2701.49,50.66,120.13333333333,251.588,2.976,2750.8111875864,51.58490120753,122.32661136461,31.243615074865],["2018-04-30",2653.63,50.33,117.78666666667,250.546,2.87,2713.3151215246,51.462016206605,120.43590997262,30.970179293325],["2018-03-31",2702.77,50.0,115.44,249.554,2.84,2774.5457779178,51.327818828791,118.50566811191,31.808409057643],["2018-02-28",2705.16,49.643333333333,113.58666666667,248.991,2.86,2783.2783925925,51.076911163456,116.86677128892,32.03538233925],["2018-01-31",2789.8,49.286666666667,111.73333333333,247.867,2.58,2883.3787928607,50.939898715844,115.48122581868,33.307343828031],["2017-12-31",2664.34,48.93,109.88,246.524,2.4,2768.7119778399,50.846767708215,114.18440293846,32.086132007706],["2017-11-30",2593.61,48.676666666667,108.94666666667,246.669,2.35,2693.6268919585,50.553775758202,113.14795637068,31.29891333388],["2017-10-31",2557.0,48.423333333333,108.01333333333,246.663,2.36,2655.6697042118,50.291896484272,112.18135979048,30.920393290334],["2017-09-30",2492.84,48.17,107.08,246.819,2.2,2587.3975149806,49.997167205523,111.14172024844,30.168114410679],["2017-08-31",2456.22,47.853333333333,106.06,245.519,2.21,2562.8872302144,49.931478826486,110.66590925753,29.914959397497],["2017-07-31",2454.1,47.536666666667,105.04,244.786,2.32,2568.3429837695,49.749588160679,109.92981011986,30.002220744019],["2017-06-30",2433.99,47.22,104.02,244.955,2.19,2545.5393875916,49.384085342206,108.78722061195,29.748503240633],["2017-05-31",2395.35,46.94,102.77666666667,244.733,2.3,2507.4009520069,49.135784201558,107.58440805899,29.313344980271],["2017-04-30",2359.31,46.66,101.53333333333,244.524,2.3,2471.7859389569,48.884433123129,106.37375574586,28.904245956275],["2017-03-31",2366.82,46.38,100.29,243.801,2.48,2487.0074615157,48.735183100151,105.3827406881,29.086921742465],["2017-02-28",2329.91,46.153333333333,98.376666666667,243.603,2.42,2450.2130769633,48.536424530897,103.4562687549,28.655106525184],["2017-01-31",2275.12,45.926666666667,96.463333333333,242.839,2.43,2400.1214199531,48.45000545629,101.76329713308,28.063573742124],["2016-12-31",2246.63,45.7,94.55,241.432,2.49,2383.8782004353,48.49184501226,100.32612573105,27.865098223924],["2016-11-30",2164.99,45.476666666667,92.73,241.353,2.14,2298.0026949634,48.27066293976,98.427147425141,26.850953531056],["2016-10-31",2143.02,45.253333333333,90.91,241.729,1.76,2271.1447214649,47.958894050776,96.34523552201,26.525143085071],["2016-09-30",2157.69,45.03,89.09,241.428,1.63,2289.5427262476,47.781705881256,94.534136730205,26.727873346479],["2016-08-31",2170.95,44.84,88.366666666667,240.849,1.56,2309.1508982288,47.694477660277,93.992016263302,26.948872433724],["2016-07-31",2148.9,44.65,87.643333333333,240.628,1.5,2287.7964664337,47.53600084986,93.308254598384,26.694003256096],["2016-06-30",2083.89,44.46,86.92,241.018,1.64,2214.9945027446,47.257127579683,92.388428457626,25.840372927671],["2016-05-31",2065.55,44.266666666667,86.76,240.229,1.81,2202.7115000166,47.206165783482,92.521241190697,25.69470992345],["2016-04-30",2075.54,44.073333333333,86.6,239.261,1.81,2222.3196911532,47.190146430049,92.72424778798,25.922337543674],["2016-03-31",2021.95,43.88,86.44,238.132,1.89,2175.2039979402,47.20589106042,92.991732526498,25.372298620188],["2016-02-29",1904.42,43.716666666667,86.47,237.111,1.78,2057.5877800903,47.232689805618,93.42456776573,24.00260677729],["2016-01-31",1918.6,43.553333333333,86.5,236.916,2.09,2074.6144044725,47.094950847558,93.533902838981,24.206167203878],["2015-12-31",2054.08,43.39,86.53,236.525,2.24,2224.7829278089,46.995896575415,93.721017070077,25.965424037124],["2015-11-30",2080.62,43.096666666667,87.906666666667,237.336,2.26,2245.8279922768,46.518682111016,94.886741792227,26.225851890972],["2015-10-31",2024.81,42.803333333333,89.283333333333,237.838,2.07,2180.9734222979,46.104539381848,96.169308258142,25.491441046067],["2015-09-30",1944.41,42.51,90.66,237.945,2.17,2093.4307689277,45.767992340667,97.608237723003,24.496752170486],["2015-08-31",2039.87,42.253333333333,92.076666666667,238.316,2.17,2192.7879220761,45.420835151647,98.979151892865,25.693658417058],["2015-07-31",2094.14,41.996666666667,93.493333333333,238.654,2.32,2247.9380311036,45.080989895413,100.35967970367,26.3811363364],["2015-06-30",2099.29,41.74,94.91,238.638,2.36,2253.6173464096,44.808477170442,101.88722013049,26.495895292785],["2015-05-31",2111.94,41.43,96.356666666667,237.805,2.2,2275.1389967621,44.631480362061,103.80257485124,26.806111379651],["2015-04-30",2094.86,41.12,97.803333333333,236.599,1.94,2268.2422722624,44.523320047845,105.89808151133,26.791371680192],["2015-03-31",2079.99,40.81,99.25,236.119,2.04,2256.7198666245,44.277490640313,107.68294403458,26.728605452928],["2015-02-28",2082.2,40.353333333333,100.27,234.722,1.98,2272.5632823084,44.042600927906,109.43709553216,26.995513699383],["2015-01-31",2028.18,39.896666666667,101.29,233.707,1.88,2223.2183358864,43.733298264494,111.03047325283,26.492295420383]],"collapse":null,"order":null,"database_id":175}}
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
data.dataset.data.forEach(element => {
tObject['date']=element[0];
tObject['spx'] = element[1];
tObject['rate']=element[5];
datamodel['mkt'].push(tObject); //creating an array of objects
tObject={};
});
/*
datamodel.mkt.forEach(element => {
datamodel["combined"].push(element);
});*/
for(var i=0;i<datamodel.mkt.length; i++)
{
datamodel.combined[i] = datamodel.mkt[i];
}
document.getElementById("foo").innerHTML = "Length of datamodel.mkt = " + datamodel.mkt.length + "<br> Length of datamodel.combined = " + datamodel.combined.length;
//console.log(datamodel);
}
<html>
<head></head>
<body onload="setData()">
<div id="foo"></div>
</body>
</html>

You can use map() or forEach() to get your work done. In "forEach(), you are pushing the objects, but the array is getting updated only by the last object. You can do something like this:
let data ={
"dataset": {
"id": 539984,
"dataset_code": "SPCOMP",
"database_code": "YALE",
"name": "S&P Composite",
"description": "This data set consists of monthly stock price, dividends, and earnings data and the consumer price index (to allow conversion to real values), all starting January 1871. Further info at http://www.econ.yale.edu/~shiller/data.htm.",
"refreshed_at": "2019-08-24T02:51:26.805Z",
"newest_available_date": "2019-08-31",
"oldest_available_date": "1871-01-31",
"column_names": [
"Year",
"S&P Composite",
"Dividend",
"Earnings",
"CPI",
"Long Interest Rate",
"Real Price",
"Real Dividend",
"Real Earnings",
"Cyclically Adjusted PE Ratio"
],
"frequency": "monthly",
"type": "Time Series",
"premium": false,
"limit": null,
"transform": null,
"column_index": null,
"start_date": "2015-01-01",
"end_date": "2018-09-30",
"data": [
[
"2018-09-30",
2901.5,
52.34,
130.39,
252.439,
3.0,
2944.5129194578,
53.115907704436,
132.32295004932,
32.6228911205
],
[
"2018-08-31",
2857.82,
51.89,
127.75333333333,
252.146,
2.89,
2903.555479266,
52.720428095231,
129.79784975768,
32.390276880301
],
[
"2018-07-31",
2793.64,
51.44,
125.11666666667,
252.006,
2.89,
2839.9251892812,
52.29226089855,
127.18960684468,
31.886366962159
],
[
"2018-06-30",
2754.35,
50.99,
122.48,
251.989,
2.91,
2800.1731263567,
51.838302217557,
124.51765553258,
31.630556496455
],
[
"2018-05-31",
2701.49,
50.66,
120.13333333333,
251.588,
2.976,
2750.8111875864,
51.58490120753,
122.32661136461,
31.243615074865
],
[
"2018-04-30",
2653.63,
50.33,
117.78666666667,
250.546,
2.87,
2713.3151215246,
51.462016206605,
120.43590997262,
30.970179293325
],
[
"2018-03-31",
2702.77,
50.0,
115.44,
249.554,
2.84,
2774.5457779178,
51.327818828791,
118.50566811191,
31.808409057643
],
[
"2018-02-28",
2705.16,
49.643333333333,
113.58666666667,
248.991,
2.86,
2783.2783925925,
51.076911163456,
116.86677128892,
32.03538233925
],
[
"2018-01-31",
2789.8,
49.286666666667,
111.73333333333,
247.867,
2.58,
2883.3787928607,
50.939898715844,
115.48122581868,
33.307343828031
],
[
"2017-12-31",
2664.34,
48.93,
109.88,
246.524,
2.4,
2768.7119778399,
50.846767708215,
114.18440293846,
32.086132007706
],
[
"2017-11-30",
2593.61,
48.676666666667,
108.94666666667,
246.669,
2.35,
2693.6268919585,
50.553775758202,
113.14795637068,
31.29891333388
],
[
"2017-10-31",
2557.0,
48.423333333333,
108.01333333333,
246.663,
2.36,
2655.6697042118,
50.291896484272,
112.18135979048,
30.920393290334
],
[
"2017-09-30",
2492.84,
48.17,
107.08,
246.819,
2.2,
2587.3975149806,
49.997167205523,
111.14172024844,
30.168114410679
],
[
"2017-08-31",
2456.22,
47.853333333333,
106.06,
245.519,
2.21,
2562.8872302144,
49.931478826486,
110.66590925753,
29.914959397497
],
[
"2017-07-31",
2454.1,
47.536666666667,
105.04,
244.786,
2.32,
2568.3429837695,
49.749588160679,
109.92981011986,
30.002220744019
],
[
"2017-06-30",
2433.99,
47.22,
104.02,
244.955,
2.19,
2545.5393875916,
49.384085342206,
108.78722061195,
29.748503240633
],
[
"2017-05-31",
2395.35,
46.94,
102.77666666667,
244.733,
2.3,
2507.4009520069,
49.135784201558,
107.58440805899,
29.313344980271
],
[
"2017-04-30",
2359.31,
46.66,
101.53333333333,
244.524,
2.3,
2471.7859389569,
48.884433123129,
106.37375574586,
28.904245956275
],
[
"2017-03-31",
2366.82,
46.38,
100.29,
243.801,
2.48,
2487.0074615157,
48.735183100151,
105.3827406881,
29.086921742465
],
[
"2017-02-28",
2329.91,
46.153333333333,
98.376666666667,
243.603,
2.42,
2450.2130769633,
48.536424530897,
103.4562687549,
28.655106525184
],
[
"2017-01-31",
2275.12,
45.926666666667,
96.463333333333,
242.839,
2.43,
2400.1214199531,
48.45000545629,
101.76329713308,
28.063573742124
],
[
"2016-12-31",
2246.63,
45.7,
94.55,
241.432,
2.49,
2383.8782004353,
48.49184501226,
100.32612573105,
27.865098223924
],
[
"2016-11-30",
2164.99,
45.476666666667,
92.73,
241.353,
2.14,
2298.0026949634,
48.27066293976,
98.427147425141,
26.850953531056
],
[
"2016-10-31",
2143.02,
45.253333333333,
90.91,
241.729,
1.76,
2271.1447214649,
47.958894050776,
96.34523552201,
26.525143085071
],
[
"2016-09-30",
2157.69,
45.03,
89.09,
241.428,
1.63,
2289.5427262476,
47.781705881256,
94.534136730205,
26.727873346479
],
[
"2016-08-31",
2170.95,
44.84,
88.366666666667,
240.849,
1.56,
2309.1508982288,
47.694477660277,
93.992016263302,
26.948872433724
],
[
"2016-07-31",
2148.9,
44.65,
87.643333333333,
240.628,
1.5,
2287.7964664337,
47.53600084986,
93.308254598384,
26.694003256096
],
[
"2016-06-30",
2083.89,
44.46,
86.92,
241.018,
1.64,
2214.9945027446,
47.257127579683,
92.388428457626,
25.840372927671
],
[
"2016-05-31",
2065.55,
44.266666666667,
86.76,
240.229,
1.81,
2202.7115000166,
47.206165783482,
92.521241190697,
25.69470992345
],
[
"2016-04-30",
2075.54,
44.073333333333,
86.6,
239.261,
1.81,
2222.3196911532,
47.190146430049,
92.72424778798,
25.922337543674
],
[
"2016-03-31",
2021.95,
43.88,
86.44,
238.132,
1.89,
2175.2039979402,
47.20589106042,
92.991732526498,
25.372298620188
],
[
"2016-02-29",
1904.42,
43.716666666667,
86.47,
237.111,
1.78,
2057.5877800903,
47.232689805618,
93.42456776573,
24.00260677729
],
[
"2016-01-31",
1918.6,
43.553333333333,
86.5,
236.916,
2.09,
2074.6144044725,
47.094950847558,
93.533902838981,
24.206167203878
],
[
"2015-12-31",
2054.08,
43.39,
86.53,
236.525,
2.24,
2224.7829278089,
46.995896575415,
93.721017070077,
25.965424037124
],
[
"2015-11-30",
2080.62,
43.096666666667,
87.906666666667,
237.336,
2.26,
2245.8279922768,
46.518682111016,
94.886741792227,
26.225851890972
],
[
"2015-10-31",
2024.81,
42.803333333333,
89.283333333333,
237.838,
2.07,
2180.9734222979,
46.104539381848,
96.169308258142,
25.491441046067
],
[
"2015-09-30",
1944.41,
42.51,
90.66,
237.945,
2.17,
2093.4307689277,
45.767992340667,
97.608237723003,
24.496752170486
],
[
"2015-08-31",
2039.87,
42.253333333333,
92.076666666667,
238.316,
2.17,
2192.7879220761,
45.420835151647,
98.979151892865,
25.693658417058
],
[
"2015-07-31",
2094.14,
41.996666666667,
93.493333333333,
238.654,
2.32,
2247.9380311036,
45.080989895413,
100.35967970367,
26.3811363364
],
[
"2015-06-30",
2099.29,
41.74,
94.91,
238.638,
2.36,
2253.6173464096,
44.808477170442,
101.88722013049,
26.495895292785
],
[
"2015-05-31",
2111.94,
41.43,
96.356666666667,
237.805,
2.2,
2275.1389967621,
44.631480362061,
103.80257485124,
26.806111379651
],
[
"2015-04-30",
2094.86,
41.12,
97.803333333333,
236.599,
1.94,
2268.2422722624,
44.523320047845,
105.89808151133,
26.791371680192
],
[
"2015-03-31",
2079.99,
40.81,
99.25,
236.119,
2.04,
2256.7198666245,
44.277490640313,
107.68294403458,
26.728605452928
],
[
"2015-02-28",
2082.2,
40.353333333333,
100.27,
234.722,
1.98,
2272.5632823084,
44.042600927906,
109.43709553216,
26.995513699383
],
[
"2015-01-31",
2028.18,
39.896666666667,
101.29,
233.707,
1.88,
2223.2183358864,
43.733298264494,
111.03047325283,
26.492295420383
]
],
"collapse": null,
"order": null,
"database_id": 175
}
}
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
(data['dataset']['data']).map((mkt, index) => {
tObject['date'] = mkt[0];
tObject['spx'] = mkt[1];
tObject['rate'] = mkt[5];
datamodel['mkt'].push(JSON.parse(JSON.stringify(tObject)))
})
console.log(datamodel['mkt'].length)
data is the JSON data which I got after hitting your API. I hope it helps.

How to seperate object data into each sheet of CSV file for Javascript

I need your help or advice to loop my data below figure1 to CSV file which can be separated by DeviceA and DeviceB in sheet of excel file.
Let's see example file details that the data will be separated by sheet ProductDay1 and ProductDay2 via http://jsfiddle.net/qxLn3h86/48/
Figure1
var dataObj =
{ deviceA:
[ [ 'DeviceA' ],
[ 'Date/Time', 'smokeSensor', 'fireSensor' ],
[ '01/05/19 0001', '200', '700' ],
[ '01/05/19 0002', '300', '750' ],
[ '02/05/19 0001', '20', '780' ],
[ '02/05/19 0002', '30', '630' ]],
deviceB:
[ [ 'DeviceB' ],
[ 'Date/Time', 'smokeSensor', 'fireSensor' ],
[ '01/06/19 0001', '100', '600' ],
[ '01/06/19 0002', '110', '522' ],
[ '02/06/19 0001', '120' ],
[ '02/06/19 0002', '130' ] ]
}

How to display label on mapbox map polygon with GeoJSON

I want to display a custom label on mapbox map using GeoJSON data, I have added name under feature properties with a color which I want to show as polygon fill color for a zone, I have no Idea how to do it, I have searced a lot but found nothing on this topic, I am very new to MapBox need your help:
JSFiddle Demo
Here is code
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [55.2324,25.073], // starting position
zoom: 12 // starting zoom
});
// Draw map
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: false,
trash: false
}
});
map.addControl(draw);
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
var featureCollection = {
"type": "FeatureCollection",
"features": [
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
53.34234777435083,
24.03841558494339
],
[
53.63384239941877,
23.980642073807147
],
[
53.87583793720404,
24.01330148955786
],
[
53.67509163882116,
23.678780532068288
],
[
53.691591334582085,
23.436787672921128
],
[
53.13885152669846,
23.55531902255817
],
[
53.136101577392935,
23.980642073807147
],
[
53.34234777435083,
24.03841558494339
]
]
]
},
"properties":{
"id":1,
"name":"East Zone",
"color":"#ccccff",
"is_shutdown":false,
"is_active":true
}
},
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
54.41277432573249,
24.17109802219355
],
[
54.40221419428706,
23.93479580896283
],
[
54.40190486287914,
23.752296533243648
],
[
54.24386990803268,
23.813378685606605
],
[
54.12084722599417,
24.09616522759087
],
[
54.41277432573249,
24.17109802219355
]
]
]
},
"properties":{
"id":2,
"name":"West Zone",
"color":"#ffcc33",
"is_shutdown":false,
"is_active":true
}
},
{
"type":"Feature",
"geometry":{
"type":"Polygon",
"coordinates":[
[
[
55.01084972481446,
24.07274717129389
],
[
55.04794143668033,
23.858563232484837
],
[
54.967647759445896,
23.5905998890601
],
[
54.901748431837575,
23.38814119539755
],
[
54.58976976470866,
23.47439441289948
],
[
54.41317073001387,
23.67920953874405
],
[
54.43980120450599,
24.219099932016256
],
[
54.72318029018409,
24.176836888624475
],
[
55.01084972481446,
24.07274717129389
]
]
]
},
"properties":{
"id":3,
"name":"South Zone",
"color":"#07ac25",
"is_shutdown":false,
"is_active":true
}
}
]
};
var bbox = turf.bbox(featureCollection);
map.on('load', function () {
featureCollection.features.forEach(function (feature) {
draw.add(feature);
})
});
map.fitBounds(bbox, { padding: 40});

You need to define the a Point representing the labels for your polygons and use a Symbol layer. One way to generate the label points is https://github.com/mapbox/polylabel

You can use turf library to find the centroid of the polygon then you can use Symbol layer.

jqPlot Pie chart not rendering correctly

I am using jqPlot in phonegap but some problem is there like if I gave static value to pie chart then it works well but if I gave dynamic value then not rendering correctly
Static chart :-
$.jqplot('chartdiv', [ [ [ 'Cricket', 42],
[ 'Football', 8 ],
[ 'Basketball', 4 ], [ 'Chess', 28 ],
[ ' TableTennis', 18 ] ] ], {
seriesDefaults : {
renderer : $.jqplot.PieRenderer,
rendererOptions : {
showDataLabels : true
}
},
legend : {
show : true,
location : 'e'
}
});
O/P :-
Dynamic chart :-
var cricketPortion = document.getElementById("value_1").value;
var footballPortion = document.getElementById("value_2").value;
var basketballPortion = document.getElementById("value_3").value;
var chessPortion = document.getElementById("value_4").value;
var ttPortion = document.getElementById("value_5").value;
$.jqplot('chartdiv', [ [ [ 'Cricket', cricketPortion ],
[ 'Football', footballPortion ],
[ 'Basketball', basketballPortion ], [ 'Chess', chessPortion ],
[ ' TableTennis', ttPortion ] ] ], {
seriesDefaults : {
renderer : $.jqplot.PieRenderer,
rendererOptions : {
showDataLabels : true
}
},
legend : {
show : true,
location : 'e'
}
});
O/P :-
Tell me how can I get rid of this..??

Try with this you will get result
Use parseInt for every value
parseInt(document.getElementById("value_1").value)
DEMO

Use the parseInt function of Javascript to parse the String values into Integers Eg: parseInt(document.getElementById("value_1").value)
jqPlot excepts an value(integer) to plot the sections/divisions on the canvas(be it a pie-chart, bar-chart or any other chart)
So its [ label(a String), value(an Integer) ]
Make sure the data-type of the second field is of Integer type
Hope it helps.