CODEWITHSUNDEEP
javascriptarrays
Abdul Maajid
Abdul Maajid

Reputation: 11

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>

Upvotes: 0

Views: 197

Answers (2)

vol7ron
vol7ron

Reputation: 42109

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

Upvotes: 1

bur&#230;quete
bur&#230;quete

Reputation: 14688

First split the given text with , (comma & space together)

Then use the following regex to separate each member of this splitted array into two arrays; /([\w\s]+\w)\s+([\d]+)/ first capture will be for region, and second capture for the ASBO array.

I hope this will be helpful.

var str = "Avon and Somerset 559, Bedfordshire 220"
var splitArr = str.split(", ");
for (var i = 0; i < splitArr.length; i++) {
   var matched = splitArr[i].match(/([\w\s]+\w)\s+([\d]+)/);
   region.push(matched[1]);
   asbo.push(matched[2]);
}

will result in;

region = {"Avon and Somerset", "Bedfordshire"}
asbo = {"559", "220"}

Upvotes: 0

Related Questions