Arrays in JavaScript - sorting text and numbers in Arrays

Question

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>

Javascript is not the best language for reading in huge amounts of data: where is the data coming from, and are you using Windows™ or Linux ? — Arif Burhan
– Arif Burhan, Commented Mar 2, 2016 at 2:00

vol7ron · Accepted Answer · 2016-06-12 16:34:58Z

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>

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
Create a placeholder object; instead of having two separate arrays, all you need is one object that acts as a dictionary/hash
Iterate over each line
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.
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).
You can then iterate over your array of regions
If the line didn't have a region (it's null, undefined, etc.; often related to having a trailing comma)
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)
Put that value some place on the page; in this case, at the end of the body

bvrakvs · Accepted Answer · 2016-03-02 03:21:36Z

0

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"}

edited Mar 2, 2016 at 3:21

answered Mar 2, 2016 at 1:50

bvrakvs

14.7k4 gold badges55 silver badges96 bronze badges

4 Comments

Oka Over a year ago

Avoid using for...in on arrays, please. You're teaching bad practices.

bvrakvs Over a year ago

@Oka yeah sorry about it, just found out about it. Was using Java for a while, so used to for..in

developer033 Over a year ago

@Oka, is this case, why are for..in loop so bad? According to documentation: "for...in should not be used to iterate over an Array where the index order is important." and the index is not important here, or is it?

Oka Over a year ago

@developer033 If the data is pre-sorted, and expected as such, then it could be an issue. Also, it iterates on all enumerable properties - including those in the prototype chain. So, if someone includes a lazy prototype shim, you'll get that as well. In general, for...in on arrays is just a bad practice - one that can be avoided by teaching the right way to do things - by using a regular for loop, Array.prototype.forEach, or even for...of in ES6.

Collectives™ on Stack Overflow

Arrays in JavaScript - sorting text and numbers in Arrays

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related