Develop Reference

load continuously updating data in a csv file using setInterval and clearInterval in js

I am getting Uncaught ReferenceError: Cannot access 'i' before initialization with below code.
I am completely new to js and i know this is not the best way to achieve what I am trying.
So the file.csv is getting updated as the js is running, i need to load new data until end of row of the file which is 190 is reached.
var interval = window.setInterval(function () {
fetch('./file.csv')
.then(response => response.text())
.then(transform);
function transform(str) {
console.log(str)
var data = Papa.parse(str , { header: true, dynamicTyping: true, skipEmptyLines: true }).data;
console.log(data);
if (data.length > 0) {
console.log("Starting the main function")
clearInterval(interval);
let retured_data = function_A(data, 0, 0, 0, 0, 0, 0);
let i = retured_data.i;
let b = retured_data.blue;
let g = retured_data.green;
let y = retured_data.yellow;
let a = retured_data.amber;
let r = retured_data.red;
console.log("Current Values of i, b, g, y, a, r" + i + " " + b + " " + g + " " + y + " " + a + " " + r)
var interval_next = window.setInterval(function () {
console.log("Inside Second Loop Values of i, b, g, y, a, r" + i + " " + b + " " + g + " " + y + " " + a + " " + r)
let retured_data = function_A(data, i, b, g, y, a, r);
let i = retured_data.i;
let b = retured_data.blue;
let g = retured_data.green;
let y = retured_data.yellow;
let a = retured_data.amber;
let r = retured_data.red;
if (data.length == 190) {
console.log("Complete Data Loaded")
clearInterval(interval_next);
}
}, 2000);
}
}
}, 1000);
So the logic i have created here is keep trying to check for data in file.csv every "1000" if data>length meaning data is there, function_A is called with data,i,b,g,y,a,r variables which are incremented in that function with each row processed in data, then the function_A returns these values, which i am again processing after "2000" msec with new values returned from function_A until end of row is reached.
Below is the function_A
function function_A(data, i, b, g, y, a, r) {
var data = data;
var i = i;
var blue = b;
var green = g;
var yellow = y;
var amber = a;
var red = r;
console.log(data)
console.log(data.length)
var interval = window.setInterval(function () {
console.log(data[i]);
console.log("Value of i: " + i)
var row = data[i];
if (row.Colour == "Blue") {
blue++;
} else if (row.Colour == "Green") {
green++;
} else if (row.Colour == "Yellow") {
yellow++;
} else if (row.Colour == "Amber") {
amber++;
} else if (row.Colour == "Red") {
red++;
} else {
pass
}
i++;
var total = document.getElementById('total_count');
total.innerHTML = i;
total.innerHTML += '<br><span style="font-size: 15px;">Total No Of Assets Impacted</span>';
bar_chart(blue, green, yellow, amber, red);
pie_chart(blue, green, yellow, amber, red);
console.log("Value of i after end of iteration: " + i)
console.log("Blue: " + blue + " Green: " + green + " Yellow: " + yellow + " Amber: " + amber + " Red: " + red)
if (i == data.length) {
console.log("I am in if loop")
clearInterval(interval);
}
}, 2000);
return { i, blue, green, yellow, amber, red };
}
Another strange thing i observed is, I thought the sequence of operations would be first to execute let retured_data = function_A(data, 0, 0, 0, 0, 0, 0) , meaning all steps in function_A and then i can use it to assign values, However the sequence I see is it does is as below:
console.log(str) (from main code)
console.log(data) (from main code)
console.log("Starting the main function") (from main code)
console.log(data) (from function_A)
console.log(data.length) (from function_A)
console.log("Current Values of i, b, g, y, a, r" + i + " " + b + " " + g + " " + y + " " + a + " " + r) (from main code)
console.log(data[i]); (from function_A)
console.log("Value of i: " + i) (from function_A)
console.log("Value of i after end of iteration: " + i) (from function_A)
console.log("Blue: " + blue + " Green: " + green + " Yellow: " + yellow + " Amber: " + amber + " Red: " + red) (from function_A)

Basic JavaScript - How to randomly compare two properties from an array of objects

