Compare Array In Javascript
Solution 1:
In addition to rewriting the code (refactoring) so the array comparison into a function as Miky D did, you can make the comparison more efficient by using an object to hold the winning numbers. Note that this code isn't the final version; there are further refinements.
var guesses = [["2","3","8","12","23", "37", "41", "45", "48"],
["2","14","3","12","24", "37", "41", "46", "48"]];
var draws = [ {2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1},
{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}];
function checkArray(guesses, draw) {
for (var i = 0; i< guesses.length; ++i) {
if (draw[guesses[i]]) {
guesses[i] = 'g' + guesses[i];
}
}
}
checkArray(guesses[0], draws[1]);
By turning the winning numbers into the indices rather than the values, you can get rid of a loop. Also, 'a' and 'b' aren't very descriptive names. Short names gain you nothing but obfuscation.
By marking successful and successful guesses differently (currently, you prepend 'g' to successes), you can also simplify the code to display the results. The <font> tag has been deprecated for awhile, so this refinement uses <span>s with a class that you can style.
function checkArray(guesses, draw) {
var results = {}
for (var i = 0; i< guesses.length; ++i) {
if (draw.picks[guesses[i]]) {
results[guesses[i]] = 'win';
} else {
results[guesses[i]] = 'loss';
}
}
return results;
}
...
document.write('<span class="name">John</span>');
var results = checkArray(guesses[0], draws[1]);
for (var p in results) {
document.write('<span class="'+results[i]+'">'+p+'</span>');
}
Since document.write is also deprecated, I'll replace it with the modern equivalents, document.createElement and Node.appendChild. If you think the resulting code is too verbose, you can instead use innerHTML, though its use is controversial. Since player names are closely tied to player picks, I'll also index the player picks by player name.
Put the following in a file named "lotto.js" in the same folder as the web page.
function Result(guesses) {
for (var i = 0; i< guesses.length; ++i) {
this[guesses[i]] = '';
}
}
function checkDraw(guesses, draw, results) {
for (var i = 0; i< guesses.length; ++i) {
if (draw.picks[guesses[i]]) {
results[guesses[i]] = 'picked';
}
}
return results;
}
function appendTo(elt, parent) {
if (parent) {
document.getElementById(parent).appendChild(elt);
} else {
document.body.appendChild(elt);
}
}
function printResults(name, results, parent) {
var resultElt = document.createElement('div');
resultElt.appendChild(document.createElement('span'));
resultElt.firstChild.appendChild(document.createTextNode(name));
resultElt.firstChild.className='name';
var picks = document.createElement('ol');
picks.className='picks';
for (var p in results) {
picks.appendChild(document.createElement('li'));
picks.lastChild.appendChild(document.createTextNode(p));
picks.lastChild.className = results[p];
}
resultElt.appendChild(picks);
appendTo(resultElt, parent);
}
function printResultsFor(name, draws, parent) {
var player = players[name];
var results = new Result(player);
for (var i=0; i<draws.length; ++i) {
checkDraw(player, draws[i], results);
}
printResults(name, results, parent);
}
function printDraw(which, draw, parent) {
var drawElt = document.createElement('div');
drawElt.className='draw';
drawElt.appendChild(document.createElement('h3'));
drawElt.lastChild.appendChild(document.createTextNode('Draw '+which));
drawElt.lastChild.className='drawNum';
drawElt.appendChild(document.createElement('div'));
drawElt.lastChild.className='date';
drawElt.lastChild.appendChild(document.createTextNode(draw.when));
var picks = document.createElement('ol');
picks.className='picks';
for (var p in draw.picks) {
picks.appendChild(document.createElement('li'));
picks.lastChild.appendChild(document.createTextNode(p));
}
drawElt.appendChild(picks);
appendTo(drawElt, parent);
}
Here's the corresponding HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
background-color: #333;
}
.picks, .picks * {
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
.picks * {
margin: auto 0.25em;
}
#Results .picks * { color: red; }
.name, .picks .name {
color: white;
font-weight: bold;
margin-right: 0.5em;
}
#Results .picked { color: lime; }
.drawNum, #Draws H3 {
margin-bottom: 0;
}
</style>
<script type="text/javascript" src="lotto.js"></script>
</head>
<body>
<div id="Results"></div>
<div id="Draws"></div>
<script type="text/javascript">
var players = {John: [2, 3, 8, 12, 23, 37, 41, 45, 48],
Michael: [2, 14, 3, 12, 24, 37, 41, 46, 48]};
var draws = [ {when: 'Sat 08-08-2009',
picks:{2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1}},
{when: 'Sat 15-08-2009',
picks:{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}}];
for (name in players) {
printResultsFor(name, draws, 'Results');
}
for (var i=0; i<draws.length; ++i) {
printDraw(i+1, draws[i]);
}
</script>
</body>
</html>
You can refine the CSS to get the exact styling you want. The code could be further refactored to use OOP, which would simplify creating new players and draws, but it's more involved so I won't go in to it here.
Update: The above code was rewritten so that each player's guesses is compared to every draw. The live sample version of the code has been refactored almost beyond recognition to use OOP. It also uses features you probably haven't seen before, such as JS closures, higher order functions and CSS generated content and counters. It's longer and harder to understand but more flexible and a little easier to use.
Solution 2:
you should use === as comparison operator
For example let x = 5:
x == 8 // yield false
whereas:
x == "5" // yield **true**
=== is like saying "is exactly equal to" (by value and type)
x === 5 // yield true
x === "5" // yield false
Solution 3:
I looks very nice thank you! I'm not sure if I did it correctly, but this is what I have. But it doesn't work in FireFox.
head section:
<script language="javascript">
// then call like this
checkValues(a1, b1);
var a = [["2","3","8","12","23", "37", "41", "45", "48"],
["2","14","3","12","24", "37", "41", "46", "48"]];
var b = [["2","5", "11","16","23","45", "46"],
["1","23", "11","14","23","42", "46"]];
var Players = ["John", "Michael"];
//Add a new player:
Players[2] = "Adam";
a[2] = ["9","3","7","12","23", "37", "40", "45", "24"];
function checkArray(myValues, winningValues)
{
for (var i = 0; i< myValues.length; i++)
{
for (var j = 0; j< winningValues.length; j++)
{
if (myValues[i] == winningValues[j])
{
myValues[i] = "g"+ myValues[i];
}
}
}
}
function displayNumbers(playerName, myNumbers)
{
document.write("<font color = '#FFFFFF'>" + "<b>" + playerName + "    " + "</b></font>");
for (var i = 0; i< myNumbers.length; i++)
{
if (myNumbers[i].substr(0,1) == "g")
{
myNumbers[i] = myNumbers[i].substr(1,20);
document.write("<font color = '#00FF00'>", myNumbers[i] + "</font>    ");
}
else
{
document.write("<font color = '#FF0000'>", myNumbers[i] + "</font>    ");
}
}
}
</script>
body section:
<body onload="checkValues(a1, b1);">
Solution 4:
Here's a few things that I noticed:
- you could use array's of arrays to store the number picks and the winning numbers
- you could really create some functions to do the repeated work
- the HTML code that you render from your JS is not properly formed
Use functions to perform repeated code
function checkArray(myValues, winningValues)
{
for (var i = 0; i< myValues.length; i++)
{
for (var j = 0; j< winningValues.length; j++)
{
if (myValues[i] == winningValues[j])
{
myValues[i] = "g"+ myValues[i];
}
}
}
}
function displayNumbers(playerName, myNumbers)
{
document.write("<font color = '#FFFFFF'>" + "<b>" + playerName + "    " + "</b></font>");
for (var i = 0; i< myNumbers.length; i++)
{
if (myNumbers[i].substr(0,1) == "g")
{
myNumbers[i] = myNumbers[i].substr(1,20);
document.write("<font color = '#00FF00'>", myNumbers[i] + "</font>    ");
}
else
{
document.write("<font color = '#FF0000'>", myNumbers[i] + "</font>    ");
}
}
}
// then call like this
checkArray(a1, b1);
Use arrays of arrays to store your numbers and the winning numbers
var a = [["2","3","8","12","23", "37", "41", "45", "48"],
["2","14","3","12","24", "37", "41", "46", "48"]];
var b = [["2","5", "11","16","23","45", "46"],
["1","23", "11","14","23","42", "46"]];
var Players = ["John", "Michael"];
//Now you can do this:
// for each player
for(var k = 0; k < Players.length; k++)
{
// compare his numbers with each draw
for(var c = 0; c < b.length; c++)
{
checkArray(a[k], b[c]);
displayNumbers(Players[k], a[k]);
}
}
And adding a new player is as easy as
var a = [["2","3","8","12","23", "37", "41", "45", "48"],
["2","14","3","12","24", "37", "41", "46", "48"]];
var b = [["2","5", "11","16","23","45", "46"],
["1","23", "11","14","23","42", "46"]];
var Players = ["John", "Michael"];
//Add a new player:
Players[2] = "Adam";
a[2] = ["9","3","7","12","23", "37", "40", "45", "24"];
Of course you don't have to add people and draws at the same time..
Post a Comment for "Compare Array In Javascript"