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.

Accessing JSON Content in Javascript (NodeJS)

im working with nodejs an need to get a string value from a json.
The json looks like this:
`result["DIDL-Lite"]["item"] = [ { '$': { id: '0/Spotify/Track', parentID: '0/Spotify', restricted: '0' },
'upnp:class': [ 'object.item.audioItem.musicTrack' ],
'raumfeld:section': [ 'Spotify' ],
'dc:title': [ 'Californication' ],
'upnp:artist': [ 'Red Hot Chili Peppers' ],
'upnp:album': [ 'Californication (Deluxe Version)' ],
'upnp:albumArtURI': [ [Object] ] } ]`
how can i access the dc:title (or any other) value?
I'm trying different ways, e.g. console.log(result["DIDL-Lite"]["item"]["dc:title"]);, but I simply can't get it work...
Any tips? Thank you in adavance!!

Create a tapered line with OpenLayers and GeoJSON

I am trying to create an offline map through the following steps:
Download data from Natural Earth Data
Convert the shape files to GeoJSON
Add the GeoJSON files as layers in OpenLayers3
I am struggling to get the rivers right, I can display them, but only as a line with a fixed width. However, when looking at the file I created from Natural Earth Data I see that there are in fact many short lines, and each has a width (strokeweig) specified. See snippet below for illustration.
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "strokeweig": 0.20000000300000001, "scalerank": 5, "featurecla": "River", "name": null, "dissolve": "River_untitled_77", "note": "_untitled_77" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.991327277300684, 46.177440090512803 ], [ -73.078557095009359, 46.160128485695026 ], [ -73.146304897744017, 46.123541571632373 ], [ -73.177181566038399, 46.070624904965499 ], [ -73.163952399371681, 46.044166571632061 ] ] } },
{ "type": "Feature", "properties": { "strokeweig": 0.149999991, "scalerank": 5, "featurecla": "River", "name": "Ebro", "dissolve": "RiverEbro", "note": null }, "geometry": { "type": "LineString", "coordinates": [ [ -4.188860236009816, 43.011173407557422 ], [ -4.10225053548865, 43.001484076502706 ], [ -4.054759894212424, 42.952520656906145 ], [ -4.017449510097691, 42.861053371749534 ], [ -3.96267249186829, 42.825034898442098 ], [ -3.890377163091955, 42.844413560551544 ], [ -3.821957566737524, 42.841855577153098 ], [ -3.757387864588821, 42.81728343359832 ], [ -3.70925126790894, 42.832631333988999 ], [ -3.677521938481732, 42.887899278325165 ], [ -3.626775681971111, 42.89800202083822 ], [ -3.52213090658006, 42.845447089197393 ] ] } },
....
]
So, my question is twofold:
How do I work with this types of data in the first place to display a line with a width as specified in the strokeweig property of a features array item?
How do I deal with this value when zooming in and out?
Thanks,
Hendrik

You can find an example here http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html that is very near to your needs.
There is not a built-in solution. I can imagine at least two ways: Instead of creating one layer for the whole rivers featurecollection, create one layer for each "scalerank", and set their min/maxResolution accordingly. Otherwise, you can listen to the MapView change:resolution event, and add/remove or show/hide the features accordingly.

The code snippet below does sort of what I wanted:
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'maps/rivers.json',
format: new ol.format.GeoJSON()
}),
style: function(feature, resolution) {
var strokeWeight, scaleRank, width, style;
strokeWeight = feature.get('strokeweig');
scaleRank = feature.get('scalerank');
// strokeWeight is multiplied by scaleRanks because I think this is why this property was included in the GeoJSON
// This number is then corrected for different zoom levels, max-resolution~611.5 based on map.MaxZoom=18
// The calculation with dividers represents the amount of times the current resolution is SMALLER than
// the max-resolution. Note that the value 611.5 will need to be changed when we decide the
// map.maxZoom needs to be increased
width = strokeWeight * scaleRank * (611.5 / resolution));
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(35, 51, 60)',
width: width
})
});
return [style];
}
});
I am not super happy with the formula that computes the width. Obviously taking a static value is not ideal and I don't know how the properties actually should have been combined to produce the correct line width.
I think I will be looking into the solution that Francesco suggested to improve it. This still won't be ideal because the max scaleRank in the file is 6 and I will be allowing zoom up to 18 (I know it won't be a very detailed map but that's OK).
Many thanks to Francesco for his help!!!!!

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.