I have an exercise where from an object constructor, I have created several objects, all with an ID property.
The first part of the exercise consist in pairing each object, compare their markAv properties and print the one that had it bigger.
[ a vs b => b wins]
They suggested to do so by using the ID property but I didn't know how to do it that way... so I tried a workaround, as you will see in the code below.
However, the second part of the exercise wants me to do the same but, this time, creating the pairs randomly. Here I have tried to use the ID property by generating a random number that matches the ID but I don´t know how to structure the code for it to work.
The output for the second part should be the same as above, with the only difference that the pairing is now randomly generated.
I have added a partial solution for the second part, partial because from time to time it throws an error that I can´t identify. However, I think I'm getting close to get my desired output.
I would really appreciate if anyone could give me a hint for me to crack the code below and to get it working because I really want to understand how to do this.
class Avenger {
constructor(name, classRoom, city, job, studies, markAv, id) {
this.name = name;
this.classRoom = classRoom;
this.city = city;
this.job = job;
this.studies = studies;
this.markAv = markAv;
this.id = id;
}
heroList() {
return this.name + " " + this.classRoom + " " + this.city + " " + this.job + " " + this.studies + " " + this.markAv + " " + this.id
}
}
const tonyStark = new Avenger("Tony Stark", "XI", "NYC", "Ingeneer", "MIT", 10, 1)
const hulk = new Avenger("Hulk", "X", "Toledo", "Destroyer", "Scientific", 7, 2)
const daredevil = new Avenger("Daredevil", "IX", "NYC", "Lawyer", "Fighter", 2, 3)
const magneto = new Avenger("Magneto", "XXI", "SBD", "Unemployed", "Driver", 5, 4)
const unknown = new Avenger("Unknown", "L", "CDY", "President", "Clerck", 17, 5)
const xavi = new Avenger("Xavi", "XX", "BCN", "Analist", "Calle", 7, 6)
let heroes = [daredevil, hulk, tonyStark, magneto, unknown, xavi]
function getPairs(array) {
function getPairs(array) {
for (let i = 0; i < array.length; i += 2) {
if (array[i].markAv < array[i + 1].markAv) {
console.log(array[i].name + " vs " + array[i + 1].name + " " + array[i + 1].name + " Wins")
} else if (array[i].markAv > array[i + 1].markAv) {
console.log(array[i].name + " vs " + array[i + 1].name + " " + array[i].name + " Wins")
}
}
}
getPairs(heroes)
///
function randomAv(array) {
let result = []
let hero1 = heroes[Math.floor(Math.random() * 6) + 1]
for(let i = 0; i<array.length; i++){
if (array[i].markAv <= hero1.markAv && array[i].id != hero1.id) {
result.push(console.log(array[i].name + " vs " + hero1.name + " " + array[i].name + " Wins"))
} else if(array[i].markAv >= hero1.markAv && array[i].id != hero1.id) {
result.push(console.log(array[i].name + " vs " + hero1.name + " " + hero1.name + " Wins"))
}
}
console.log(result)
}

First shuffle the array:
let heroes = [daredevil, hulk, tonyStark, magneto, unknown, xavi]
let heroes_shuffle = heroes.sort((a, b) => 0.5 - Math.random())
Then do as normal
getPairs(heroes_shuffle )
All Possible Combination :
function allPairs(heroes) {
while (heroes) {
[hero, ...heroes] = heroes
for (enemy of heroes) {
if (hero.markAv === enemy.markAv)
console.log(hero.name + " vs " + enemy.name + ": draw")
else if (hero.markAv < enemy.markAv)
console.log(hero.name + " vs " + enemy.name + ": " + enemy.name + " Wins")
else
console.log(hero.name + " vs " + enemy.name + ": " + hero.name + " Wins")
}
}
}

You can take the function from here https://stackoverflow.com/a/7228322/1117736
And do something like this:
class Avenger {
constructor(name, classRoom, city, job, studies, markAv, id) {
this.name = name;
this.classRoom = classRoom;
this.city = city;
this.job = job;
this.studies = studies;
this.markAv = markAv;
this.id = id;
}
heroList() {
return this.name + " " + this.classRoom + " " + this.city + " " + this.job + " " + this.studies + " " + this.markAv + " " + this.id
}
}
const tonyStark = new Avenger("Tony Stark", "XI", "NYC", "Ingeneer", "MIT", 10, 1)
const hulk = new Avenger("Hulk", "X", "Toledo", "Destroyer", "Scientific", 7, 2)
const daredevil = new Avenger("Daredevil", "IX", "NYC", "Lawyer", "Fighter", 2, 3)
const magneto = new Avenger("Magneto", "XXI", "SBD", "Unemployed", "Driver", 5, 4)
const unknown = new Avenger("Unknown", "L", "CDY", "President", "Clerck", 17, 5)
const xavi = new Avenger("Xavi", "XX", "BCN", "Analist", "Calle", 7, 6)
let heroes = [daredevil, hulk, tonyStark, magneto, unknown, xavi]
function randomIntFromInterval(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}
let hero1 = heroes[randomIntFromInterval(1, 6)]
let hero2 = heroes[randomIntFromInterval(1, 6)]
if (hero1.markAv < hero2.markAv) {
console.log(hero1.name + " vs " + hero2.name + " " + hero1.name + " Wins")
} else if(hero1.markAv > hero2.markAv) {
console.log(hero1.name + " vs " + hero2.name + " " + hero2.name + " Wins")
}

Pushing items from a funciton into an array

So I have a small RPG im coding (well I started it ages ago and gave up but have just come back for naother look!). I have a main character (just one so far):
var heroes = [{
name: 'Mary',
health: 15,
weapon: 'sword',
damage: 8,
dodge: 8,
backpack: 'water',
experience: 5
}];
Can I add extra items to the backpack or as I suspect (the below) is this the wrong way of storing the information as I get an error.
backpack: 'water', 'bread', 'cheese',
Secondly and related... I have a function to fight an enemy. When it is defeated the content of their backpack would be pushed to the hero's backpack. I thought something like the below would work, but again Im clearly wrong :)
All help gratefully accepted :)
Full code:
<h1>
<b>RPG Battle</b>
</h1>
<p><button id="fight">Fight</button><button id="reset">Reset</button></p>
<div id="output"></div>
<script>
var enemies = [{
name: 'Wizard',
health: 10,
weapon: 'his staff.',
damage: 12,
dodge: 10,
backpack: 'Cloak of Invisibility....'
},
{
name: 'Elf',
health: 4,
weapon: 'a dagger.',
damage: 6,
dodge: 8,
backpack: 'a bow & Arrow....'
},
{
name: 'Dragon',
health: 20,
weapon: 'a fireball.',
damage: 15,
dodge: 2,
backpack: 'a golden key...'
},
{
name: 'Goblin',
health: 12,
weapon: 'his bow and arrow....',
damage: 4,
dodge: 6,
backpack: 'gold coins....'
},
{
name: 'Dwarf',
health: 7,
weapon: 'his axe.',
damage: 5,
dodge: 4,
backpack: 'a treasure map....'
},
{
name: 'Orc',
health: 8,
weapon: 'a sword.',
damage: 5,
dodge: 5,
backpack: 'a silver tooth....'
},
{
name: 'Witch',
health: 6,
weapon: 'her potion of the undead....',
damage: 7,
dodge: 6,
backpack: 'a potion of the living....'
},
{
name: 'Old Lady',
health: 3,
weapon: 'her frying pan.',
damage: 1,
dodge: 1,
backpack: 'some fruit and vegetables....'
},
{
name: 'Villagers',
health: 15,
weapon: 'sharpened sticks.',
damage: 5,
dodge: 1,
backpack: 'some meat....'
},
{
name: 'Thief',
health: 4,
weapon: 'his fists.',
damage: 3,
dodge: 9,
backpack: 'a bag of jewels....'
}
];
var heroes = [{
name: 'Mary',
health: 15,
weapon: 'sword',
damage: 8,
dodge: 8,
backpack: '',
experience: 5
}];
function getRandomElement(list) {
return Object.create(list[Math.floor(Math.random() * list.length)]);
}
function getRandomEnemy() {
return getRandomElement(enemies);
}
function getRandomHero() {
return getRandomElement(heroes);
}
var x, randomEnemy, hero;
var output = document.getElementById("output");
var fightBtn = document.getElementById("fight");
var resetBtn = document.getElementById("reset");
fightBtn.addEventListener("click", battle);
function reset() {
x = 1;
randomEnemy = getRandomEnemy();
fightBtn.disabled = false;
hero = getRandomHero();
output.innerHTML = "";
}
resetBtn.addEventListener("click", reset);
reset();
function battle() {
if (hero.health <= 0 || randomEnemy.health <= 0) {
fightBtn.disabled = true;
return;
}
var enemyDamage = Math.floor((Math.random() * (randomEnemy.damage)) + 1);
var enemyDodge = Math.floor((Math.random() * (randomEnemy.dodge)) + 1);
var randomNumber = Math.floor(Math.random() * 7) + 1;
var heroDodge = [Math.floor(Math.random() * hero.dodge)];
var heroDamage = Math.floor((Math.random() * hero.damage) + 1);
var heroExperience = Math.floor(Math.random() * 5) + 1;
output.innerHTML += "<br>" + "<b>" + "Round " + x++ + "</b>";
output.innerHTML += "<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon;
if (randomNumber < heroDodge) {
output.innerHTML += "<br>" + "You evade the attack!";
} else if (hero.health > 0) {
hero.health = hero.health - enemyDamage;
if (hero.health < 0)
hero.health = 0;
output.innerHTML += "<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage";
output.innerHTML += "<br>" + "You have " + hero.health + " health remaining.";
}
if (hero.health <= 0) {
output.innerHTML += "<br>" + "You have been killed by the " + randomEnemy.name;
fightBtn.disabled = true;
return;
} else {
output.innerHTML += "<br>" + hero.name + " attacks the " + randomEnemy.name + " with their " + hero.weapon;
}
if (randomNumber < enemyDodge) {
output.innerHTML += "<br>" + "The " + randomEnemy.name + " evades the attack!";
} else if (randomEnemy.health > 0) {
randomEnemy.health = randomEnemy.health - heroDamage;
if (randomEnemy.health < 0)
randomEnemy.health = 0;
output.innerHTML += "<br>" + hero.name + " did " + heroDamage + " damage";
output.innerHTML += "<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health";
}
if (randomEnemy.health <= 0) {
output.innerHTML += "<br>" + "The " + randomEnemy.name + " dies! You find " + randomEnemy.backpack;
output.innerHTML += "<br>"
output.innerHTML += "<br>" + "You gain " + heroExperience + " XP";
output.innerHTML += "<br>" + "You have " + hero.health + " health left";
output.innerHTML += "<br>" + hero.backpack.push(randomEnemy.backpack);
output.innerHTML += "<br>" + "Your backpack contains " + hero.backpack;
fightBtn.disabled = true;
}
}
</script>

