Develop Reference

Using switch case in javascript

This is the variable i am having right now
[
{
"_id":"63773059c3160f782c087e33",
"nfrid":"637328ebf5c4b2558b064809",
"nfrname":"azuread",
"fileName":"package.json",
"isImport":false,
"isConst":false,
"isComponent":false,
"isNewFile":false,
"landmark":"\"react\"",
"isAfter":false,
"fileContent":"\"#azure/msal-react\": \"^1.4.9\",",
"filePath":"package.json",
"isPackage":true,
"isIndexHtml":false,
"projecttypeid":"6372366d1b568e00d8af2e44",
"projecttypetitle":"PWA React",
"nfrGitIo":[
{
"_id":"637328ebf5c4b2558b064809",
"iconpath":"https://cdnerapidxdevportal.azureedge.net/webdesignerimages/azure-active-directory-aad-icon-488x512-3d71nrtk.png",
"title":"Azure AD",
"description":"Azure Active Directory (Azure AD), part of Microsoft Entra, is an enterprise identity service that provides single sign-on, multifactor authentication, and conditional access to guard against 99.9 percent of cybersecurity attacks."
}
]
},
{
"_id":"63773144c3160f782c087e35",
"nfrid":"637328ebf5c4b2558b064809",
"nfrname":"azuread",
"fileName":"index.js",
"isImport":true,
"isConst":false,
"isComponent":false,
"isNewFile":false,
"isPackage":false,
"landmark":null,
"isAfter":null,
"fileContent":"import { MsalProvider } from '#azure/msal-react';import { msalConfig } from './authConfig';import {PublicClientApplication } from '#azure/msal-browser';",
"filePath":"src/index.js",
"isIndexHtml":false,
"projecttypeid":"6372366d1b568e00d8af2e44",
"projecttypetitle":"PWA React",
"nfrGitIo":[
{
"_id":"637328ebf5c4b2558b064809",
"iconpath":"https://cdnerapidxdevportal.azureedge.net/webdesignerimages/azure-active-directory-aad-icon-488x512-3d71nrtk.png",
"title":"Azure AD",
"description":"Azure Active Directory (Azure AD), part of Microsoft Entra, is an enterprise identity service that provides single sign-on, multifactor authentication, and conditional access to guard against 99.9 percent of cybersecurity attacks."
}
]
},
]
I am having many flags like isImport, isPackage, isIndexHtml like that. I am trying to put those flags in a switch case and call individual function when each flag is true.Something like this,
for (let i = 0; i < cosmos.length; i++) {
console.log(cosmos[0].isPackage);
switch (cosmos[i]) {
case `${cosmos[i].isImport === true}`:
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
break;
// case `${cosmos[i].isConst === true}`:
// console.log("I own a dog");
// break;
case `${cosmos[i].isPackage === true}`:
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
break;
case `${cosmos[i].isIndexHtml === true}`:
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
break;
// case `${cosmos[i].isNewFile === true}`:
// const statusNewFile = common.addNewFile(cosmos[i]);
// console.log(statusNewFile);
// break;
default:
console.log("Nothing to add/update");
break;
}
}
But when I run this i am always getting the default console log. I dont know what i am missing
This is my first switch case implementation. Can someone point me in the right direction?

Don't convert them to strings and in switch condition add just true:
for (let i = 0; i < cosmos.length; i++) {
console.log(cosmos[0].isPackage);
switch (true) {
case cosmos[i].isImport:
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
break;
case cosmos[i].isPackage:
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
break;
case cosmos[i].isIndexHtml:
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
break;
default:
console.log("Nothing to add/update");
break;
}
}

switch is not the right construct to use in this case.
Simply use if/else here.

