We Keep Coding

How to access an object from another file in JavaScript?

I want the score of the game played stored in the usrObj next to topScore in the local storage. However, it only stores the score next to the user's name.
js code from index.html
<script>
loadRankingTable();
window.onload = ()=> {
//Check login
if(sessionStorage.loggedInUser !== undefined){
window.localStorage.setItem(sessionStorage.loggedInUser, highscore);
document.getElementById("Greeting").innerHTML = sessionStorage.loggedInUser;
}
}
</script>
prac.js
function register(){
let password1 = document.getElementById("PasswordInput").value
let password2 = document.getElementById("PasswordInputConfirm").value
let username = document.getElementById("Username").value
let name = document.getElementById("NameInput").value;
let password = document.getElementById("PasswordInput").value;
let usrObj = {
username: username,
password: password,
topScore: 0
}
if (password1 == password2){
localStorage[name] = JSON.stringify(usrObj);
document.getElementById("FeedbackPara").innerHTML= "";
}
else{
document.getElementById("FeedbackPara").innerHTML= "Passwords don't match.";
}
}
so basically instead of the local storage storing data like this: "user, 200", i want it to be like this: "username: username, password: password, topScore: 200 "

Retrieve the current value of the local storage as JSON, update the score, and then save it again.
loadRankingTable();
window.onload = () => {
//Check login
if (sessionStorage.loggedInUser !== undefined) {
let oldData = localStorage.getItem(sessionStorage.loggedInUser);
if (oldData) {
oldData = JSON.parse(oldData);
oldData.topScore = highscore;
localStorage.setItem(sessionStorage.loggedInUser, JSON.stringify(oldData);
}
document.getElementById("Greeting").innerHTML = sessionStorage.loggedInUser;
}
}

What is the array output type here

On line 24 where I test if the test2[1] == "invalid" never works it always goes to the else and takes me to the next page. I think test2[1] just isn't a string but I don't know what else it would be please help
function login() {
var email = document.getElementById("email").value;
var passW = document.getElementById("password").value;
if (email == "" || passW == "") {
alert("Please enter a valid email or password.");
} else {
var myXMLRequest = new XMLHttpRequest();
myXMLRequest.onload = openWorkout;
var url = "assignment10.php?em=" + email + "&pass=" + passW;
myXMLRequest.open("POST", url, true);
myXMLRequest.send();
}
}
function openWorkout() {
var invalid = "invalid";
var step = this.responseText;
var test = step.split(",");
var test2 = test[0].split(":");
console.log(step);
console.log(test);
console.log(test2[1]);
if (test2[1] == "invalid") {
alert("The email or password you entered is invalid. Please try again.");
} else {
window.location = "#workoutPage";
}
}
<?php
//TASK 1: MAKE A CONNECTION TO THE DATABASE, DISPLAY ERROR FOR FAILED CONNECTIONS
//(FOR GODADDY) NOTE: $mysqli = new mysqli("127.0.0.1", "username", "password", "database", 3306);
$mysqli = new mysqli("localhost", "User", "1234", "ass10");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
//CHECK IF EMAIL AND ENTERED PASSWORD VALID (LOGIN PAGE [first part of open workout checks login password])
$entEmail = $_GET['em'];
$entPassword = $_GET['pass'];
$sql = "SELECT * FROM membership_table WHERE Email = $entEmail, Password = $entPassword";
$result = $mysqli->query($sql);
if($result->num_rows == 0) {
$data = "invalid";
} else {
$data = "valid";
}
//Pass to JSON
$json = array(
"data" => $data,
"Email" => $entEmail,
"Password" => $entPassword
);
header("Contenttype:Application/json");
print(json_encode($json));
?>
here are the console.log outputs on lines 21 - 23
assignment10.js:21 {"data":"invalid","Email":"q","Password":"1"}
assignment10.js:22 (3) ["{"data":"invalid"", ""Email":"q"", ""Password":"1"}"]
assignment10.js:23 "invalid"

You're returning JSON from your PHP, so process it as that using JSON.parse, rather than trying to split the string apart:
var response = JSON.parse(this.responseText);
var test = response.data;
if (test == 'invalid') {
...
Note the issue with your current code is that test2[1] is literally "invalid", including the double quotes, so for your test to work you'd need to use
if (test2[1] == '"invalid"') {
Here's a snippet to demonstrate the code using the output of console.log(step) from your question:
const responseText = '{"data":"invalid","Email":"q","Password":"1"}';
var response = JSON.parse(responseText);
var test = response.data;
if (test == 'invalid') {
console.log('Invalid!');
} else {
console.log('Valid!');
}

When pushing user to array, multiple Array's being created

I'm creating an application (chat app) and I'm pushing each username to an array. Using socket.io, whenever I call an event to push the username to the client side array, multiple instances of the array are created.
For example, the first user I log is fine, Then when another user is added, the array will double, then triple and so on. Thank you in advance for the help . The emit event in which I'm doing this is in the USERS_CONNECTED event.
I am also sorry for the terrible sloppiness of the code below.
Server
const express = require('express');
const fs = require('fs');
const path = require('path');
const http = require('http');
const socketIO = require('socket.io');
const publicPath = path.join(__dirname, 'public');
const port = process.env.PORT || 3001;
let app = express();
let server = http.createServer(app);
var io = socketIO(server);
let username;
app.use(express.static(publicPath));
let usersOnline = []; //keeps track of current users online
io.on('connection', (socket) => {
let user = socket.id;
socket.emit('user', user);
socket.id = "anon";
socket.on('new user', function(data,callback) {
//if user name is taken
if(usersOnline.indexOf(data) != -1 || data == ''){
callback(false);
}else{
//if username is not taken
callback(true);
socket.id = data;
username = data;
//pushes data(username) to data
usersOnline.push(socket.id);
//sends back to client usersOnline array
io.sockets.emit('USERS_CONNECTED', {usersOnline: usersOnline, user: socket.id});
console.log(usersOnline.length)
}
});
socket.on('disconnect', () => {
usersOnline.splice(usersOnline.indexOf(socket.id), 1);
//emits count users, sets current user
io.sockets.emit('USERS_CONNECTED', {usersOnline: usersOnline, user: socket.id});
console.log(usersOnline.length)
});
socket.on('send msg' , function(data){
io.sockets.emit('send msg', {msg: data, user: socket.id});
})
});
server.listen(port, () => {
console.log('server is running master')
});
Client
let socket = io();
let input = document.querySelector('#input_username');
let form = document.querySelector('form')
let userName_page = document.querySelector(".userName_page");
let chat_page = document.querySelector(".chat_page");
let chatWrapper = document.querySelector(".chat_wrapper")
let counter = document.getElementById("counter");
let users = document.querySelector(".users_online")
let join_btn = document.querySelector(".button-effect")
let msg_input = document.querySelector("#sendMsg");
let btn_send = document.querySelector("#send_btn");
let onlineUsers = [];
let sent_ = document.querySelector(".sent_");
let receive_ = document.querySelector(".receive_");
let newUser_text = document.querySelector(".welcome_box")
let user;
let isTyping = document.querySelector('#isTyping')
let welcome_header = document.querySelector("#welcome_header");
let users_online_container = document.querySelector(".users_online");
join_btn.addEventListener("click", function(e){
e.preventDefault();
user = input.value;
//sets user name to input.value
socket.emit('new user', input.value, function(data){
if(data){
userName_page.style.display = "none"
chat_page.style.display = "flex";
welcome_header.innerHTML = input.value + ' has joined the party';
addAnimation();
}else{
if(input.value == ''){
input.classList.add("input_error");
let error_msg = document.getElementById('error_input');
error_msg.innerHTML = '*Invalid, Please Type a Username'
error_msg.style.display = "block";
input.style.border = "2px solid #d9534f";
}else{
input.classList.add("input_error");
let error_msg = document.getElementById('error_input');
error_msg.style.display = "block";
error_msg.style.border = "2px solid #d9534f"
error_msg.innerHTML = "Woops, sorry but that user name is already taken, please try again";
}
}
});
//sets up new user
socket.on('USERS_CONNECTED' , function (data){
//counts online users currently
counter.innerHTML = (data.usersOnline.length + " Online");
for(let i = 0; i < data.usersOnline.length; i++){
onlineUsers.push(data.usersOnline);
let h = document.createElement("h3");
fish.appendChild(h);
}
console.log(onlineUsers)
});
});
//msg send
btn_send.addEventListener('click', function(){
socket.emit('send msg', msg_input.value);
});
//checks if enter is pressed, if so emits message to chat
function search(ele) {
if(event.key === 'Enter') {
socket.emit('send msg', msg_input.value);
}
}
//send message events
socket.on('send msg', function(data){
if(data.user == user){
//sender logic
msg_input.value = '';
let p = document.createElement('p');
receive_.append(p);
p.innerHTML = "<span class = 'er'>" + 'You' + "</span>" + ": " + data.msg;
p.style.textAlign = 'right';
p.style.backgroundColor = "#5cb85c";
p.style.justifyContent = "flex-end";
p.style.paddingRight = "2em";
}
else{
//receiver logic
msg_input.value = '';
let p = document.createElement('p');
receive_.append(p);
p.innerHTML = "<span class = 'er'>" + data.user + "</span>" + ": " + data.msg;
p.style.textAlign = 'left';
p.style.backgroundColor = "#5bc0de";
p.style.paddingLeft = "2em";
};
//makes sure scroll stays at bottom
receive_.scrollTop = receive_.scrollHeight;
});
function addAnimation(){
newUser_text.classList.add("act");
}
$( document ).ready(function(){
let header = document.querySelector(".feedback");
var timeout;
function timeoutFunction() {
typing = false;
socket.emit("typing", false);
}
$('#sendMsg').keyup(function() {
typing = true;
socket.emit('typing', 'typing...');
clearTimeout(timeout);
timeout = setTimeout(timeoutFunction, 5000);
});
socket.on('typing', function(data) {
if (data) {
$('#isTyping').html(data);
$('#isTyping').classList.add('act')
} else {
$('#isTyping').html("");
}
});
})

You should replace whole array on client side instead of push. Just stack trace your code:
Firstable on connection on server side you pushes new user id to usersOnline array and emits that array in object via USERS_CONNECTED event in usersOnline property. Client receives that object and pushes object of users (NOT exactly one new user) to onlineUsers array. So eg. 1 user connects to server, usersOnline array would be:
[ 'user1' ]
Then second user connects to server:
[ 'user1', 'user2' ]
And that array is being sent to user2, that is whole object sent by USERS_CONNECTED event would be:
{ usersOnline: [ 'user1', 'user2' ], user: 'user2' }
Now in client instead of replacing you are pushing whole new array, so instead [ 'user1', 'user2' ] you gets [ [ 'user1', 'user2' ] ]

Javascript execution order when pulling Firebase data

After I authenticate to Firebase with Google auth, I get this console.log output and the JavaScript seems to bounce around in execution order. Here's my console output and the javascript code.
Why does "controller is: Pellet_Pirate_1" display at the log end rather than at the beginning where the code executes to pull this value from Firebase? My "GLOBAL CONTROLLER" and other logs of the contr global variable should be valued as well... I am trying to use contr as a global variable and it is defined at the top of my script tag
Any help would be greatly appreciated... I've banged my head on this one for many hours now!
console.log
<script type="text/javascript">
var contr = undefined;
function PelletPirate() {
this.userPic = document.getElementById('user-pic');
this.userName = document.getElementById('user-name');
this.signInButton = document.getElementById('sign-in');
this.signOutButton = document.getElementById('sign-out');
this.signOutButton.addEventListener('click', this.toggleSignOut.bind(this));
this.signInButton.addEventListener('click', this.toggleSignIn.bind(this));
this.initFirebase();
}
// Sets up shortcuts to Firebase features and initiate firebase auth.
PelletPirate.prototype.initFirebase = function() {
//FlymanEdit Shortcuts to Firebase SDK features.
this.auth = firebase.auth();
this.database = firebase.database();
this.storage = firebase.storage();
//FlymanEdit Initiates Firebase auth and listen to auth state changes.
this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};
PelletPirate.prototype.toggleSignIn = function() {
var provider = new firebase.auth.GoogleAuthProvider(); // [Start createprovider]
provider.addScope('https://www.googleapis.com/auth/plus.login'); // [START addscopes]
this.auth.signInWithPopup(provider).then(function(result)
{
var token = result.credential.accessToken;
var user = result.user;
console.log('token: ' + token);
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential; // The firebase.auth.AuthCredential type that was used.
if (errorCode === 'auth/account-exists-with-different-credential') {
alert('You have already signed up with a different auth provider for that email.');
}
else {
console.error(error);
}
});
}
// Sign-out.
PelletPirate.prototype.toggleSignOut = function() {
this.auth.signOut();
console.log('******************** USER SIGNED OUT *********************');
};
PelletPirate.prototype.onAuthStateChanged = function(user) { // Triggers when user's auth state changes.
if (user) { // User is signed in!
// let's go fetch the Pellet Pirate controller name based on the logged in user!
console.log('user.uid is: ' + user.uid);
firebase.database().ref().child("owners").orderByChild("userId").equalTo(user.uid).on('value', function (snapshot) {
snapshot.forEach(function(childSnapshot) {
contr = childSnapshot.val().controller;
//MYLIBRARY.init([controller, 1, "controller"]);
//MYLIBRARY.passVar();
console.log('controller is: ' + contr);
return contr;
});
});
var currentDate = new Date();
var profilePicUrl = user.photoURL;
var userName = user.displayName;
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var refreshToken = user.refreshToken;
var providerData = user.providerData;
//console.log('You have signed in: ' + userName );
console.log('*************** signed in: ' + userName + ' *****************');
console.log('GLOBAL CONTROLLER: ' + contr);
document.getElementById('authed').style.visibility = 'visible';
document.getElementById('authed2').style.visibility = 'visible';
document.getElementById('gauges').style.visibility = 'visible';
document.getElementById('graph').style.visibility = 'visible';
document.getElementById('parameters').style.visibility = 'visible';
document.getElementById('ParmForm').style.visibility = 'visible';
document.getElementById('ClearDataButton').style.visibility = 'visible';
document.getElementById('AddProgramButton').style.visibility = 'visible';
document.getElementById('programrows').style.visibility = 'visible';
// Set the user's profile pic and name.
this.userPic.style.backgroundImage = 'url(' + profilePicUrl + ')';
this.userName.textContent = userName;
// Show user's profile and sign-out button.
this.userName.removeAttribute('hidden');
this.userPic.removeAttribute('hidden');
this.signOutButton.removeAttribute('hidden');
// Hide sign-in button.
this.signInButton.setAttribute('hidden', 'true');
console.log('before firebase controller is: ' + contr);
//controllerName = "Pellet_Pirate_1";
//Firebase
var TempsRef = Ref.child('ControllerData/' + contr + '/Temps');
console.log('after firebase controller is: ' + contr);
TempsRef.limitToLast(3600/3*16).once("value", function(snapshot) { //Limit to last 16 hours
var Ts = snapshot.val();
for (var k in Ts) {
T1.push([Ts[k].time, Ts[k].T1]);
T2.push([Ts[k].time, Ts[k].T2]);
T3.push([Ts[k].time, Ts[k].T3]);
TT.push([Ts[k].time, Ts[k].TT]);
console.log('in snapshot');
}
TempsRef.limitToLast(1).on("child_added", function(snapshot, prevChildKey) { //Establish callback
var Ts = snapshot.val();
T1.push([Ts.time, Ts.T1]);
T2.push([Ts.time, Ts.T2]);
T3.push([Ts.time, Ts.T3]);
TT.push([Ts.time, Ts.TT]);
UpdatePlot();
console.log('in snapshot-previousChildKey' );
//console.log('in snapshot-PCK-controllerName is:' + controllerName);
});
UpdatePlot();
});
TempsRef.on("child_removed", function(snapshot, prevChildKey) {
T1 = [];
T2 = [];
T3 = [];
TT = [] ;
UpdatePlot();
});
}
else { // User is signed out!
// Hide user's profile and sign-out button.
this.userName.setAttribute('hidden', 'true');
this.userPic.setAttribute('hidden', 'true');
this.signOutButton.setAttribute('hidden', 'true');
document.getElementById('authed').style.visibility = 'hidden';
document.getElementById('authed2').style.visibility = 'hidden';
document.getElementById('gauges').style.visibility = 'hidden';
document.getElementById('graph').style.visibility = 'hidden';
document.getElementById('parameters').style.visibility = 'hidden';
document.getElementById('ParmForm').style.visibility = 'hidden';
document.getElementById('ClearDataButton').style.visibility = 'hidden';
document.getElementById('AddProgramButton').style.visibility = 'hidden';
document.getElementById('programrows').style.visibility = 'hidden';
// Show sign-in button.
this.signInButton.removeAttribute('hidden');
// undefine the controller
contr = undefined;
}
}; // [ END onAuthStateChanged - auth state listener]

Because on() is asynchronous. It returns immediately while the query is happening in the background. Meanwhile, the code immediately after that runs until the first time the callback you provided to it is invokes with a snapshot of results.

Saving Javascript objects to Chrome.Storage

This code for a Google Chrome Extension doesn't work. I am new to Javascript and I am not sure what the problem is. Any help would be greatly appreciated.
JS/jQuery
var userV = serviceName + 'Username';
var passV = serviceName + 'Password';
boolean works = true;
var User = {
passV: password,
userV: username,
works = true;
}
chrome.storage.sync.set({User : userV}, function() {
console.log('');
});
chrome.storage.sync.set({User : passV }, function() {
console.log('');
});
Script
chrome.storage.sync.get("userV", function (User) {
sUsername = User.userV;
};
chrome.storage.sync.get("passV", function (User) {
sPassword = User.passV;
};
Thank you for any help.

In your code you are storing User and Password in the same Key Name hence you will get only Last assigned value,
as well as your retrieving the value by value not by key
JS/jQuery
var userV = serviceName + 'Username';
var passV = serviceName + 'Password';
boolean works = true;
var User = {
passV: password,
userV: username,
works = true;
}
chrome.storage.sync.set({User : userV}, function() {
console.log('');
});
chrome.storage.sync.set({Pass : passV }, function() {
console.log('');
});
Script
chrome.storage.sync.get("User", function (data) {
sUsername = data.User;
};
chrome.storage.sync.get("Pass", function (data) {
sPassword = data.Pass;
};

For more simplify, you can store the whole User object into the storage. When you want to store your user data, the code is like the following:
var userV = serviceName + 'Username';
var passV = serviceName + 'Password';
boolean worksV = true;
var user = {
password: passV,
username: userV,
works: worksV
};
chrome.storage.sync.set({"user" : user}, function() {
// Do something...
});
Then, when you want to retrieve the stored data, the code is:
chrome.storage.sync.get("user", function(data) {
var user = data.user;
var passV = user.password;
var userV = user.username;
var worksV = user.works;
// Do something...
});
I think that you don't need to store each data item as each property. I recommend that it will be stored as one object.