Antonio Pulido
Reputation: 3
Iterate over table updating currency for each cell javascript / Jquery
I am trying to iterate through the prices in the table and update the currency based on the selected currency in the drop-down.
I need to be able to update the prices on the fly allowing the user to change between different currencies. I'm grabbing rates with ajax using openexchangerates api. In my sample code, there are hardcoded rates.
so far I have been able to grab the price fields and put them into an array while removing the $ from each one.
What I'm Currently having trouble with is creating a listener waits for you to select a currency and then iterates through the table performing the math of value * rate and updating the dom accordingly.
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
rates = {
"USD" : 1,
"AED" : 3.673175,
"AFN" : 76.179633,
"ALL" : 110.13,
"AMD" : 485.74,
"ANG" : 1.775607,
"AOA" : 310.2935,
"ARS" : 36.069,
"AUD" : 1.376456,
"AWG" : 1.799996,
"AZN" : 1.7025,
"BAM" : 1.729353,
"BBD" : 2,
"BDT" : 83.8945,
"BGN" : 1.72884,
"BHD" : 0.376971,
"BIF" : 1815,
"BMD" : 1,
"BND" : 1.378901,
"BOB" : 6.912312,
"BRL" : 3.784384,
"BSD" : 1,
"BTC" : 0.00018094797,
"BTN" : 72.002497,
"BWP" : 10.721978,
"BYN" : 2.137615,
"BZD" : 2.016384,
"CAD" : 1.320264,
"CDF" : 1610,
"CHF" : 1.006336,
"CLF" : 0.02338,
"CLP" : 675.607203,
"CNH" : 6.930934,
"CNY" : 6.9391,
"COP" : 3202.248993,
"CRC" : 616.218201,
"CUC" : 1,
"CUP" : 25.75,
"CVE" : 97.8215,
"CZK" : 22.976724,
"DJF" : 178.025,
"DKK" : 6.594392,
"DOP" : 50.2875,
"DZD" : 118.539475,
"EGP" : 17.9127,
"ERN" : 14.997335,
"ETB" : 28.06,
"EUR" : 0.883768,
"FJD" : 2.11954,
"FKP" : 0.784484,
"GBP" : 0.784484,
"GEL" : 2.44699,
"GGP" : 0.784484,
"GHS" : 4.9025,
"GIP" : 0.784484,
"GMD" : 49.605,
"GNF" : 9172.5,
"GTQ" : 7.717685,
"GYD" : 209.12595,
"HKD" : 7.83065,
"HNL" : 24.249947,
"HRK" : 6.564,
"HTG" : 72.624237,
"HUF" : 284.532245,
"IDR" : 14644.12,
"ILS" : 3.71235,
"IMP" : 0.784484,
"INR" : 71.854713,
"IQD" : 1190,
"IRR" : 42494.748754,
"ISK" : 124.050098,
"JEP" : 0.784484,
"JMD" : 126.240223,
"JOD" : 0.709503,
"JPY" : 113.3619,
"KES" : 103.2,
"KGS" : 68.708054,
"KHR" : 4046,
"KMF" : 435.45,
"KPW" : 900,
"KRW" : 1128.713333,
"KWD" : 0.304296,
"KYD" : 0.833659,
"KZT" : 374.14,
"LAK" : 8550,
"LBP" : 1510.95,
"LKR" : 176.56,
"LRD" : 158.125055,
"LSL" : 14.23,
"LYD" : 1.4,
"MAD" : 9.527069,
"MDL" : 17.082435,
"MGA" : 3615,
"MKD" : 54.37022,
"MMK" : 1606.541171,
"MNT" : 2489.82399,
"MOP" : 8.069676,
"MRO" : 357,
"MRU" : 36.65,
"MUR" : 34.75,
"MVR" : 15.450044,
"MWK" : 727.424567,
"MXN" : 20.28933,
"MYR" : 4.181565,
"MZN" : 60.910134,
"NAD" : 14.405,
"NGN" : 363.5,
"NIO" : 32.3,
"NOK" : 8.49588,
"NPR" : 115.204717,
"NZD" : 1.465876,
"OMR" : 0.385009,
"PAB" : 1,
"PEN" : 3.385485,
"PGK" : 3.37,
"PHP" : 52.6155,
"PKR" : 134.125,
"PLN" : 3.787961,
"PYG" : 5934.276918,
"QAR" : 3.6411,
"RON" : 4.119803,
"RSD" : 104.449561,
"RUB" : 66.479983,
"RWF" : 883,
"SAR" : 3.7522,
"SBD" : 7.996142,
"SCR" : 13.670428,
"SDG" : 47.8,
"SEK" : 9.071083,
"SGD" : 1.376287,
"SHP" : 0.784484,
"SLL" : 8390,
"SOS" : 580,
"SRD" : 7.458,
"SSP" : 130.2634,
"STD" : 21050.59961,
"STN" : 21.7,
"SVC" : 8.753924,
"SYP" : 514.986689,
"SZL" : 14.315,
"THB" : 32.95025,
"TJS" : 9.427651,
"TMT" : 3.499986,
"TND" : 2.913297,
"TOP" : 2.293926,
"TRY" : 5.348061,
"TTD" : 6.74235,
"TWD" : 30.83095,
"TZS" : 2300.706946,
"UAH" : 27.955,
"UGX" : 3736.093939,
"USD" : 1,
"UYU" : 32.649925,
"UZS" : 8287.5,
"VEF" : 248571.35,
"VES" : 65.276342,
"VND" : 23238.330172,
"VUV" : 111.062842,
"WST" : 2.601349,
"XAF" : 579.714109,
"XAG" : 0.07028903,
"XAU" : 0.0008241,
"XCD" : 2.70285,
"XDR" : 0.720007,
"XOF" : 579.714109,
"XPD" : 0.00086581,
"XPF" : 105.46163,
"XPT" : 0.00119123,
"YER" : 250.300682,
"ZAR" : 14.248258,
"ZMW" : 11.854,
"ZWL" : 322.355011,
};
</script>';
</head>
<body>
<div> Please select a currency type:
<select id="selector" name="currencies">
<option value="ANG" title="Netherlands Antillean Guilder">ANG</option>
<option value="GBP" title="British Pound Sterling">GBP</option>
<option value="CAD" title="Canadian Dollar">CAD</option>
<option value="CNY" title="Chinese Yuan">CNY</option>
<option value="EUR" title="Euro">EUR</option>
<option value="HKD" title="Hong Kong Dollar">HKD</option>
<option value="ILS" title="Israeli New Sheqel">ILS</option>
<option value="INR" title="Indian Rupee">INR</option>
<option value="JPY" title="Japanese Yen">JPY</option>
<option value="KRW" title="South Korean Won">KRW</option>
</select>
</div>
<p id="output"></p>
<div class="cj-mt-30">
<h3 class="cj-title cj-mb-20 cj-fs-20 cj-color-black-ter" style="width: 80%">
Compare and get the best deal
<div id="#a001" class="cj-bd-bottom cj-mt-5">
</div>
</h3>
<table class="cj-table cj-text-center" style="width: 80%">
<thead>
<tr>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white"
title=""><img src="https://res.cloudinary.com/rhe305/image/upload/c_limit,h_47,w_83/v1541100411/stox_qeleyf.png">
</a>
</th>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801"
title=""><img style="vertical-align: middle" src="https://res.cloudinary.com/rhe305/image/upload/c_scale,h_39,w_66/v1541079455/flightclub_qnub4v.png"></a>
</th>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194"
title=""><img src="https://res.cloudinary.com/rhe305/image/upload/c_scale,h_39/v1541032916/Screen_Shot_2018-10-31_at_8.41.23_PM_rtfl9f.png"></a>
</th>
<th class="cj-has-text-centered">
<a class="cj-color-dark" target="_blank" href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white"
title=""><img src="https://res.cloudinary.com/rhe305/image/upload/c_scale,w_39/e_colorize,co_black/v1541033195/logoUN_m6ehto.png">
</a>
</th>
</tr>
</thead>
<tbody id="mytab">
<tr>
<td class="cj-has-text-centered">
4 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$262</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$300</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$305</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$320</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
4.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$275</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$335</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$369</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$349</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$265</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$300</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$380</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$314</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
5.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$274</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$330</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$350</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$314</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
6 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$280</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$330</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$345</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$340</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
6.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$285</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$350</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$350</a> </td>
<td class="cj-has-text-centered highest">
- </td>
</tr>
<tr>
<td class="cj-has-text-centered">
7 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$240</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$615</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$295</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://urbannecessities.com/products/adidas-yeezy-boost-350-v2-cream-white">$329</a> </td>
</tr>
<tr>
<td class="cj-has-text-centered">
7.5 </td>
<td class="cj-has-text-centered lowest">
<a href="https://stockx.com/adidas-yeezy-boost-350-v2-cream-white">$240</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.flightclub.com/yeezy-boost-350-v2-cwhite-cwhite-cwhite-800801">$270</a> </td>
<td class="cj-has-text-centered highest">
<a href="https://www.stadiumgoods.com/yeezy-boost-350-v2-197194">$295</a> </td>
<td class="cj-has-text-centered highest">
- </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
jQuery(document).ready(function (t) {
t("tr").each(function () {
var e = t("td:not(:first-child)", this).map(function () {
return parseInt(t(this).text().replace("$", ""), 10) ? parseInt(t(this).text().replace("$", ""), 10) : null
}).get();
console.log(e);
});
});
</script>
Upvotes: 0
Views: 112
Answers (1)
i'm a zone
Reputation: 21
Just do the same (or instead) as
jQuery(document).ready(function (t) {
just
jQuery('#selector').change(function (t) {
// and so on....
Upvotes: 2
Related Questions
- Jquery Render currency from table data
- Grab every TD then format it to currency
- Iterating through a table column containing dollar amounts returns NaN when adding
- adding dollar amounts with jquery in table column
- Looping through table and changing values in jQuery
- How to loop through table td and update
- Looping through table with jQuery - calculating cell in for each row
- Dynamic currency conversion with jquery
- Multiple currency Google Currency calculator how to get the values and update the currency value
- Parse currency from table with jquery