Having an issue creating objects in JavaScript.
Trying to create a deck of playing cards which I can then display however I want. I am good with the HTML stuff to display them, just having an issue understanding what I am doing wrong in the JavaScript which is only creating undefined cards for me.
(function () {
function Card (rank, suit) {
this.rank = rank;
this.suit = suit;
};
function Deck() {
this.deck = new Array();
this.makeDeck = makeDeck;
this.shuffle = shuffle;
this.deal = deal;
}
function makeDeck() {
var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10",
"J", "Q", "K");
var suits = new Array("Clubs", "Diamonds", "Hears", "Spades");
this.deck = new Array(52);
var i, j;
for (i = 0; i < suits.length; i++) {
for (j = 0; j < ranks.length; j++) {
this.deck[i*ranks.length + j] = new Card(ranks[j], suits[i]);
document.write("Card made \n");
}
}
};
function shuffle() {
var i, n, j, temp;
for (i = 0; i < n; i++) {
for (j = 0; j < this.deck.length; j++) {
k = Math.floor(Math.random() * this.deck.length);
temp = this.deck[j];
this.deck[j] = this.deck[k];
this.deck[k] = temp;
}
}
document.write("Cards Shuffled");
};
function deal() {
if (this.deck.length > 0) {
return this.deck.shift();
}
else return null;
};
var deck = new Deck();
deck.makeDeck();
deck.shuffle();
for (i = 0; i < 2; i++) {
for (j = 0; j < 5; j++) {
var Card = new Card(deck.deal);
var c = JSON.stringify(Card);
document.write(this.deck[j]);
}
}
} ());
This is the problematic line :
this.deck = new Card(ranks[j], suits[i]);
this.deck is supposed to be the array that includes all your cards, but with the above line, you're overriding it everytime with the single new card.
You have 2 options :
First option
Instead of this.deck = new Array(52), use this.deck = [] instead, initializing an empty array to this.deck.
Then use this.deck.push(new Card(ranks[j], suits[i])) to push all the combinations of the cards to your deck.
Second option
The problem with the first option is that array.push is not really efficient. Read this for more info. It wouldn't really matter for a 52-sized array, just putting this on the table for everyone's info.
Alternatively, you could use this.deck[i] = new Card(ranks[j], suits[i]) to populate your array. You could use this.deck = [] or this.deck = new Array(52) for this. Either would work.
In your "main" execution part :
var deck = new Deck();
deck.makeDeck();
deck.shuffle();
for (i = 0; i < 2; i++) {
for (j = 0; j < 5; j++) {
var Card = new Card(deck.deal);
var c = JSON.stringify(Card);
document.write(this.deck[j]);
}
}
There are several things worth noting.
Change var Card from var Card = new Card(deck.deal);, as the variable Card overrides the function Card after the first iteration.
deck.deal is a function. What you need is deck.deal's return value, therefore, you must use deck.deal()
document.write(this.deck[j]); - You should use deck.deck[j] instead, because what you need to access is the deck you initialized in var deck, and to access the actual deck of cards, you need to access the deck property of the object deck. Therefore, you need to use deck.deck[j]
I am no expert in JS but one thing that rings to me is in your for cycle the deck assignment this.deck = new Card(ranks[j], suits[i]); shouldn't it also be indexed as you create the cards as in:
for (i = 0; i < suits.length; i++) {
for (j = 0; j < ranks.length; j++) {
this.deck[ranks.length*i+j] = new Card(ranks[j], suits[i]);
}
}
Probably that is why you do not have the deck you wished to form
Related
I am trying to debug the code below.
It is supposed to create a 2d-array, with all of the permutations of the input string.
It starts off great, and the initial string is pushed to the array, but after I run the reverse function in step 4, the value in strArr changes from having a length of 3 to a length of 2. basically like it is skipping the concat in the reverse function, but when I ran it in the debugger, z has a length of 3 after the concat, but then when the function returns it, the length becomes 2 again.
any help would be appreciated.
function permAlone(str) {
var perms = [];
var totalPerms = factorial(str.length);
var strCodes = converter(str);
var strArr = [];
strArr.push(strCodes);
// overall loop
for (var X = 0; X < totalPerms; X++) {
//step 1
var largestI = -1;
for (var i = 0; i < strCodes.length - 1; i++) {
if (strCodes[i] < strCodes[i + 1]) {
largestI = i;
}
}
//if none found break loop
if (largestI == -1) {
break;
}
//step 2
var largestJ = -1;
for (var j = 0; j < strCodes.length; j++) {
if (strCodes[largestI] < strCodes[j]) {
largestJ = j;
}
}
//step 3
swap(strCodes, largestI, largestJ);
//step 4
strCodes = reverse(strCodes, largestI);
//step 5 push to array
strArr.push(strCodes);
}
console.log(strArr);
return strArr;
}
function factorial(x) {
for (var i = x - 1; i > 0; i--) {
x *= i;
}
return x;
}
function converter(x) {
var temp = [];
for (var i = 0; i < x.length; i++) {
temp.push(x.charCodeAt(i));
}
return temp;
}
function swap(a, i, j) {
var temp = a[i];
a[i] = a[j];
a[j] = temp;
}
function reverse(z, a) {
var endArr = z.splice(a+1);
endArr.reverse();
z = z.concat(endArr);
return z;
}
debugger;
permAlone('abc');
The reverse function returns a new array and does not manipulate the existing. You need to change your code to the following:
endArr = endArr.reverse();
It looks like it was an issue with having a shallow copy of the array.
I added z = z.slice(); to the reverse function and it fixed the issue.
What I'm working on is a menu that auto updates its entries based on an array length. It adds groups of 10 objects' properties (in this case "IDnumbers") to the menu if a new object is added to the array.
var arraysOfObject = [], obj = {"IDNumber": ""};
for(i = 0; i<42; i++){
arraysOfObject.push({"IDNumber": "Number " + i});}
Above is the array holding 42 objects with a specific property.
var array2 = [];
var leftOver = arraysOfObject.length % 10;
var groupsOfTen = (arraysOfObject.length - leftOver)/10;
for (var i = 0; i < groupsOfTen; i++) {
array2.push([]);
for (var j = i*10; j < i*10 + 10; j++)
array2[i].push(arraysOfObject[j]["IDNumber"]);
}
//now the leftover
if (leftOver > 0) {
array2.push([]);
for (var i = groupsOfTen*10; i < arraysOfObject.length; i++)
array2[array2.length-1].push(arraysOfObject[i]["IDNumber"]);
}
The array2 above is the array that stores all the possible arrays that can be grouped by 10 from arraysOfObject. In this case there are 5 inside of it, because 4 arrays holds 40 objects, and 1 array holds the 2 remainders.
That all works fine, but placing the array2 inside the menu displays all possible IDnumbers grouped together, but not grouped individually. I have to declare each possible array inside of it like so sets = [array2[0], array2[1], array2[2], array2[3], array2[4]]; If there's a 6th possible array because object #51 has been added to arraysOfObject, I have to input it with array2[5].
I don't want it to depend on my input, but that it knows the number of possible arrays and that it displays it automatically in sets. How do I do that?
var gui = new dat.GUI();
var guiData = function() {
this.message = "Dat.Gui menu";
this.system = 0;
this.Sets = 0;
};
var data = new guiData();
sets = [array2[0], array2[1], array2[2], array2[3], array2[4], array2[5]];
gui.add(data, 'message', 'Dat.Gui Menu!');
gui.add(data, 'system', {
"1": 0,
"2": 1,
"3": 2,
"4": 3,
"5": 4,
"6": 5,
}).name('system #').onChange(function(value) {
updateSets(value);
});
gui.add(data, 'Sets', sets[0]).onChange();
function updateSets(id) {
var controller = gui.__controllers[2];
controller.remove();
gui.add(data, 'Sets', sets[id]).onChange();
data.Sets = 0;
gui.__controllers[2].updateDisplay();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>
<script>
var arraysOfObject = [], obj = {"IDNumber": ""};
for(i = 0; i<42; i++){
arraysOfObject.push({"IDNumber": "Number " + i});}
var array2 = [];
var leftOver = arraysOfObject.length % 10;
var groupsOfTen = (arraysOfObject.length - leftOver)/10;
for (var i = 0; i < groupsOfTen; i++) {
array2.push([]);
for (var j = i*10; j < i*10 + 10; j++)
array2[i].push(arraysOfObject[j]["IDNumber"]);
}
//now take care of the leftover
if (leftOver > 0) {
array2.push([]);
for (var i = groupsOfTen*10; i < arraysOfObject.length; i++)
array2[array2.length-1].push(arraysOfObject[i]["IDNumber"]);
}
</script>
Not the issue at hand, but I was playing around with the dat.gui as you posted it and was wondering if the dropdown could be refilled without removing/adding/etc. It seems to work with .options. (NB The initialization code makes heavy use of ES6, but can work without. The system menu is created dynamically from the sets array)
let arraysOfObject =Array.from({length:42}, (o,i) => "Number " + i),
ch =10, sets = Array.from({length:Math.ceil(arraysOfObject.length/ch)}, (a,i) => arraysOfObject.slice(i*=ch, i+ch));
var gui = new dat.GUI();
var guiData = function() {
this.message = "Dat.Gui menu";
this.system = 0;
this.Sets = 0;
};
var data = new guiData();
gui.add(data, 'message', 'Dat.Gui Menu!');
gui.add(data, 'system', sets.reduce((obj,s,i) => (obj[i+1] = i, obj), {})).name('system #').onChange(updateSets);
let controller = gui.add(data, 'Sets');
updateSets(0);
function updateSets(id) {
controller = controller.options(sets[data.Sets = id]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>
I think the easiest solution would be to use ES2015's spread operator which I don't know if you would want to use yet...
ES2015 method (demo)
sets = [...array2];
There are a few other changes in the demo to set the system variable
But after taking a closer look, you can optimize the code by using the method from this SO answer to chunk your array using slice(). Also, I'm not sure why an object was used to create array entries when it just ends up as a string... demo
var arraysOfObject = [],
system = {},
chunk = 10,
size = 92;
for (var i = 0; i < size; i++) {
arraysOfObject.push("Number " + i);
}
var sets = [];
var index = 0;
for (i = 0; i < size; i += chunk) {
sets.push(arraysOfObject.slice(i, i + chunk));
system[index + 1] = index++;
}
var gui = new dat.GUI();
var guiData = function() {
this.message = "Dat.Gui menu";
this.system = 0;
this.Sets = 0;
};
var data = new guiData();
gui.add(data, 'message', 'Dat.Gui Menu!');
gui
.add(data, 'system', system)
.name('system #')
.onChange(function(value) {
updateSets(value);
});
gui.add(data, 'Sets', sets[0]).onChange();
function updateSets(id) {
var controller = gui.__controllers[2];
controller.remove();
gui.add(data, 'Sets', sets[id]).onChange();
data.Sets = 0;
gui.__controllers[2].updateDisplay();
}
Here is my JavaScript that displays a list of people and images beside them; and if the name is Jim than display also the list of products. But for some reasons the loop stops after Jim and his list:
window.onload = function append() {
var i = 0;
while (i < 4) {
console.log(i);
if (people[i] === "Jim") {
app("div", people[i]);
var arr = document.createElement("ul");
for (i = 0; i < Jim_list.length; i++) {
var tt = opp("li", Jim_list[i]);
arr.appendChild(tt);
}
document.body.appendChild(arr);
} else {
app("div", people[i]);
}
var create_i = document.createElement("img");
create_i.src = "http://tattmight.com/albums/userpics/2013y/08/25/1/178/dsfaf.jpg";
create_i.style.width = "10%";
document.body.appendChild(create_i);
document.write("<br/>");
i++;
console.log("end");
}
}();
Your nested loop uses the same counter as the outer loop. Change it to a new variable:
for (var j = 0, jlen = Jim_list.length; j < jlen; j++) {
var tt = opp("li", Jim_list[j]);
arr.appendChild(tt);
}
I want to write a function that takes an array such as:
var columns = ['distance', 'times', 'acceleration']
Then from this array, I want to generate something like this:
[{id: id_0, distance: 0, times: 0, acceleration: 0}, {id: id_1, distance: 1, times: 1, acceleration: 1}]
Notice that we have 2 objects here, but I want it to be whatever number I pass in to my parameter. Here is what I have:
generateData: function(rows, columns) {
var generatedData = [];
for (var i = 0, rowLen = rows.length; i < rowLen; i++) {
for (var n = 0; i < columns.length; n++) {
// not sure how to construct an object here from looping through my columns array
generatedData.push({
id: 'id_ + n',
// confused here
});
}
return generatedData;
}
}
This is the perfect place to dynamically create your own function. Try this:
function createArrayOfObjects(columns, count) {
var objectProps = new Array(columns.length);
for (var i = 0; i < columns.length; i++){
//":j" will be the variable j inside the dynamic function
objectProps[i] = columns[i] + ":j";
}
var funcBody = "var arr = new Array(count);" +
"for(var j = 0; j < count; j++){" +
"arr[j] = {" + objectProps.join(',') + "};" +
"}" +
"return arr;";
//Create a new function and call it with count as the parameter, returning the results
return new Function("count", funcBody)(count);
}
var count = 10;
var columns = ['distance', 'times', 'acceleration'];
createArrayOfObjects(columns.concat('id'), count);
This has the benefit of only having to loop over the columns array once where other solutions require nested loops.
JSPerf
I am giving you away the initial non-optimized solution. Its upto you to do the optimizations.
generateData: function(rows, columns) {
var generatedData = [];
for (var i = 0; i < rows.length; i++) {
var myObj = {};
myObj["id_" + i] = i;
for (var n = 0; n < columns.length; n++) {
myObj[columns[n]] = i;
}
generatedData.push(myObj);
}
return generatedData;
}
A functional approach that will take the object properties from the passed in array, instead of hard-coding them, might look something like this inside the for loop to populate an array named 'rows' with property names coming from the values of an array named 'cols':
cols.forEach(function(cv, ci, ca) { rows[ri][cv] = ri; });
See the snippet for a full example. Note that, in this example, I'm just shoving the current index of "rows" into the object as the property value.
var columns = ['distance', 'times', 'acceleration'];
function generateData(numRows, cols) {
rows = new Array(numRows);
for(ri=0; ri < rows.length; ri++) {
rows[ri] = { id: ri };
cols.forEach(function(cv, ci, ca) {
rows[ri][cv] = ri;
});
}
return rows;
}
data = generateData(5, columns);
console.log(data);
I am new to js and trying to sort an array of objects by two fields - starting with the first property, and then by the second property. Both properties are numbers.
The data is:
var homes = [{
"h_id": "3",
"minimumorder": "12",
"price": "17"
}, {
"h_id": "4",
"minimumorder": "1",
"price": "20"
}, {
"h_id": "5",
"minimumorder": "1",
"price": "18.10"
}
There are more objects in the array, this is a simplified example. The below code ALMOST gets me there, but for the minimumorder property it puts 12 after 1 instead of after 6:
cmp = function(a, b) {
parseFloat(a);
parseFloat(b);
if (a > b) return +1;
if (a < b) return -1;
return 0;
}
homes.sort(function(a, b) {
return cmp(a.minimumorder,b.minimumorder) || cmp(a.price,b.price)
})
jsFiddle here.
Any help would be HUGELY appreciated, as I've been googling and tinkering for hours trying to figure this out.
You need to reassign the parsed value back to a and b:
a = parseFloat(a);
b = parseFloat(b);
Otherwise it ends up comparing strings, and 12 occurs after 1 lexically, just like the word at comes after a in the dictionary.
Updated fiddle.
Well,
You should use a code like this:
function sortHomes(homes)
{
var temp_homes = new Array();
var new_homes = new Array();
for(var i = 0; i < homes.length; i++) temp_homes[i] = homes[i];
var maximum = 0, minimum;
for(i = 0; i < temp_homes.length; i++) maximum = Math.max(maximum, temp_homes.minimumorder);
var min_price, j, k, indexes, price_indexes;
for(i = 0; i < temp_homes.length; i++){
minimum = maximum;
for(j = 0; j < temp_homes.length; j++){
minimum = Math.min(minimum, temp_homes[j].minimumorder);
}
indexes = getIndexes(temp_homes, minimum, "minimumorder");
if(indexes.length == 1){
new_homes.push(temp_homes[indexes[0]]);
temp_homes[indexes[0]].minimumorder = maximum + 1;
}
else{
for(j = 0; j < indexes.length; j++){
min_price = maximum;
for(k = 0; k < indexes.length; k++){
min_price = Math.min(min_price, temp_homes[indexes[k]].price);
}
price_indexes = getIndexes(temp_homes, min_price, "price");
for(k = 0; k < price_indexes.length; k++){
new_homes.push(temp_homes[price_indexes[k]]);
temp_homes[price_indexes[k]].price = maximum + 1;
}
}
}
}
}
function getIndexes(arr, el, name)
{
var indexes = new Array();
for(var i = 0; i < arr.length; i++) if(arr[i][name] == el) indexes.push(i);
return indexes;
}
It should work.
If it doesn't, please inform me about it.
Oh, and in order to sort homes, just use:
homes = sortHomes(homes);