initialization of the hero should be:
var heroes = [{
name: 'Mary',
health: 15,
weapon: 'sword',
damage: 8,
dodge: 8,
backpack: ['water', 'some other stuff'], //empty backpack is ['']
experience: 5
}];
Now the backpack is an array you can push into.

So after the replies above I managed to work out (guess) that the line reading:
output.innerHTML += "<br>" + hero.backpack.push(randomEnemy.backpack);
should be changed to:
output.innerHTML += "<br>" + hero.backpack.push([randomEnemy.backpack]);

Javascript object prototype function

I have three methods in an object.
2 of them work properly, when third is printed - it prints out the code itself, not function. Here is the code and how it looks in console:
function Students(name, lastname, grades){
this.name = name;
this.lastname = lastname;
this.grades = grades;
this.addGrade = function(a){
this.grades.push(a);
}
this.printData = function(){
console.log("Name: " + this.name);
console.log("Grades: " + this.grades);
console.log("Average: " + this.gradeAvg);
}
this.gradeAvg = function(){
console.log("blabla");
}
}
var StudentasA = new Students("Petras", "Petrauskas", [8, 9, 9, 8, 7]);
var StudentasB = new Students("Jurgis", "Jurgauskas", [6, 7, 5, 4, 9]);
StudentasA.printData();
StudentasA.addGrade(28);
StudentasA.printData();
console:
console view