Since you're testing several different values from cosmos[i], not testing a single value against multiple possible matches, switch isn't the right tool here. (You can use it, just like you can use a wrench to bang in a nail, but it's not the right tool.) Instead, use an if/else if/else chain:
for (let i = 0; i < cosmos.length; i++) {
if (cosmos[i].isImport) {
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
} else if (cosmos[i].isPackage) {
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
} else if (cosmos[i].isIndexHtml) {
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
} else {
console.log("Nothing to add/update");
}
}
Separately, in new code, I'd suggest using a for-of instead of a for when you don't need the index:
for (const entry of cosmos) {
if (entry.isImport) {
const statusImport = common.updateImport(entry);
console.log(statusImport);
} else if (entry.isPackage) {
const statusPackage = common.updatePackage(entry);
console.log(statusPackage);
} else if (entry.isIndexHtml) {
const statusIndexHtml = common.updateIndexHTML(entry);
console.log(statusIndexHtml);
} else {
console.log("Nothing to add/update");
}
}

A switch statement can only interrogate one variable. In your case the correct solution is an if statement for each member variable. Replace the switch statement with this snippet:
if (cosmos[i].isImport === true) {
const statusImport = common.updateImport(cosmos[i]);
console.log(statusImport);
}
if (cosmos[i].isPackage === true) {
const statusPackage = common.updatePackage(cosmos[i]);
console.log(statusPackage);
}
if (cosmos[i].isIndexHtml === true) {
const statusIndexHtml = common.updateIndexHTML(cosmos[i]);
console.log(statusIndexHtml);
}
I note that your data structure does not mutually exclude the isImport isPackage and isIndexHtml - so in principle any combination of them could be true and my proposed code would execute accordingly.

How to add more language in my Highlight.js

Based on the code sample, how to add new language like c#, php, java, sql, etc. This sample was provided by a man who answered my question last month. I tried to add new languages but not working. Thanks.
const container = document.querySelector('.container');
const removeTextNodes = el =>
[...el.childNodes].forEach(child => child.nodeType !== 1 && el.removeChild(child))
const format = (text, language) => {
switch (language) {
case 'html': return html_beautify(text);
case 'css': return css_beautify(text);
case 'js': return js_beautify(text);
default: return text;
}
}
const preProcess = code => {
removeTextNodes(code.closest('pre'));
const language = [...code.classList].find(cls => /language-/.test(cls));
const [ match, lang ] = language?.match(/language-(\w+)/);
const content = code.innerHTML.trim();
code.innerHTML = format(lang === 'html' ? _.escape(content) : content, lang);
};
const insertCode = (e) => {
e.preventDefault();
const content = e.target.elements.content.value.trim();
const language = e.target.elements.language.value;
if (content) {
const formatted = format(content, language);
const pre = document.createElement('pre');
const code = document.createElement('code');
code.classList.add(`language-${language}`, 'hljs');
code.innerHTML = hljs.highlight(formatted, { language }).value;
pre.append(code);
container.prepend(pre);
}
}
document.forms['add'].addEventListener('submit', insertCode);
document.querySelectorAll('code[class^="language-"]').forEach(preProcess);
hljs.highlightAll();

You can check the loaded languages with
hljs.listLanguages()
If this list doesn't contain the language, you want to use, you can load your language script-wise.
For example i wanted to use latex, so i added this script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/latex.min.js"></script>

Javascript While Loop Error with User Input

I am just beginning with JS and am having trouble with scope and executing code in similar style as I would with Python. I have started learning JS on Codecademy and have just begun my first project.
My code for the project is below:
//////////////////////////
// R U Hungry Console App
/////////////////////////
// Step 1: Load in Necessary Modules
////////////////////////////////////
// add in the prompt-sync module
// allows to take in and display users name
const prompt = require('prompt-sync')();
// load in fs module
// allows reading in from text files
const fs = require("fs");
// load open module
//allows the opening of webpages
const open = require('open');
// Step 2: Create a menu object
///////////////////////////////
const menu = {
starters: [],
mains: [],
desserts: []
}
// Step 3 Create a factory function to update the Menu object
/////////////////////////////////////////////////////////////
const menuUpdate = (course,dishName,dishLink) => {
if (course.toLowerCase() === 'starter'){
let newItem = {dish: dishName, link: dishLink};
menu.starters.push(newItem);
} else if (course.toLowerCase() === 'main'){
let newItem = {dish: dishName, link: dishLink};
menu.mains.push(newItem);
} else if (course.toLowerCase() === 'dessert'){
let newItem = {dish: dishName, link: dishLink};
menu.desserts.push(newItem);
} else {
console.log('You did not enter a valid course.\nCould not update menu');
}
}
// Step 4: Read in text files of scraped web data
/////////////////////////////////////////////////
const dishes = [menu.starters,menu.mains,menu.desserts];
const filesToRead = ['starters.txt','mains.txt','desserts.txt'];
function addFiles(course,file){
const text = fs.readFileSync(`./menu_files/${file}`);
const textByLine = text.toString().split("\n");
for (const line of textByLine){
course.push(line);
}
}
addFiles(dishes[0],filesToRead[0]);
addFiles(dishes[1],filesToRead[1]);
addFiles(dishes[2],filesToRead[2]);
// Step 5: Put it all together
//////////////////////////////
console.log('\n\nFeeling hungry and can\'t decide what to eat? You have come to the right place.')
const name = prompt('What is your name? ');
console.log(`\nWelcome, ${name}!\nWould you like to be:\n1.Presented With a Menu\n2.Add a Dish to the Menu`);
let userChoice;
while (true){
userChoice = prompt('\nEnter 1 to get a Menu\nEnter 2 to add a Menu Item\nEnter 3 to exit R U Hungry ');
if (userChoice.trim() === 1){
const starterSelector = Math.floor(Math.random() * menu.starters.length);
const mainSelector = Math.floor(Math.random() * menu.mains.length);
const dessertSelector = Math.floor(Math.random() * menu.desserts.length);
let starterDish = menu.starters[starterSelector][0];
let starterRecipe = menu.starters[starterSelector][1];
let mainDish = menu.mains[mainsSelector][0];
let mainRecipe = menu.mains[mainsSelector][1];
let dessertDish = menu.desserts[dessertSelector][0];
let dessertRecipe = menu.desserts[dessertSelector][1];
console.log(`${name}, your Menu is as follows:\n`);
console.log(`Starter: ${starterDish}`);
console.log(`Main: ${mainDish}`);
console.log(`Dessert: ${dessertDish}`);
console.log('\nWe will direct you to recipes for your selected dishes');
// opens the url in the default browser
open(starterRecipe);
open(mainRecipe);
open(dessertRecipe);
} else if (userChoice.trim() === 2){
let userCourse = prompt('Is your dish a Starter, Main or Dessert? ');
let userDishName = prompt('Great! Please tell me the name of your dish ');
let userDishLink = prompt('Please provide the link to the dish recipe ');
menuUpdate = (userCourse,userDishName,userDishLink);
console.log('Menu updated with your dish!');
} else {
console.log(`Goodbye, ${name}.`);
break;
}
console.log('Would you like to perform another function?');
}
// End
I am having trouble with the while loop at the end.
This part specifically:
let userChoice;
while (true){
userChoice = prompt('\nEnter 1 to get a Menu\nEnter 2 to add a Menu Item\nEnter 3 to exit R U Hungry ');
if (userChoice.trim() === 1){
const starterSelector = Math.floor(Math.random() * menu.starters.length);
const mainSelector = Math.floor(Math.random() * menu.mains.length);
const dessertSelector = Math.floor(Math.random() * menu.desserts.length);
let starterDish = menu.starters[starterSelector][0];
let starterRecipe = menu.starters[starterSelector][1];
let mainDish = menu.mains[mainsSelector][0];
let mainRecipe = menu.mains[mainsSelector][1];
let dessertDish = menu.desserts[dessertSelector][0];
let dessertRecipe = menu.desserts[dessertSelector][1];
console.log(`${name}, your Menu is as follows:\n`);
console.log(`Starter: ${starterDish}`);
console.log(`Main: ${mainDish}`);
console.log(`Dessert: ${dessertDish}`);
console.log('\nWe will direct you to recipes for your selected dishes');
// opens the url in the default browser
open(starterRecipe);
open(mainRecipe);
open(dessertRecipe);
} else if (userChoice.trim() === 2){
let userCourse = prompt('Is your dish a Starter, Main or Dessert? ');
let userDishName = prompt('Great! Please tell me the name of your dish ');
let userDishLink = prompt('Please provide the link to the dish recipe ');
menuUpdate = (userCourse,userDishName,userDishLink);
console.log('Menu updated with your dish!');
} else {
console.log(`Goodbye, ${name}.`);
break;
}
console.log('Would you like to perform another function?');
}
It keeps executing the code in the else block and then exiting the program.
In python I would have used something like this:
while (True):
choice = input("What is your name? ")
if choice.strip().lower() != 'john':
print("Who are you?")
break;
elif choice choice.strip().lower() != 'shaun':
print("Who are you?")
break;
else:
print("Hi there, glad you aren't John or Shaun")
continue
Stupid example but I just wanted to show how I could normally have achieved something like this before.
Would anyone be able to explain what is incorrect?
I also struggle to understand the scope in JS. Is that perhaps the problem here?
I am finding it difficult in some cases to apply my thinking from Python to JS.
Any help would be appreciated. I am really wanting to learn.
Thanks!

Maybe as a starter you can you == rather than === as it would not match the type, also in your else if it seems you are calling function incorrectly, remove =.

Openweathermap API won't work outside of VS Code

I'm still new to API's but for the life of me I can't figure out why this app works fine when viewing it on live-server in Visual Studio Code, but won't work anywhere else!
I'm still SUPER new to coding, and this is my first time using API's. Do I need to create a CRUD operation?
I posted the js file below.
let appId = 'fa19585e62ed3b8595ff01cd2670cfd2'
let units = 'imperial'
let searchMethod;
function getSearchMethod(searchTerm) {
if(searchTerm.length === 5 && Number.parseInt(searchTerm) + "" === searchTerm)
searchMethod = 'zip'
else
searchMethod = 'q'
}
function searchWeather(searchTerm) {
getSearchMethod(searchTerm)
fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`).then(result => {
return result.json()
}).then(result => {
init(result)
})
}
function init(resultFromServer) {
switch (resultFromServer.weather[0].main) {
case 'Clear':
document.body.style.backgroundImage = 'url("clear.jpg")'
break;
case 'Clouds':
document.body.style.backgroundImage = 'url("cloudy.jpg")'
break;
case 'Rain':
case 'Drizzle':
case 'Mist':
document.body.style.backgroundImage = 'url("rain.jpg")'
break;
case 'Thunderstorm':
document.body.style.backgroundImage = 'url("storm.jpg")'
break;
case 'Snow':
document.body.style.backgroundImage = 'url("snow.jpg")'
break
default:
break;
}
let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader')
let temperatureElement = document.getElementById('temperature')
let humidityElement = document.getElementById('humidity')
let windSpeedElement = document.getElementById('windSpeed')
let cityHeader = document.getElementById('cityHeader')
let weatherIcon = document.getElementById('documentIconImg')
weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png'
let resultDescription = resultFromServer.weather[0].description
weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1)
temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176 '
windSpeedElement.innerHTML = 'Wind at ' + Math.floor(resultFromServer.wind.speed) + ' m/s'
cityHeader.innerHTML = resultFromServer.name
humidityElement.innerHTML = 'Humidity levels at: ' + resultFromServer.main.humidity + '%'
setPositionForWeatherInfo()
}
function setPositionForWeatherInfo() {
let weatherContainer = document.getElementById('weatherContainer')
let weatherContainerHeight = weatherContainer.clientHeight
let weatherContainerWidth = weatherContainer.clientWidth
weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`
weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`
weatherContainer.style.visibility = 'visible'
}
document.getElementById('searchBtn').addEventListener('click', () => {
let searchTerm = document.getElementById('searchInput').value
if(searchTerm)
searchWeather(searchTerm)
})

It looks like you might have some issues with your code because you're asking for data over HTTP instead of HTTPS
Refer to the following MDN page:
If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default. Consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). Passive mixed content is displayed by default, but users can set a preference to block this type of content, as well.

Change URL in searchWeather from http://api.openweathermap.org/... to https://api.openweathermap.org/...

const scoping issue within a switch statement

I have the following code in my reducer. In both cases, findFile() returns a result, however, only in the first occurrence (setImageRotation) will "origFile" get set. Changing the name of the second occurrence of "origFile" will allow it to get set. I'm wondering why this is case, as const has a block level scope.
function handler(stateArg, action) {
const state = stateArg || {};
let nextState;
switch (action.type) {
case actions.types.setImageRotation: {
const origFile = findFile(action.fileUid, state.files);
const newfile = Object.assign({}, origFile, { rotation: action.rotation });
nextState = updateStateFile(state, newfile);
break;
}
case actions.types.setImageRegionOfInterest: {
const origFile = findFile(action.fileUid, state.files);
const newfile = Object.assign({}, origFile, { roi: action.roi });
nextState = updateStateFile(state, newfile);
break;
}
}
return nextState || state;
}
Notes:
origFile is not defined anywhere else in my solution.
there are no console errors
Transpiled Code:
case actions.types.setImageRegionOfInterest:{
var origFile = findFile(action.fileUid, state.files);
var newfile = (0, _assign2.default)({}, origFile, { roi: action.roi });
nextState = updateStateFile(state, newfile);
break;
}
case actions.types.setImageRotation:{
var _origFile = findFile(action.fileUid, state.files);
var _newfile = (0, _assign2.default)({}, _origFile, { rotation: action.rotation });
nextState = updateStateFile(state, _newfile);
break;
}

As people stated in the discussion, this code works. What I ran into was a bug with Google Chromes debugger & source mapping. When I turned source mapping off and debugged the transpiled code, I got the correct value for "origfile".