{"id":64457,"date":"2024-08-17T03:01:00","date_gmt":"2024-08-16T17:01:00","guid":{"rendered":"https:\/\/65.254.95.247\/ITblog\/?p=64457"},"modified":"2024-08-16T20:10:27","modified_gmt":"2024-08-16T10:10:27","slug":"javascript-map-array-sql-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-sql-tutorial\/","title":{"rendered":"Javascript Map Array SQL Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array SQL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_sql.jpg\" title=\"Javascript Map Array SQL Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array SQL Tutorial<\/p><\/div>\n<p>Finishing off the SQL work start that yesterday&#8217;s <a title='Javascript Map Array Conditions Tutorial' href='#jmact'>Javascript Map Array Conditions Tutorial<\/a> represents, today a user can <font color=blue>follow the advice<\/font> &#8230;<\/p>\n<blockquote><p>\n   xenterall=prompt(&#8216;<font color=blue>Optionally enter a # (hashtag) delimited composite field scenario to apply for next input data (perhaps CSV) file application, such as in examples below where +-*^%\/ (maths) and !&lt;&gt;= (conditions) and ~| (for ascending descending order).  &#8216; + String.fromCharCode(10) + &#8216;Examples &#8230;&#8217; + String.fromCharCode(10) + &#8216;#1,3&#038;2&#038;4&#8217; + String.fromCharCode(10) + &#8216;#4,2*3&#8217; + String.fromCharCode(10) + &#8216;#1&#038;4,3+2&#8217; + String.fromCharCode(10) + &#8216;#1&#038;4,3&#038;2,2&gt;100,|2<\/font>&#8216;, &#8221;);\n<\/p><\/blockquote>\n<p> &#8230; to facilitate WHERE and ORDER BY processing foreshadowed yesterday.<\/p>\n<p>The ORDER BY solution featured tailored Javascript sort functionality nuances &#8230;<\/p>\n<p><code><br \/>\nfunction maybesort(rh) {<br \/>\n   var recsare=[], newc='', ijk=0, exa='', zero=0, ipo=0;<br \/>\n   headrec='';<br \/>\n   if (eval('' + orderbys.length) &gt; 0) {<br \/>\n     recsare=rh.split(String.fromCharCode(10));<br \/>\n     if (recsare[0].indexOf('0') == -1 && recsare[0].indexOf('1') == -1 && recsare[0].indexOf('2') == -1 && recsare[0].indexOf('3') == -1 && recsare[0].indexOf('4') == -1 && recsare[0].indexOf('5') == -1 && recsare[0].indexOf('6') == -1 && recsare[0].indexOf('7') == -1 && recsare[0].indexOf('8') == -1 && recsare[0].indexOf('9') == -1) {<br \/>\n       headrec=recsare[0];<br \/>\n       zero=1;<br \/>\n              efields=headrec.replace(\/\\\"\/g,'').split(',');<br \/>\n              for (var ke=0; ke&lt;efields.length; ke++) {<br \/>\n                 eval('mappings.unshift({ from: \"' + eval(ke + 1) + '\", to: \"' + efields[ke] + '\"})');<br \/>\n              }<br \/>\n              document.getElementById('topic').innerHTML=headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(0,1).toUpperCase() + headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(1);<br \/>\n              document.getElementById('thname').innerHTML=maybenotdefn(headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(0,1).toUpperCase() + headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(1));<br \/>\n              document.getElementById('thquantity').innerHTML=maybenotdefq(headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[0].substring(0,1).toUpperCase() + headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[0].substring(1));<br \/>\n              analwheres();<br \/>\n     }<br \/>\n<br \/> <br \/>\n     for (ipo=0; ipo&lt;orderbys.length; ipo++) {<br \/>\n    <br \/> <br \/>\n     if (orderbys[ipo].indexOf('~1 ') != -1) {<br \/>\n     recsare.sort();<br \/>\n     <br \/>\n     } else if (orderbys[ipo].indexOf('|1 ') != -1) {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (y &lt; x) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (y &gt; x) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     <br \/>\n     } else if (orderbys[ipo].indexOf('|') != -1) {<br \/>\n     icol=eval(-1 + eval('' + orderbys[ipo].split('|')[1].split(' ')[0]));<br \/>\n     \/\/alert('icol=' + icol);<br \/>\n     exa='' + rh.split(String.fromCharCode(10))[zero].split(',')[icol];<br \/>\n     \/\/alert('exa=' + exa);<br \/>\n     if (exa != '' && exa.replace(\/0\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/\\-\/g,'').replace(\/\\.\/g,'').trim() == '') {<br \/>\n     \/\/alert('is a number');<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (x != headrec && y == headrec) { return 1;  }<br \/>\n         if (x == headrec && y != headrec) { return -1;  }<br \/>\n         if (x == headrec && y == headrec) { return 0;  }<br \/>\n         if (eval('' + y.split(',')[icol]) &lt; eval('' + x.split(',')[icol])) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (eval('' + y.split(',')[icol]) &gt; eval('' + x.split(',')[icol])) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     } else {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (y.split(',')[icol] &lt; x.split(',')[icol]) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (y.split(',')[icol] &gt; x.split(',')[icol]) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n      }<br \/>\n<br \/>\n     } else if (orderbys[ipo].indexOf('~') != -1) {<br \/>\n<br \/>\n     icol=eval(-1 + eval('' + orderbys[ipo].split('~')[1].split(' ')[0]));<br \/>\n     exa='' + rh.split(String.fromCharCode(10))[zero].split(',')[icol];<br \/>\n     if (exa != '' && exa.replace(\/0\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/\\-\/g,'').replace(\/\\.\/g,'').trim() == '') {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (x != headrec && y == headrec) { return -1;  }<br \/>\n         if (x == headrec && y != headrec) { return 1;  }<br \/>\n         if (x == headrec && y == headrec) { return 0;  }<br \/>\n         if (eval('' + x.split(',')[icol]) &lt; eval('' + y.split(',')[icol])) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (eval('' + x.split(',')[icol]) &gt; eval('' + y.split(',')[icol])) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     } else {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (x.split(',')[icol] &lt; y.split(',')[icol]) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (x.split(',')[icol] &gt; y.split(',')[icol]) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     }<br \/>\n<br \/>\n     }<br \/>\n    <br \/> <br \/>\n     newc='';<br \/>\n     if (headrec != '') {<br \/>\n        newc+=headrec + String.fromCharCode(10);<br \/>\n     }<br \/>\n     for (ijk=0; ijk&lt;recsare.length; ijk++) {<br \/>\n        if (recsare[ijk] != headrec) {<br \/>\n        newc+=recsare[ijk] + String.fromCharCode(10);<br \/>\n        }<br \/>\n     }<br \/>\n     \/\/alert(newc);<br \/>\n     rh=newc;<br \/>\n   }<br \/>\n   }<br \/>\n   \/\/alert(rh);<br \/>\n   return rh;<br \/>\n}<br \/>\n<\/code> <\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-------GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-sql-tutorial\/' rel=\"noopener\">Javascript Map Array SQL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmact'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Conditions Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-conditions-tutorial\/' rel=\"noopener\">Javascript Map Array Conditions Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Conditions Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_conditions.gif\" title=\"Javascript Map Array Conditions Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Conditions Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Javascript Map Array Field Tutorial' href='#jmaft'>Javascript Map Array Field Tutorial<\/a> we wanted to extend functionality by starting on a &#8220;more than one day&#8221; project of thinking &#8230;<\/p>\n<ul>\n<li>SQL &#8230; with it&#8217;s &#8230; SELECT &#8230; statements involving &#8230;<\/li>\n<li>FROM &#8230; clause &#8230; representing the input (perhaps) CSV data source &#8230; filtered via &#8230;<\/li>\n<li>WHERE &#8230; clauses, for sure &#8230; and pretty sure we can manage &#8230;<\/li>\n<li>ORDER BY &#8230; record sorting<\/li>\n<\/ul>\n<p> &#8230; people familiar with working with relative databases will understand.<\/p>\n<p>So far we&#8217;re just doing the work to construct the scenario&#8217;s SQL &#8220;pseudo SELECT statement&#8221;.  In doing this, we used a new <i>mapping<\/i> array that could end up looking like &#8230;<\/p>\n<blockquote><p>\n{from: &#8216;2&#8217;, to: &#8216;(Longitude+Latitude) as field2&#8217;}<br \/>\n{from: &#8216;4&#8217;, to: &#8216;name&#8217;}<br \/>\n{from: &#8216;3&#8217;, to: &#8216;longitude&#8217;}<br \/>\n{from: &#8216;2&#8217;, to: &#8216;latitude&#8217;}<br \/>\n{from: &#8216;1&#8217;, to: &#8216;country&#8217;}<br \/>\n{from: &#8216;1&#8217;, to: &#8216;Name&#8217;}<br \/>\n{from: &#8216;2&#8217;, to: &#8216;Quantity&#8217;}\n<\/p><\/blockquote>\n<p> &#8230; where we found building it up via the usual <i>mapping<\/i>.<a target=\"_blank\" title='array.push information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/push' rel=\"noopener\">push<\/a>() we would use to append data was <i>some<\/i> of the story, but it&#8217;s opposite number <i>mapping<\/i>.<a target=\"_blank\" title='array.push information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/unshift' rel=\"noopener\">unshift<\/a>() was really useful to prioritize a changing better <i>to<\/i> member data item into the mix, as the program flow progesses in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html------GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-conditions-tutorial\/' rel=\"noopener\">Javascript Map Array Conditions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmaft'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Field Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-field-tutorial\/' rel=\"noopener\">Javascript Map Array Field Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Field Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_field.gif\" title=\"Javascript Map Array Field Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Field Tutorial<\/p><\/div>\n<p>The way the inhouse Javascript Map Array web application worked as of the day before yesterday&#8217;s <a title='Javascript Map Array Hashtag Tutorial' href='#jmaht'>Javascript Map Array Hashtag Tutorial<\/a> involved &#8230;<\/p>\n<ul>\n<li>a whole of file (or your entered string) processing of CSV data where the first two fields (comma separated) of records became the name,quantity data basis &#8230; but as all Spreadsheet afficianados will tell you, it can be very useful &#8220;to drill down&#8221; into fields (or &#8220;columns&#8221;, in Spreadsheet parlance) &#8230; so &#8230;<\/li>\n<li>as of today&#8217;s work &#8230; well, we&#8217;ll let our <font color=blue>&#8220;blurb&#8221;<\/font>, coming off an H1 tag double click event, to try to explain it &#8230;<br \/>\n<code><br \/>\nvar compositename='';<br \/>\nvar compositequantity='';<br \/>\nvar enterall='';<br \/>\n<br \/>\nfunction anal() {<br \/>\n   enterall=prompt('<font color=blue>Optionally enter a # (hashtag) delimited composite field scenario to apply for next input data (perhaps CSV) file application, such as in examples below.  ' + String.fromCharCode(10) + String.fromCharCode(10) + 'Examples ...' + String.fromCharCode(10) + '#1,3&2&4' + String.fromCharCode(10) + '#4,2*3' + String.fromCharCode(10) + '#1&4,3+2<\/font>', '');<br \/>\n   if (enterall.split('#')[0].indexOf(',') == -1 && enterall.trim() != '' && enterall.indexOf('~`~') == -1) {<br \/>\n      compositename='';<br \/>\n      compositequantity='';<br \/>\n      if (enterall.indexOf('#') != -1) {<br \/>\n        var compstuff=enterall.split('#')[1];<br \/>\n        enterall=enterall.split('#')[0];<br \/>\n        var csfs=compstuff.split(',');<br \/>\n        compositename=csfs[0];<br \/>\n        if (compositename != '') {<br \/>\n          if (eval(('' + compositename).split('&')[0].split('+')[0].split('\/')[0].split('*')[0].split('-')[0].split('%')[0].split('^')[0]) &gt; 1 && eval('' + csfs.length) &lt;= 1) {<br \/>\n            compositequantity='1';<br \/>\n          } else if (eval('' + csfs.length) &gt; 1) {<br \/>\n            compositequantity=csfs[1];<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      enterall='';<br \/>\n   }<br \/>\n   enterall='';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; to allow for some simple mathematical operations (ie. + \/ &#8211; * % ^) of the right hand quantity data item, or concatenation (ie. &#038;) on either left or right (delimited by , comma), as possibilities via user defined field (or &#8220;column&#8221;) numbering system (starting from 1) means.<\/p>\n<p>Applied to our testing with <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country.csv\" rel=\"noopener\">country.csv<\/a> here, we started getting scenarios where the <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> should turn into &#8220;markers mode&#8221;, and the statistical Google Chart Area\/Bar\/Column\/Line Charts would have multiple Y axis items for the &#8220;name&#8221; data item X axis relationship.<\/p>\n<p>More flexibility, we figure, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-----GETME\" rel=\"noopener\">the extensively changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-----GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-javascript-map-array-hashtag-tutorial\/' rel=\"noopener\">Javascript Map Array Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmaht'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Hashtag Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-hashtag-tutorial\/' rel=\"noopener\">Javascript Map Array Hashtag Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Hashtag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_hashtag.gif\" title=\"Javascript Map Array Hashtag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Hashtag Tutorial<\/p><\/div>\n<p>Regular readers will know of our ever increasing fondness, out of webpage navigational ideas &#8230;<\/p>\n<ul>\n<li>form method=GET ? and &#038; delimited argument style URL navigation (suitable for both client and server recipient webpages but apt to cause error 414 due to data size restrictions) &#8230; or &#8230;<\/li>\n<li>form method=POST URL navigation (suitable for server recipient webpages only, but able to handle much more data) &#8230; or &#8230;<\/li>\n<li>hybrid arrangement that is essentially form method=GET ? and &#038; delimited argument style URL navigation (suitable for both client and server recipient webpages) with error 414 avoided by <strong>most<\/strong> data forming the <i>location.hash<\/i> (client understood) hashtagged data<\/li>\n<\/ul>\n<p> &#8230; for the last hashtagging arrangement when the data size precludes the first arrangement, and we see benefits regarding &#8220;a&#8221; &#8220;mailto:&#8221; and\/or &#8220;sms:&#8221; sharing links becoming involved (rather than relying on any PHP server <i>mail<\/i> function calling).<\/p>\n<p>Our <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> interfacing is no exception here, and yes, once we&#8217;ve completed our sweep of Google Chart inhouse functionality interfacers, on top of today&#8217;s &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Google Chart Area Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/areachart' rel=\"noopener\">Area Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php----------------GETME\" title=\"area_chart.php\" target=\"_blank\" rel=\"noopener\">area_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php----------------GETME\" title=\"area_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Bar Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/barchart' rel=\"noopener\">Bar Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php------------------GETME\" title=\"bar_chart.php\" target=\"_blank\" rel=\"noopener\">bar_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php------------------GETME\" title=\"bar_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Column Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/columnchart' rel=\"noopener\">Column Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php-----------------GETME\" title=\"column_chart.php\" target=\"_blank\" rel=\"noopener\">column_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php-----------------GETME\" title=\"column_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" target=\"_blank\" rel=\"noopener\">geo_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Google Histogram Charts' rel=\"noopener\">Histogram Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php------------------GETME\" title=\"histogram_chart.php\" target=\"_blank\" rel=\"noopener\">histogram_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php------------------GETME\" title=\"histogram_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Line Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/linechart' rel=\"noopener\">Line Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php---------------GETME\" title=\"line_chart.php\" target=\"_blank\" rel=\"noopener\">line_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php---------------GETME\" title=\"line_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts' rel=\"noopener\">Pie Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php----------------------------GETME\" title=\"pie_chart.php\" target=\"_blank\" rel=\"noopener\">pie_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php----------------------------GETME\" title=\"pie_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\n<p> &#8230; list we got keen to attend to today, with a <strong>most<\/strong> <font size=1>(when needed)<\/font> strategy &#8230;<\/p>\n<blockquote><p>\nFirst &#8220;data&#8221; label value is method=GET<br \/>\nRest of &#8220;data&#8221; value items are hashtagged\n<\/p><\/blockquote>\n<p> &#8230; (having the benefit that the intervention point is consistent and reliable) on top of yesterday&#8217;s <a title='Javascript Map Array Chart Tutorial' href='#jmact'>Javascript Map Array Chart Tutorial<\/a>, in this regard, as helper outerers for <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html----GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>, we&#8217;ll be able to further genericize Sharing and Collaboration Google Chart interfacing functionality when the amounts of data involved exceed server based (error 414) limits.<\/p>\n<p>Along the way, testing on iOS mobile platforms, we were gobsmacked by the possibility of <i>location.hash<\/i> (ie. # hashtagging) not being recognized, always, at the recipient, and so a failsafe we introduced was to also store hashtagged data in a parent textbox the recipient can reference &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n    if (window.top) {<br \/>\n    if (parent.document.getElementById('lhashis')) {<br \/>\n     if (decodeURIComponent(('' + parent.document.getElementById('lhashis').value)).indexOf(',') != -1) {<br \/>\n      location.hash=parent.document.getElementById('lhashis').value;<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; even before &#8220;recipient document.body onload&#8221; timing, happily, to get around the restrictiveness of this <i>location.hash<\/i> lack of acceptance, at times.<\/p>\n<p>Which brings us to &#8230;<\/p>\n<blockquote><p>\nWhy is <i>Geo Chart<\/i> in that list above?\n<\/p><\/blockquote>\n<p>Well, it&#8217;s a bit unlikely, but it just so happens our best CSV file to hand, around here, contained ISO-3166 2 character country codes with a representative latitude and longitude (as you can see with, the now publicly shared, <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country.csv\" rel=\"noopener\">country.csv<\/a> &#8230; thanks to <a target=\"_blank\" title=\"Google\" href='https:\/\/google.com' rel=\"noopener\">Google<\/a>) and this data is right up the alley of use by the <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> (which you might recall we had a different hashtag arrangement going on already &#8230;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/do_not_trash.jpg\"><\/img><\/p>\n<p> &#8230; believe it or not, never causing any iOS mobile platform issues up to now &#8230; go figure!)<\/p>\n<p>To get this &#8220;sharing of that CSV&#8221; to be any way useful, and illustrative, if you double click the &#8220;topic&#8221; word and get to the Javascript prompt window that follows, we tweak you to this, but if you enter &#8230;<\/p>\n<blockquote><p>\nhttps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country.csv\n<\/p><\/blockquote>\n<p> &#8230; at that prompt window, now, we&#8217;ll attempt an Ajax call of whatever URL you enter to try to glean data content to suit our &#8230;<\/p>\n<blockquote><p>\n<i>label name<\/i> to <i>numerical quantity<\/i> relationship\n<\/p><\/blockquote>\n<p> &#8230; this web application is hankering for.<\/p>\n<p>And there, the amount of data (in size) is far too big for non-hybrid method=GET scenarios, and we need to turn to our new hybrid ideas to proceed with our quest to take over &#8220;Lower Middle Mordor South Lowlands as seen from <a target=\"_blank\" title=\"?\" href='https:\/\/www.google.com\/search?client=safari&#038;rls=en&#038;q=under+mirkwood&#038;ie=UTF-8&#038;oe=UTF-8' rel=\"noopener\">Mirkwood<\/a>&#8220;.<\/p>\n<p>This may all bore, but believe me if you offer users a piece of functionality, they&#8217;ll want to push it to limits, and in that &#8220;push&#8221; could come most of your work, and concern, with regard to a project you are working on, so we figure it is best to cater for this before it is asked for.<\/p>\n<p><strike>Two<\/strike>Three sentences ending in for?  Okay, <a target=\"_blank\" title='Grammarly' href='https:\/\/www.grammarly.com\/' rel=\"noopener\">Grammarly<\/a>, we give up!<\/p>\n<p>Each Google Chart interfacer has individual nuances, but <font color=blue>PHP code changes<\/font> like below &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      <font color=blue>echo ' if (decodeURIComponent((\"\" + location.hash).replace(\/^undefined\/g,\"\")).trim().indexOf(\",\") != -1) { ' . \"\\n\";<br \/>\n      echo ' var xwert=\"data=google.visualization.arrayToDataTable([ [' . \"'\" . $GETlabel . \"','\" . str_replace(\",\", \"','\", str_replace(\"'\", \"\", $GETvalue)) . \"'\" . '],\"; ' . \"\\n\";<br \/>\n      echo \" xwert+=\\\"\" . str_replace(\"~,\", \"',\", str_replace(\"[~\", \"['\", str_replace(\",]\", \",0]\", str_replace(\",,\", \",0,\", str_replace(\",]\", \",0]\", $GETdata))))) . \"\\\" + ('' + location.hash).replace(\/^\\#\/g,'').replace(\/\\%20\/g,'').replace(\/\\,\\]\/g,\\\",0\\\").replace(\/\\[\\~\/g,\\\"['\\\").replace(\/\\~\\,\/g,\\\"',\\\"); \" . \"\\n\";<br \/>\n      echo ' xwert+=\" ])\"; xwert=xwert.replace(\",,\",\",\"); ' . \"\\n\";<br \/>\n      echo ' eval(xwert); ' . \"\\n\";<br \/>\n      echo ' } else { ' . \"\\n\";<\/font><br \/>\n      echo ' data = google.visualization.arrayToDataTable([ ' . \"\\n\";<br \/>\n      echo \" ['\" . $GETlabel . \"','\" . str_replace(\",\", \"','\", str_replace(\"'\", \"\", $GETvalue)) . \"'] \\n\";<br \/>\n      echo str_replace(\"~,\", \"',\", str_replace(\"[~\", \"['\", str_replace(\",]\", \",0]\", str_replace(\",,\", \",0,\", str_replace(\",]\", \",0]\", $GETdata)))));<br \/>\n      echo \"        ]);\\n\";<br \/>\n      <font color=blue>echo \" } \\n\";<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; typify our interventional strategy to make these improvements happen.  Good ol&#8217; <font size=1>(much maligned)<\/font> <i>eval<\/i> &#8230; huh?!  And good ol&#8217; Javascript <i>undefined<\/i> bizzos!  And good ol&#8217; <i>hashtagging<\/i>!   Aaaaaaaaaaal drink to all youse guys and gals <font size=1>(if one might be so forward, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-hashtag-tutorial\/' rel=\"noopener\">Javascript Map Array Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmact'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-chart-tutorial\/' rel=\"noopener\">Javascript Map Array Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_gc.jpg\" title=\"Javascript Map Array Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Chart Tutorial<\/p><\/div>\n<p>Does the data behind yesterday&#8217;s <a title='Javascript Map Array Import Tutorial' href='#jmait'>Javascript Map Array Import Tutorial<\/a> remind you of anything?  Relative database data?  Spreadsheets?<\/p>\n<p>That last one has lots of synergy, we reckon.  And lots of us know, in spreadsheet software products like Microsoft Excel, once a &#8230;<\/p>\n<ul>\n<li>spreadsheet <font size=1>is involved<\/font> &#8230;<\/li>\n<li>charts <font size=1>are often offered as a graphical stand in display (to the tabular looking spreadsheet, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font><\/li>\n<\/ul>\n<p>And in this respect, looking back on our interfacing work to <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Charts<\/a> when you have a <i>label name<\/i> to <i>numerical quantity<\/i> relationship two Google Chart types <font size=1>(we know of)<\/font> are useful &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts' rel=\"noopener\">Pie Chart<\/a> &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Google Histogram Charts' rel=\"noopener\">Histogram Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; and we&#8217;d like to offer some optional interfacing to these <font size=1>(to improve functionality, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font> &#8230; the Javascript for this leaning on the new &#8230;<\/p>\n<p><code><br \/>\n  function datait(oselv) {<br \/>\n    var outv=oselv, kk=0, firstdelim='';<br \/>\n    \/\/alert(outv);<br \/>\n    if (outv != '') {<br \/>\n    if (oselv.indexOf('PHP\/Pie') != -1) {<br \/>\n      document.getElementById('title').value=document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report';<br \/>\n      document.getElementById('popularity').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('task').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('country').value=document.getElementById('thname').innerHTML;<br \/>\n      document.getElementById('desc').value=document.getElementById('thname').innerHTML;<br \/>\n      outv=outv.replace('title=Title', 'title=' + encodeURIComponent(document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report'));<br \/>\n      outv=outv.replace('popularity=Popularity', 'popularity=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('country=Country', 'country=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n      outv=outv.replace('task=Popularity', 'task=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('desc=Country', 'desc=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n<br \/> <br \/>\n      for (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n        if (('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]').indexOf('-') == -1) {<br \/>\n        outv+=',[~' + encodeURIComponent(fruits[kk].name) + ('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]');<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (oselv.indexOf('PHP\/Histogram') != -1) {<br \/>\n      document.getElementById('title').value=document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report';<br \/>\n      document.getElementById('popularity').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('task').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('country').value=document.getElementById('thname').innerHTML;<br \/>\n      document.getElementById('desc').value=document.getElementById('thname').innerHTML;<br \/>\n      outv=outv.replace('title=Title', 'title=' + encodeURIComponent(document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report'));<br \/>\n      outv=outv.replace('popularity=Popularity', 'popularity=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('country=Country', 'country=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n      outv=outv.replace('task=Popularity', 'task=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('desc=Country', 'desc=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n<br \/> <br \/>\n      for (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n        outv+=',[~' + encodeURIComponent(fruits[kk].name) + ('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]');<br \/>\n      }<br \/>\n      \/\/alert(outv);<br \/>\n    } else if (oselv.indexOf('PHP\/Geo') != -1) {<br \/>\n      document.getElementById('title').value=document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report';<br \/>\n      document.getElementById('popularity').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('task').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('country').value=document.getElementById('thname').innerHTML;<br \/>\n      document.getElementById('desc').value=document.getElementById('thname').innerHTML;<br \/>\n      outv=outv.replace('title=Title', 'title=' + encodeURIComponent(document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report'));<br \/>\n      outv=outv.replace('popularity=Popularity', 'popularity=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('country=Country', 'country=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n      outv=outv.replace('task=Popularity', 'task=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('desc=Country', 'desc=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n    <br \/> <br \/>\n      for (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n        outv+=firstdelim + '%20[~' + encodeURIComponent(fruits[kk].name) + ('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]') + '%20';<br \/>\n        firstdelim=',';<br \/>\n      }<br \/>\n      if (('' + outv).length &gt; 600) { return toolong(outv.replace('&data=%20', '&data=%20#')); }<br \/>\n    }<br \/>\n    }<br \/>\n    if (('' + outv).length &gt; 600) {<br \/>\n      document.getElementById('data').value=',' + outv.split('&data=')[1].replace(\/\\%20\/g,' ');<br \/>\n      document.getElementById('myform').method='POST';<br \/>\n      document.getElementById('myform').action=outv.split('?')[0] + '#pleasenolocationhref';<br \/>\n      outv='.\/map_test.html';<br \/>\n      \/\/var xx=prompt(document.getElementById('myform').outerHTML,document.getElementById('myform').innerHTML);<br \/>\n      setTimeout(function(){ document.getElementById('mysub').click(); }, 3000);<br \/>\n    } else if (2 == 2) {<br \/>\n      document.getElementById('data').value=outv.split('&data=')[1].replace(\/\\%20\/g,' ');<br \/>\n      document.getElementById('myform').method='GET';<br \/>\n      document.getElementById('myform').action=outv.split('?')[0];<br \/>\n      \/\/outv='.\/map_test.html';<br \/>\n      setTimeout(function(){ document.getElementById('mysub').click(); }, 3000);<br \/>\n    }<br \/>\n    return outv;<br \/>\n  }<br \/>\n<br \/>\n  function selit(osel) {<br \/>\n    if (osel.value != '') {<br \/>\n       geovalis=osel.value;<br \/>\n       document.getElementById('defopt').innerText='Google Chart display of ... relevant ' + osel.value.split('PHP\/')[1].split('\/')[0].replace('Chart',' Chart') + ' below ...';<br \/>\n       document.getElementById('dif').innerHTML='&lt;br&gt;&lt;br&gt;&lt;a id=atop href=\"#myh1\"&gt;Back to top ...&lt;\/a&gt;&lt;br&gt;&lt;br&gt;&lt;iframe name=myifis id=myifis src=\"' + datait(osel.value) + '\" style=\"width:100%;height:700px;\"&gt;&lt;\/iframe&gt;';<br \/>\n       document.getElementById('dif').style.display='block';<br \/>\n    }<br \/>\n    osel.value='';<br \/>\n    location.href='#atop';<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html---GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html---GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-chart-tutorial\/' rel=\"noopener\">Javascript Map Array Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmait'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Import Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-import-tutorial\/' rel=\"noopener\">Javascript Map Array Import Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Import Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_share.gif\" title=\"Javascript Map Array Import Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Import Tutorial<\/p><\/div>\n<p>Is it &#8230;<\/p>\n<ul>\n<li>the extension of import capabilities &#8230; or &#8230;<\/li>\n<li>the sharing capabilities<\/li>\n<\/ul>\n<p> &#8230; of most interest in today&#8217;s work, extending that of yesterday&#8217;s <a title='Javascript Map Array Genericization Tutorial' href='#jmagt'>Javascript Map Array Genericization Tutorial<\/a>?<\/p>\n<p>Well &#8230;<\/p>\n<ul>\n<li>the extension of import capabilities &#8230;<br \/>\n<code><br \/>\nfunction askall(<font color=blue>preenterall<\/font>) {<br \/>\n   var isfirst=true;<br \/>\n   var delall=false;<br \/>\n   var enterall=('' + preenterall).replace(\/^<font color=blue>undefined<\/font>$\/g,'');<br \/>\n   if (enterall == '') {<br \/>\n   enterall=prompt('Optionally copy all your CSV (comma separated values) data to apply here (where ; or | can be record delimiters).  Optionally prefix this CSV data with your topic followed by ~`~' + String.fromCharCode(10) + String.fromCharCode(10) + 'Example ...' + String.fromCharCode(10) + 'Fish~`~taylor,300;barramundi,400;perch,100;mullet,234', '');<br \/>\n   } \/\/else {<br \/>\n   \/\/alert(enterall);<br \/>\n   \/\/}<br \/>\n   if (enterall == null) {  enterall=''; }<br \/>\n   if (enterall.indexOf('~`~') != -1) {  document.getElementById('topic').innerHTML=enterall.split('~`~')[0];  enterall=enterall.replace(enterall.split('~`~')[0] + '~`~', '');  }<br \/>\n   if (enterall.indexOf(',') != -1) {<br \/>\n     var elines=[];<br \/>\n     if (enterall.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     elines=enterall.split(String.fromCharCode(10));<br \/>\n     } else if (enterall.indexOf(';') != -1) {<br \/>\n     elines=enterall.split(';');<br \/>\n     } else if (enterall.indexOf('|') != -1) {<br \/>\n     elines=enterall.split('|');<br \/>\n     }<br \/>\n     for (var ie=0; ie&lt;elines.length; ie++) {<br \/>\n        if (elines[ie].indexOf('\",\"') != -1 && elines[ie].indexOf('\",\"') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(1);<br \/>\n            addone(elines[ie].split('\",\"')[1].split('\"')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(2);<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf('\",') != -1 && elines[ie].indexOf('\",') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(3);<br \/>\n            addone(elines[ie].split('\",')[1].split(',')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(4);<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",')[1].split(',')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',\"') != -1 && elines[ie].indexOf(',\"') == elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(5);<br \/>\n            addone(elines[ie].split(',\"')[1].split('\"')[0], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(6);<br \/>\n            addone(elines[ie].substring(0).split(',')[0], elines[ie].split(',\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',') != -1) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(7);<br \/>\n            addone(elines[ie].substring(0).split(',')[1], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(8);<br \/>\n            if (isfirst && ((elines[ie].substring(0).split(',')[1] + ' ').replace('-','').substring(0,1) &lt; '0' || (elines[ie].substring(0).split(',')[1] + ' ').replace('-','').substring(0,1) &gt; '9')) {<br \/>\n              document.getElementById('topic').innerHTML=elines[ie].substring(0).split(',')[0].substring(0,1).toUpperCase() + elines[ie].substring(0).split(',')[0].substring(1);<br \/>\n              document.getElementById('thname').innerHTML=elines[ie].substring(0).split(',')[0].substring(0,1).toUpperCase() + elines[ie].substring(0).split(',')[0].substring(1);<br \/>\n              document.getElementById('thquantity').innerHTML=elines[ie].substring(0).split(',')[1].substring(0,1).toUpperCase() + elines[ie].substring(0).split(',')[1].substring(1);<br \/>\n            } else {<br \/>\n              addone(elines[ie].substring(0).split(',')[0], elines[ie].substring(0).split(',')[1]);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        isfirst=false;<br \/>\n     }<br \/>\n     beadjustable();<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\n  function yesthreethree(restis) {<br \/>\n   if (restis.indexOf(';base64,') != -1) {<br \/>\n   var icontent=window.atob(restis.split(';base64,')[1]);<br \/>\n   if ((('' + icontent).trim() + ' ').replace(\/^\\&#091;caption\/g,'&lt;').substring(0,1) == '&lt;') {<br \/>\n   askall(extractContent(icontent,true));<br \/>\n   } else {<br \/>\n   askall(icontent);<br \/>\n   }<br \/>\n   } else {<br \/>\n   askall(restis);<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230;asked for tweaks to <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------GETME' rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side HTML and Javascript inhouse file browsing interfacer showing a &#8220;first time&#8221; scenario, for us with our &#8220;first cab off the rank&#8221; CSV (comma separated values) trial file &#8230;<br \/>\n<code><br \/>\nuser@MacBook-Air htdocs % head -10 country.csv<br \/>\ncountry,latitude,longitude,name \/\/ Thanks to https:\/\/developers.google.com\/public-data\/docs\/canonical\/countries_csv<br \/>\nAD,42.546245,1.601554,Andorra<br \/>\nAE,23.424076,53.847818,United Arab Emirates<br \/>\nAF,33.93911,67.709953,Afghanistan<br \/>\nAG,17.060816,-61.796428,Antigua and Barbuda<br \/>\nAI,18.220554,-63.068615,Anguilla<br \/>\nAL,41.153332,20.168331,Albania<br \/>\nAM,40.069099,45.038189,Armenia<br \/>\nAN,12.226079,-69.060087,Netherlands Antilles<br \/>\nAO,-11.202692,17.873887,Angola<br \/>\nuser@MacBook-Air htdocs %<br \/>\n<\/code><br \/>\n &#8230; which is of interest &#8230; or &#8230;<\/li>\n<li>the sharing capabilities, of the report, where we allow for the usual onclick of an emoji button fed through to &#8220;a&#8221; <i>mailto:<\/i> (email) or <i>sms:<\/i> (SMS) conduits to sharing, and for the first time, for us, a drag and drop way (we thank both <a target=\"_blank\" title='https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp' href='https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp' rel=\"noopener\">https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp<\/a> and <a target=\"_blank\" title='https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp' href='https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp' rel=\"noopener\">https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<\/a> regarding) &#8230;<br \/>\n<code><br \/>\nfunction dragElement(elmnt) { \/\/ thanks to https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp<br \/>\n  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;<br \/>\n  if (document.getElementById(elmnt.id + \"header\")) {<br \/>\n    \/\/ if present, the header is where you move the DIV from:<br \/>\n    document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;<br \/>\n  } else {<br \/>\n    \/\/ otherwise, move the DIV from anywhere inside the DIV:<br \/>\n    elmnt.onmousedown = dragMouseDown;<br \/>\n  }<br \/>\n<br \/>\n  function dragMouseDown(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n    \/\/ get the mouse cursor position at startup:<br \/>\n    pos3 = e.clientX;<br \/>\n    pos4 = e.clientY;<br \/>\n    document.onmouseup = closeDragElement;<br \/>\n    \/\/ call a function whenever the cursor moves:<br \/>\n    document.onmousemove = elementDrag;<br \/>\n  }<br \/>\n<br \/>\n  function elementDrag(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n    \/\/ calculate the new cursor position:<br \/>\n    pos1 = pos3 - e.clientX;<br \/>\n    pos2 = pos4 - e.clientY;<br \/>\n    pos3 = e.clientX;<br \/>\n    pos4 = e.clientY;<br \/>\n    \/\/ set the element's new position:<br \/>\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";<br \/>\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";<br \/>\n    alert('Here');<br \/>\n  }<br \/>\n<br \/>\n  function closeDragElement() {<br \/>\n    \/\/ stop moving when mouse button is released:<br \/>\n    document.onmouseup = null;<br \/>\n    document.onmousemove = null;<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction allowDrop(ev) { \/\/ thanks to https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<br \/>\n  ev.preventDefault();<br \/>\n}<br \/>\n<br \/>\nfunction drag(ev) { \/\/ thanks to https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<br \/>\n  ev.dataTransfer.setData(\"text\", ev.target.id);<br \/>\n}<br \/>\n<br \/>\nfunction doemail(data) {<br \/>\n  var a=null;<br \/>\n  a = document.createElement(\"a\");<br \/>\n  var contis=(document.getElementById('demo').innerText || document.getElementById('demo').contentWindow || document.getElementById('demo').contentDocument);<br \/>\n  var topicis=(document.getElementById('topic').innerText || document.getElementById('topic').contentWindow || document.getElementById('topic').contentDocument);<br \/>\n  var subjis=(document.getElementById('threport').innerText || document.getElementById('threport').contentWindow || document.getElementById('threport').contentDocument);<br \/>\n  a.href='mailto:?subject=' + encodeURIComponent(topicis) + '%20' + encodeURIComponent(subjis) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?tippingvalue=' + moreencodeURIComponent(document.getElementById('itip').value) + '#data=') + encodeURIComponent(encodeURIComponent(contis.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10))));<br \/>\n  a.click();<br \/>\n}<br \/>\n<br \/>\nfunction dosms(data) {<br \/>\n  var a=null;<br \/>\n  a = document.createElement(\"a\");<br \/>\n  var contis=(document.getElementById('demo').innerText || document.getElementById('demo').contentWindow || document.getElementById('demo').contentDocument);<br \/>\n  var topicis=(document.getElementById('topic').innerText || document.getElementById('topic').contentWindow || document.getElementById('topic').contentDocument);<br \/>\n  a.href='sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?tippingvalue=' + moreencodeURIComponent(document.getElementById('itip').value) + '#data=') + encodeURIComponent(encodeURIComponent(contis.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10))));<br \/>\n  a.click();<br \/>\n}<br \/>\n<br \/>\nfunction drop(ev) {  \/\/ thanks to https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<br \/>\n  var ssrect=null, isemail=true, a=null;<br \/>\n  ssrect=document.getElementById('droppable').getBoundingClientRect();<br \/>\n  if (eval(ssrect.right - ev.clientX) &lt; eval(ev.clientX - ssrect.left)) { isemail=false; }<br \/>\n  ev.preventDefault();<br \/>\n  var data = ev.dataTransfer.getData(\"text\");<br \/>\n  if (isemail) {<br \/>\n  \/\/a = document.createElement(\"a\");<br \/>\n  \/\/a.href='mailto:?subject=' + encodeURIComponent(document.getElementById('topic').innerHTML) + '%20Report%20of%20Inventory&body=' + encodeURIComponent(document.getElementById(data).innerHTML.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10)));<br \/>\n  \/\/a.click();<br \/>\n  doemail(data);<br \/>\n  } else if (!isemail) {<br \/>\n  \/\/a = document.createElement(\"a\");<br \/>\n  \/\/a.href='sms:&body=' + encodeURIComponent(document.getElementById(data).innerHTML.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10)));<br \/>\n  \/\/a.click();<br \/>\n  dosms(data);<br \/>\n  } else {<br \/>\n  ev.target.appendChild(document.getElementById(data));<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; where the drop position tells us which &#8220;conduit&#8221; to go with<\/li>\n<\/ul>\n<p> &#8230; and so, both are of some interest, we figure in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html--GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html--GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>In Object Oriented Programming, methods (ie. object functions) can be named similarly with different argument patterns and\/or return values, but now, with three functions in this current project we&#8217;ve coalesced this idea into single calls and used the Javascript <font color=blue><i>undefined<\/i><\/font> return for non-defined arguments as our way to &#8220;keep it brief&#8221; &#8230;<\/p>\n<ul>\n<li>function askall(<font color=blue>preenterall<\/font>) {  }  <font size=1> &#8230; as above<\/font><\/li>\n<li>function alteredstate(indemo<font color=blue>, readd<\/font>) {   }<\/li>\n<li>function addone(<font color=blue>knownname, knownquantity<\/font>) {  }<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-import-tutorial\/' rel=\"noopener\">Javascript Map Array Import Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmagt'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-genericization-tutorial\/' rel=\"noopener\">Javascript Map Array Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_more.gif\" title=\"Javascript Map Array Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Genericization Tutorial<\/p><\/div>\n<p>We think yesterday&#8217;s <a title='Javascript Map Array Primer Tutorial' href='#jmapt'>Javascript Map Array Primer Tutorial<\/a> could benefit from &#8230;<\/p>\n<ul>\n<li>aspects that make the Inventory aspects to the web application feel more like a &#8220;tool&#8221; &#8230;<\/li>\n<li>aspects that make the Inventory aspects to the web application feel more &#8220;generic&#8221;<\/li>\n<\/ul>\n<p> &#8230; and, you may notice, fixes for the way &#8220;Map.groupBy&#8221; functionality does not appear to work on the <font color=blue>mobile platforms<\/font> my iPhone has for web browsers &#8230;<\/p>\n<p><code><br \/>\nvar text=\"\";<br \/>\n<br \/>\nfunction thecall() {<br \/>\nvar kk=0;<br \/>\n<br \/>\n\/\/ Group by ok and low<br \/>\ntext=\"These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are Ok: &lt;br&gt;\";<br \/>\ntry {<br \/>\nconst result = Map.groupBy(fruits, myCallback);<br \/>\n<br \/>\n\/\/ Display Results<br \/>\ntry {<br \/>\nfor (let x of result.get(\"ok\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += \"\" + x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\n} catch(ebad) { }<br \/>\ntext += \"&lt;br&gt;These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are low: &lt;br&gt;\";<br \/>\ntry {<br \/>\nfor (let x of result.get(\"low\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += \"\" + x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\nconsole.log(result.get(\"ok\"));<br \/>\n} catch(ebad) { }<br \/>\n} <font color=blue>catch(overebad) {<br \/>\ntext=\"These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are Ok: &lt;br&gt;\";<br \/>\nfor (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n    if (('' + fruits[kk].quantity).replace('-','').substring(0,1) &gt;= '0' && ('' + fruits[kk].quantity).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n    if (mysimpleCallback(fruits[kk].quantity) == 'ok') {<br \/>\n    \/\/alert(fruits[kk].name);<br \/>\n  text += \"\" + fruits[kk].name + \" \" + fruits[kk].quantity + \"&lt;br&gt;\";<br \/>\n    \/\/alert('2:' + fruits[kk].name);<br \/>\n  if (!m.has(fruits[kk].name)) {<br \/>\n    \/\/alert('3:' + fruits[kk].name);<br \/>\n    m.set(fruits[kk].name, fruits[kk].quantity);<br \/>\n    \/\/alert('4:' + fruits[kk].name);<br \/>\n  }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\ntext += \"&lt;br&gt;These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are low: &lt;br&gt;\";<br \/>\nfor (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n    if (('' + fruits[kk].quantity).replace('-','').substring(0,1) &gt;= '0' && ('' + fruits[kk].quantity).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n    if (mysimpleCallback(fruits[kk].quantity) == 'low') {<br \/>\n  text += \"\" + fruits[kk].name + \" \" + fruits[kk].quantity + \"&lt;br&gt;\";<br \/>\n  if (!m.has(fruits[kk].name)) {<br \/>\n    m.set(fruits[kk].name, fruits[kk].quantity);<br \/>\n  }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\n}<\/font><br \/>\ndocument.getElementById(\"demo\").innerHTML = text;<br \/>\n<br \/>\n}<br \/>\n<\/code><\/p>\n<p>With this in mind, we honed in on a &#8220;topic&#8221; concept, where yesterday&#8217;s &#8220;topic&#8221; would have been &#8220;Fruit&#8221;.  There are two aspects &#8230;<\/p>\n<ol>\n<li>allow a <font color=blue>contenteditable<\/font> way for user to change the displayed (what used to be) <i>hardcoding<\/i> &#8230;<br \/>\n<code><br \/>\n&lt;span title='Double click to be able to enter CSV data' id=topic <font color=blue>contenteditable=true<\/font> onblur=beadjustable(); <font color=purple>ondblclick=askall();<\/font>&gt;<i>Fruit<\/i>&lt;\/span&gt;<br \/>\n<\/code><br \/>\n &#8230; as well as &#8230;<\/li>\n<li>add <font color=purple>ondblclick<\/font> (ie. on double click) means by which a user can use a Javascript prompt window means by which they can enter all the CSV (ie. comma separated values) data for an Inventory application of the user&#8217;s choosing (including a means by which they can also enter the &#8220;topic&#8221; at the same time) &#8230;<br \/>\n<code><br \/>\n<font color=purple>function askall() {<br \/>\n   var delall=false;<br \/>\n   var enterall=prompt('Optionally copy all your CSV (comma separated values) data to apply here (where ; or | can be record delimiters).  Optionally prefix this CSV data with your topic followed by ~`~' + String.fromCharCode(10) + String.fromCharCode(10) + 'Example ...' + String.fromCharCode(10) + 'Fish~`~taylor,300;barramundi,400;perch,100;mullet,234', '');<br \/>\n   if (enterall == null) {  enterall=''; }<br \/>\n   if (enterall.indexOf('~`~') != -1) {  document.getElementById('topic').innerHTML=enterall.split('~`~')[0];  enterall=enterall.replace(enterall.split('~`~')[0] + '~`~', '');  }<br \/>\n   if (enterall.indexOf(',') != -1) {<br \/>\n     var elines=[];<br \/>\n     if (enterall.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     elines=enterall.split(String.fromCharCode(10));<br \/>\n     } else if (enterall.indexOf(';') != -1) {<br \/>\n     elines=enterall.split(';');<br \/>\n     } else if (enterall.indexOf('|') != -1) {<br \/>\n     elines=enterall.split('|');<br \/>\n     }<br \/>\n     for (var ie=0; ie&lt;elines.length; ie++) {<br \/>\n        if (elines[ie].indexOf('\",\"') != -1 && elines[ie].indexOf('\",\"') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].split('\",\"')[1].split('\"')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf('\",') != -1 && elines[ie].indexOf('\",') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].split('\",')[1].split(',')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",')[1].split(',')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',\"') != -1 && elines[ie].indexOf(',\"') == elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].split(',\"')[1].split('\"')[0], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(0).split(',')[0], elines[ie].split(',\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',') != -1) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].substring(0).split(',')[1], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(0).split(',')[0], elines[ie].substring(0).split(',')[1]);<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     beadjustable();<br \/>\n   }<br \/>\n}<\/font><br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-GETME\" rel=\"noopener\">map_test.html &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-genericization-tutorial\/' rel=\"noopener\">Javascript Map Array Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmapt'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-primer-tutorial\/' rel=\"noopener\">Javascript Map Array Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.jpg\" title=\"Javascript Map Array Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got yet another &#8220;map&#8221; idea for you today, coming from the wooooorrrrlllllddd of Javascript clientside data structures, if you like.<\/p>\n<p>We got onto this topic via reading <a target=\"_blank\" title='https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_map_groupby' href='https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_map_groupby' rel=\"noopener\">https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_map_groupby<\/a> and <a target=\"_blank\" title='https:\/\/medium.com\/@sotoer\/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e' href='https:\/\/medium.com\/@sotoer\/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e' rel=\"noopener\">https:\/\/medium.com\/@sotoer\/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e<\/a> which both helped us enormously put together a rudimentary Fruit Inventory web application featuring &#8230;<\/p>\n<ul>\n<li>array with structure<br \/>\n<code><br \/>\n\/\/ Create an Array<br \/>\nconst fruits = [<br \/>\n  {name:\"apples\", quantity:300},<br \/>\n  {name:\"bananas\", quantity:500},<br \/>\n  {name:\"oranges\", quantity:200},<br \/>\n  {name:\"kiwi\", quantity:150}<br \/>\n];<br \/>\n<\/code>\n<\/li>\n<li>map object<br \/>\n<code><br \/>\nvar m = new Map();<br \/>\n<\/code>\n<\/li>\n<li>use of map.set() &#8230;<br \/>\n<code><br \/>\nfunction addone() {<br \/>\n  doadd=true;<br \/>\n  <font color=purple>fruits.push({name:\"\", quantity:0});<\/font><br \/>\n  <font color=blue>m.set('', 0);<\/font><br \/>\n  doadd=false;<br \/>\n  beadjustable();<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and Map.groupBy()<br \/>\n<code><br \/>\nfunction thecall() {<br \/>\n\/\/ Group by ok and low<br \/>\n<font color=blue>const result = Map.groupBy(fruits, myCallback);<\/font><br \/>\n<br \/>\n\/\/ Display Results<br \/>\nlet text =\"These fruits are Ok: &lt;br&gt;\";<br \/>\ntry {<br \/>\nfor (let x of result.get(\"ok\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\n} catch(ebad) { }<br \/>\ntext += \"&lt;br&gt;These fruits are low: &lt;br&gt;\";<br \/>\ntry {<br \/>\nfor (let x of result.get(\"low\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\n} catch(ebad) { }<br \/>\ndocument.getElementById(\"demo\").innerHTML = text;<br \/>\n<br \/>\nconsole.log(result.get(\"ok\"));<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>contenteditable=true<br \/>\n<code><br \/>\nfunction consolelog(inrec) {<br \/>\n   if (rspan == 0) {<br \/>\n   document.getElementById(\"tdname\").innerHTML=inrec.split('value:')[1].split(' key:')[0].split(' map:')[0];<br \/>\n   document.getElementById(\"tdquantity\").innerHTML=inrec.split('key:')[1].split(' value:')[0].split(' map:')[0];<br \/>\n   rspan=1;<br \/>\n   } else if (inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] == '') {<br \/>\n   tabletds+='&lt;tr&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdname' + rspan + ' onblur=fix(this);&gt;' + inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdquantity' + rspan + ' onblur=fix(this);&gt;' +  inrec.split('key:')[1].split(' value:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n   rspan++;<br \/>\n   } else {<br \/>\n   tabletds+='&lt;tr&gt;&lt;td contenteditable=false id=tdname' + rspan + ' onblur=fix(this);&gt;' + inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdquantity' + rspan + ' onblur=fix(this);&gt;' +  inrec.split('key:')[1].split(' value:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n   rspan++;<br \/>\n   }<br \/>\n   \/\/alert(inrec);<br \/>\n   if (doadd) {<br \/>\n   fruits.push({name:\"\", quantity:0});<br \/>\n   m.set('', 0);<br \/>\n   tabletds+='&lt;tr&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdname' + rspan + ' onblur=fix(this);&gt;&lt;\/td&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdquantity' + rspan + ' onblur=fix(this);&gt;0&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n   rspan++;<br \/>\n   doadd=false;<br \/>\n   }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li><font color=purple>array.push()<\/font><\/li>\n<\/ul>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html_GETME\" rel=\"noopener\">map_test.html &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application &#8230;<\/p>\n<p><iframe id=ifmap src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64480' onclick='var dv=document.getElementById(\"d64480\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64480' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64487' onclick='var dv=document.getElementById(\"d64487\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64487' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64494' onclick='var dv=document.getElementById(\"d64494\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/import\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64494' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64510' onclick='var dv=document.getElementById(\"d64510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64517' onclick='var dv=document.getElementById(\"d64517\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64517' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64540' onclick='var dv=document.getElementById(\"d64540\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/field\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64540' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64547' onclick='var dv=document.getElementById(\"d64547\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sql\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64547' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64557' onclick='var dv=document.getElementById(\"d64557\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64557' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Finishing off the SQL work start that yesterday&#8217;s Javascript Map Array Conditions Tutorial represents, today a user can follow the advice &#8230; xenterall=prompt(&#8216;Optionally enter a # (hashtag) delimited composite field scenario to apply for next input data (perhaps CSV) file &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-sql-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,2543,103,130,1993,3531,174,199,230,231,4873,3136,283,290,2522,2276,2147,327,354,364,380,385,3606,399,3103,418,421,431,432,452,471,2537,1839,1619,1533,518,519,4870,3362,2229,557,3961,565,1786,4548,602,2882,1783,631,652,699,2169,739,745,1830,795,830,849,2010,875,2076,3277,944,997,2135,4579,1866,2821,1133,1137,1159,1173,1185,1186,4872,1208,2005,1319,4857,1345,1891,4871,2580],"class_list":["post-64457","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-area-chart","tag-array","tag-bar-chart","tag-browse","tag-browsing","tag-button","tag-chart","tag-column","tag-column-chart","tag-conditions","tag-conduit","tag-csv","tag-data","tag-delimit","tag-delimitation","tag-delimiter","tag-did-you-know","tag-dom","tag-drag-and-drop","tag-email","tag-emoji","tag-emoji-button","tag-eval","tag-field","tag-file","tag-file-browsing","tag-filter","tag-filtering","tag-form","tag-function","tag-generic","tag-genericization","tag-geo-chart","tag-get","tag-google-chart","tag-google-charts","tag-groupby","tag-hardcoding","tag-hash","tag-hashtag","tag-hashtagging","tag-histogram","tag-histogram-chart","tag-hybrid","tag-import","tag-intervention","tag-inventory","tag-iphone","tag-javascript","tag-line-chart","tag-location-hash","tag-mailto","tag-map","tag-method","tag-mobile","tag-navigation","tag-object","tag-object-oriented-programming","tag-oop","tag-order","tag-order-by","tag-pie-chart","tag-programming","tag-push","tag-relationship","tag-select","tag-set","tag-share","tag-sharing","tag-sms","tag-sort","tag-spreadsheet","tag-sql","tag-sql-filter","tag-structure","tag-tool","tag-tutorial","tag-undefined","tag-url","tag-user","tag-user-defined","tag-where"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64457"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=64457"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64457\/revisions"}],"predecessor-version":[{"id":64460,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64457\/revisions\/64460"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=64457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=64457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=64457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}