You need to call the function
this.gradeAvg()
// ^^
function Students(name, lastname, grades){
this.name = name;
this.lastname = lastname;
this.grades = grades;
this.addGrade = function(a){
this.grades.push(a);
}
this.printData = function(){
console.log("Name: " + this.name);
console.log("Grades: " + this.grades);
console.log("Average: " + this.gradeAvg());
// ^^
}
this.gradeAvg = function(){
return this.grades.reduce(function (a, b) { return a + b; }) / this.grades.length;
}
}
var StudentasA = new Students("Petras", "Petrauskas", [8, 9, 9, 8, 7]);
var StudentasB = new Students("Jurgis", "Jurgauskas", [6, 7, 5, 4, 9]);
StudentasA.printData();
StudentasA.addGrade(28);
StudentasA.printData();

Your code never actually calls the function.
Instead, you concatenate the function itself directly into the string.
You want parentheses.

How can I show one alert when ever a var == 0?

I am currently trying to make one easy card comparison game but I am having some problems. When ever the var playerLife or computerLife == 0 I want to show a alert message and refresh the page for a new game. If you scroll down you can see that I am trying to do this using the if statment but it does not seem to work. I am quite new at this so all the help and tips are welcome. Also if this code that I have at the moment can be better I should love to hear it. Thanks for your time.
var cards = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10,
1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8,8, 9, 9, 10, 10];
var shuffledCards = shuffle(cards);
var playerDeck = shuffledCards.slice(0,20);
var computerDeck = shuffledCards.slice(20);
var playerlife = 25;
var computerLife = 25;
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
function getTopCard(deck) {
return deck[0];
}
function dealCards() {
var playerTopCard = getTopCard(playerDeck);
var computerTopCard = getTopCard(computerDeck);
var cardImage = "<img src='http://i1194.photobucket.com/albums/aa365/Sarah_Dunlap/card_back.png'/>";
whoWon();
console.log('--------------------');
document.getElementById("card1").innerHTML = "<div class='cardNumber'>" + playerTopCard + '</div>' + cardImage;
document.getElementById("card2").innerHTML = "<div class='cardNumber'>" + computerTopCard + '</div>' + cardImage;
document.getElementById("scoreComputer").innerHTML = computerLife;
document.getElementById("scorePlayer").innerHTML = playerlife;
}
function whoWon() {
var playerTopCard = getTopCard(playerDeck);
var computerTopCard = getTopCard(computerDeck);
if (playerTopCard > computerTopCard) {
console.log('Player Won! ' + playerTopCard + '/' + computerTopCard);
computerLife = computerLife - (playerTopCard - computerTopCard);
playerDeck.shift();
computerDeck.shift();
console.log('Player Life - ' + playerlife);
console.log('Computer Life - ' + computerLife);
} else if (playerTopCard < computerTopCard) {
console.log('Computer Won! ' + playerTopCard + '/' + computerTopCard);
playerlife = playerlife - (computerTopCard - playerTopCard);
playerDeck.shift();
computerDeck.shift();
console.log('Player Life - ' + playerlife);
console.log('Computer Life - ' + computerLife);
} else {
console.log('Tie! ' + playerTopCard + '/' + computerTopCard);
playerDeck.shift();
computerDeck.shift();
console.log('Player Life - ' + playerlife);
console.log('Computer Life - ' + computerLife);
}
}
shuffle(cards);
console.log('playerDeck - ' + playerDeck);
console.log('computerDeck - ' + computerDeck);
document.getElementById("click").addEventListener("click", dealCards);
(function gameEnd () {
if (playerlife <=0 || computerLife <=0) {
alert('DONE');
}
}());

You should considering changing your code like this:
// new function
function checkIsGameOver () {
if (playerlife <=0 || computerLife <=0) {
alert('DONE');
}
}
function whoWon() {
var playerTopCard = getTopCard(playerDeck);
var computerTopCard = getTopCard(computerDeck);
if (playerTopCard > computerTopCard) {
console.log('Player Won! ' + playerTopCard + '/' + computerTopCard);
computerLife = computerLife - (playerTopCard - computerTopCard);
// added code here...
checkIsGameOver();
playerDeck.shift();
computerDeck.shift();
console.log('Player Life - ' + playerlife);
console.log('Computer Life - ' + computerLife);
} else if (playerTopCard < computerTopCard) {
console.log('Computer Won! ' + playerTopCard + '/' + computerTopCard);
playerlife = playerlife - (computerTopCard - playerTopCard);
// added code here...
checkIsGameOver();
playerDeck.shift();
computerDeck.shift();
console.log('Player Life - ' + playerlife);
console.log('Computer Life - ' + computerLife);
} else {
console.log('Tie! ' + playerTopCard + '/' + computerTopCard);
playerDeck.shift();
computerDeck.shift();
console.log('Player Life - ' + playerlife);
console.log('Computer Life - ' + computerLife);
}
}