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}];
functioncheckArray(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.
functioncheckArray(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.
functionResult(guesses) {
for (var i = 0; i< guesses.length; ++i) {
this[guesses[i]] = '';
}
}
functioncheckDraw(guesses, draw, results) {
for (var i = 0; i< guesses.length; ++i) {
if (draw.picks[guesses[i]]) {
results[guesses[i]] = 'picked';
}
}
return results;
}
functionappendTo(elt, parent) {
if (parent) {
document.getElementById(parent).appendChild(elt);
} else {
document.body.appendChild(elt);
}
}
functionprintResults(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);
}
functionprintResultsFor(name, draws, parent) {
var player = players[name];
var results = newResult(player);
for (var i=0; i<draws.length; ++i) {
checkDraw(player, draws[i], results);
}
printResults(name, results, parent);
}
functionprintDraw(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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><styletype="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, #DrawsH3 {
margin-bottom: 0;
}
</style><scripttype="text/javascript"src="lotto.js"></script></head><body><divid="Results"></div><divid="Draws"></div><scripttype="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 falsewhereas:
x == "5" // yield **true**
=== is like saying "is exactly equal to" (by value and type)
x === 5 // yield truex === "5" // yield falseSolution 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:
<scriptlanguage="javascript">// then call like thischeckValues(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"]];
varPlayers = ["John", "Michael"];
//Add a new player:Players[2] = "Adam";
a[2] = ["9","3","7","12","23", "37", "40", "45", "24"];
functioncheckArray(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];
}
}
}
}
functiondisplayNumbers(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:
<bodyonload="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
functioncheckArray(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];
}
}
}
}
functiondisplayNumbers(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 thischeckArray(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 playerfor(var k = 0; k < Players.length; k++)
{
// compare his numbers with each drawfor(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"