I'm trying to create multiple objects with different randomised values with a structure from a JSON file. For every new object I create I, for some reason, get the same randomised values as the first object.
I'm doing this by creating an object through a class. I put every "Thingy" created in an array for future reference. The JSON file is populated with attributes that should, everytime a new Thingy is created, each get a random value from 0-10. Classes is not my strong side, I'm happy to hear better ways to do this (I'm interested in having funtions inside the Thingies later on).
When I reload the page and create a new Thingy, by pressing my button, the values are beautifully randomised. The problem is that every time I press my button to create more Thingies the name is randomised BUT every value gets the same random values as the previous Thingy. At first I thought is was a problem with Javascript using a pseudo random number generator but now I believe I have some wrong understanding on a script language level.
Can anyone shine some light on what I'm doing wrong or not understanding?
Please tell me if I should provide any more information, this is my first post!
CODE:
var i;
var names = ["bjorn", "agnetha", "benny", "annifrid"];
var thingies = [];
var jsonFile = {
"bodyA": {
"sub1": {
"subsub1": null,
"subsub2": null,
"subsub3": null
},
"sub2": {
"subsub1": null,
"subsub2": null
},
"sub3": {
"subsub1": {
"subsubsub1": null,
"subsubsub2": null,
"subsubsub3": null
}
}
},
"bodyB": {
"sub1": {
"subsub1": null
}
},
"bodyC": null
}
class Thingy {
constructor (name, attributes) {
this.name = name;
this.attributes = attributes;
}
}
var button = document.createElement("input");
button.type = "button";
button.value = "Create new thingy";
button.onclick = function() {
// I'm using the math.js to get a random value from the names array (Yes, in this debugging instance it could get the same name as other Thingies)
thingy = new Thingy(math.pickRandom(names), getAttributes(jsonFile));
thingies.push(thingy);
console.log(thingy.name + " was created!");
}
document.getElementById("myDiv").appendChild(button);
function getAttributes(json) {
function iterateObject(json) {
Object.keys(json).forEach(function (k) {
if (json[k] !== null && typeof json[k] === 'object') {
iterateObject(json[k]);
return;
}
if (json[k] === null) {
// This is where I get the exact same values everytime I create a new Thingy after the first one
json[k] = math.randomInt(0, 10); // (Also from math.js - very similiar to default Math)
}
});
return json;
}
return iterateObject(json);
}
function logThingies() {
for (i = 0; i < thingies.length; i++) console.log(thingies[i]);
}<head>
<!-- math.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.1/math.js"></script>
</head>
<body>
<div id="myDiv">
<button onclick="logThingies()">Show me all!</button>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire