Abdul Maajid Abdul Maajid - 5 months ago 11
Javascript Question

Arrays in JavaScript - sorting text and numbers in Arrays

I want to populate 2 arrays that I have which are called 'regions' and 'asbos'. I want to do this using a list of the following data of ASBOs record in each Criminal Justice System area:

Avon and Somerset 559,
Bedfordshire 220,
Cambridgeshire 285,
Cheshire 387,
Cleveland 489,
Cumbria 275,
Derbyshire 319,
Devon and Cornwall 473,
Dorset 197,
Essex 361,


I also wanted to create a
loop
for each region, giving it a particular
font size
that depends on the number of ASBOs and then store that formatted text in the 'tempText variable' as follows:

tempText += "<span style='font-size:" + asbos[i]/14 + "px';>" + regions[i] + "</span> ";


This is what I have so far in my
HTML
file:

<!DOCTYPE html>
<html>
<head>
<title>Javascript_Arrays</title>
</head>
<body>
<div id="wordCloud"></div>

<script>
//asbo word Cloud Generator
var regions = [];
var asbos = [];
var tempText = "";

// add loop here to create text for printing
document.getElementById("wordCloud").innerHTML = tempText;
</script>
</body>
</html>

Answer

var $body         = $('body'),
    regions_asbos = $('#inputs').text().split(/,\s*/gm), // <== 1
    asbos         = {};                                  // <== 2

regions_asbos.forEach(function(line){                    // <== 3
  asbos[ line.replace(/(\d+)/,'').trim() ] = RegExp.$1;  // <== 4
});

var regions = Object.keys(asbos);                        // <== 5
regions.forEach(function(region){                        // <== 6
  if (!region)                                           // <== 7
    return;

  var $span = $('<span></span>',{                        // <== 8
    'style': 'font-size: ' + asbos[region]/14 + 'px',
    'text':  region
  });
  
  $body.append($span);                                   // <== 9
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Inputs</h4>
<pre id="inputs">Avon and Somerset    559,
Bedfordshire         220,
Cambridgeshire       285,
Cheshire             387,
Cleveland            489,
Cumbria              275,
Derbyshire           319, 
Devon and Cornwall   473,
Dorset               197,
Essex                361,
</pre>

  1. Get the text of your input (I put it in a pre) and split them up into an array, treating a comma and any whitespace (newline,etc) as a delimiter; this creates an array for each line or region/asbos association
  2. Create a placeholder object; instead of having two separate arrays, all you need is one object that acts as a dictionary/hash
  3. Iterate over each line
  4. Use regex to capture the numbers (held in RegExp.$1) of the line (assuming your regions don't have numbers in their name) and replace those numbers with a blank string; this leaves the line with only the region name and a bunch of white text. You can then trim off the whitespace and use the region name as the key of your dictionary/hash/object and assign it that number value you captured earlier.
  5. You can use the Object.keys() class function to get all the user-defined properties of your object and store it in an array (this is your regions).
  6. You can then iterate over your array of regions
  7. If the line didn't have a region (it's null, undefined, etc.; often related to having a trailing comma)
  8. Create the span (or whatever element) that you will post on the page; notice the use of asbos[region], where region is a variable (one of the regions of your input)
  9. Put that value some place on the page; in this case, at the end of the body
Comments