We Keep Coding

Why in this example using callback function in forEach method gives wrong output?

I am trying to use callback function with forEach method to print in the console the result of 3 prompts but instead I have 5 outputs.
const personalMovieDB = {
genres: [],
writeYourGenres: function () {
for (let i = 1; i <= 3; i++) {
let favoriteGenre = [];
while (favoriteGenre == null || favoriteGenre == "") {
favoriteGenre = prompt(`Your favorite movie genre under number ${i}`);
this.genres[i - 1] = favoriteGenre;
}
this.genres.forEach((item, i) => {
console.log(`Favorite genre ${i+1} - ${item}`);
});
}
}
}

Just remove printing functionality from a loop
const personalMovieDB = {
genres: [],
writeYourGenres: function() {
for (let i = 1; i <= 3; i++) {
let favoriteGenre = [];
while (favoriteGenre == null || favoriteGenre == "") {
favoriteGenre = prompt(`Your favorite movie genre under number ${i}`);
this.genres[i - 1] = favoriteGenre;
}
}
this.genres.forEach((item, i) => {
console.log(`Favorite genre ${i+1} - ${item}`);
});
}
}
personalMovieDB.writeYourGenres()

How to stop looping text animation

I am a student studying JavaScript.
I found the js code for the scrambled text animation, but I want to stop looping.
(Because I want to read the contents)
Anyone can explain to stop looping in the 'for or if' part?
Also, are there any unnecessary parts of the JavaScript code?
Thanks in advance for the answer.
html
// ——————————————————————————————————————————————————
// TextScramble
// ——————————————————————————————————————————————————
class TextScramble {
constructor(el) {
this.el = el
this.chars = 'かきくけこらりるれろ'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({
from,
to,
start,
end
})
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let {
from,
to,
start,
end,
char
} = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
// ——————————————————————————————————————————————————
// Example
// ——————————————————————————————————————————————————
const phrases = [
'ロレム・イプサムの嘆き、トマト大好き学部のエリット、しかし時と活力、そのような労働と悲しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。クピダタットのつるの痛みになりたい宿題に、批判されてきたら痛み、マグナ逃亡しても結果の喜びを生成しません。先例クピダタットブラックは先例していない、つまり、彼らはあなたの悩みに責任がある人の、一般的な義務を捨て、魂を癒しています。'
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 800)
})
counter = (counter + 1) % phrases.length
}
next()
<div id="main">
<div class="container">
<div class="glitch" data-text="About">About</div>
<div class="glow">About</div>
</div>
<div class="scanlines"></div>
<div class="text"></div>
</div>

I think you should try adding delay in your loop
see if this helps you
for (let i=0; i<10; i++) {
task(i);
}
function task(i) {
setTimeout(function() {
// Add tasks to do
}, 2000 * i);
}

Function gets called before the subscribe call is completed in Angular

I am fetching datas from server but before the call gets completed the function gets called returning an empty array.I am new to RxJs could any one help me on it
getRows: (params) => {
setTimeout(() => {
const dataAfterSortingAndFiltering = this.sortAndFilter(audits.docs, params.sortModel, params.filterModel);
const rowsThisPage = dataAfterSortingAndFiltering.slice(0, audits.items.end);
let lastRow = -1;
if (dataAfterSortingAndFiltering.length <= params.endRow) {
lastRow = dataAfterSortingAndFiltering.length;
}
params.successCallback(rowsThisPage, lastRow);
}, 3000);
sortAndFilter function:
sortAndFilter(allOfTheData, sortModel, filterModel) {
return this.sortData(sortModel, this.filterData(filterModel, allOfTheData));
}
filterData function:
filterData(filterModel, data) {
const filterKeys = Object.keys(filterModel);
const filterPresent = filterModel && Object.keys(filterModel).length > 0;
if (!filterPresent) {
return data;
}
const resultOfFilter = [];
const filterParams = [];
for (let i = 0; i < filterKeys.length; i++) {
filterParams.push(`${filterKeys[i]}=${filterModel[filterKeys[i]].filter}`);
}
const params = filterParams.join('&');
this.auditService.getColumnSearch(params).pipe(first()).subscribe((datas: any) => {
resultOfFilter.push(...datas.docs);
});
return resultOfFilter;
}
SortData function:
sortData(sortModel, data) {
console.log('sortModel got called', sortModel);
console.log('data', data);
const sortPresent = sortModel && sortModel.length > 0;
if (!sortPresent) {
return data;
}
const resultOfSort = data.slice();
resultOfSort.sort((a, b) => {
for (let k = 0; k < sortModel.length; k++) {
const sortColModel = sortModel[k];
const valueA = a[sortColModel.colId];
const valueB = b[sortColModel.colId];
if (valueA == valueB) {
continue;
}
const sortDirection = sortColModel.sort === 'asc' ? 1 : -1;
if (valueA > valueB) {
return sortDirection;
} else {
return sortDirection * -1;
}
}
return 0;
});
return resultOfSort;
}
Before the server call gets completed the sortData function returns the data as [].

Leverage the feature of async and await
export class AuditComp {
getRows(params) {
setTimeout(() => {
const dataAfterSortingAndFiltering = this.sortAndFilter(audits.docs, params.sortModel, params.filterModel);
const rowsThisPage = dataAfterSortingAndFiltering.slice(0, audits.items.end);
let lastRow = -1;
if (dataAfterSortingAndFiltering.length <= params.endRow) {
lastRow = dataAfterSortingAndFiltering.length;
}
params.successCallback(rowsThisPage, lastRow);
}, 3000);
}
sortAndFilter(allOfTheData, sortModel, filterModel) {
return this.sortData(sortModel, this.filterData(filterModel, allOfTheData));
}
sortData(sortModel, data) {
console.log('sortModel got called', sortModel);
console.log('data', data);
const sortPresent = sortModel && sortModel.length > 0;
if (!sortPresent) {
return data;
}
const resultOfSort = data.slice();
resultOfSort.sort((a, b) => {
for (let k = 0; k < sortModel.length; k++) {
const sortColModel = sortModel[k];
const valueA = a[sortColModel.colId];
const valueB = b[sortColModel.colId];
if (valueA == valueB) {
continue;
}
const sortDirection = sortColModel.sort === 'asc' ? 1 : -1;
if (valueA > valueB) {
return sortDirection;
} else {
return sortDirection * -1;
}
}
return 0;
});
return resultOfSort;
}
async filterData(filterModel, data) {
const filterKeys = Object.keys(filterModel);
const filterPresent = filterModel && Object.keys(filterModel).length > 0;
if (!filterPresent) {
return data;
}
const resultOfFilter = [];
const filterParams = [];
for (let i = 0; i < filterKeys.length; i++) {
filterParams.push(`${filterKeys[i]}=${filterModel[filterKeys[i]].filter}`);
}
const params = filterParams.join('&');
await this.auditService.getColumnSearch(params).pipe(first()).toPromise()
.then((datas: any) => {
resultOfFilter.push(...datas.docs);
});
return resultOfFilter;
}
}
comment if faced any issue.

How to query almost the entire postgresql database for a property on every item? (Using sequelize and Node.js)

I'm trying to scan through an entire tree in my database, looking for two properties ('title' and 'id') for every item, and then I need to check if there's a linked database table below the current table, and if so, I need to perform the same actions on that table.
Once I get the whole tree, I need to insert those into a master variable that I can then import elsewhere throughout my web app.
(I'm at the point where I'm pretty sure I'm reinventing the wheel. I've searched the Sequelize documentation, but if there's a simple solution, I didn't see it.)
Here's the relevant portions of my current code (it's not fully working yet, but should give the idea).
(You can find the full project repository by clicking this link here.)
```
const buildTopicTreeFromCurrentDatabase = (callback) => {
let topicTree = [];
let isFinished = false;
const isSearchFinished = new Emitter();
console.log(`emitter created`);
isSearchFinished.on('finished', () => {
console.log(`the search is done`);
if (isFinished = true) {
callback(null, this.primaryTopicsShort)
};
});
/* need to go back and refactor -- violates DRY */
this.primaryTopicsShort = [];
PrimaryTopic.all()
.then((primaryTopics) => {
if (primaryTopics.length === 0) {
return callback('no Primary Topics defined');
}
for (let i = 0; i < primaryTopics.length; i++) {
this.primaryTopicsShort[i] = {
title: primaryTopics[i].title,
id: primaryTopics[i].id,
secondaryTopics: []
};
PrimaryTopic.findById(this.primaryTopicsShort[i].id, {
include: [{
model: SecondaryTopic,
as: 'secondaryTopics'
}]
})
.then((currentPrimaryTopic) => {
if (currentPrimaryTopic.secondaryTopics.length !== 0) {
for (let j = 0; j < currentPrimaryTopic.secondaryTopics.length; j++) {
this.primaryTopicsShort[i].secondaryTopics[j] = {
title: currentPrimaryTopic.secondaryTopics[j].title,
id: currentPrimaryTopic.secondaryTopics[j].id,
thirdTopics: []
};
SecondaryTopic.findById(this.primaryTopicsShort[i].secondaryTopics[j].id, {
include: [{
model: ThirdTopic,
as: 'thirdTopics'
}]
})
.then((currentSecondaryTopic) => {
if (currentPrimaryTopic.secondaryTopics.length - 1 === j) {
isSearchFinished.emit('finished');
}
if (currentSecondaryTopic.thirdTopics.length !== 0) {
for (let k = 0; k < currentSecondaryTopic.thirdTopics.length; k++) {
this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k] = {
title: currentSecondaryTopic.thirdTopics[k].title,
id: currentSecondaryTopic.thirdTopics[k].id,
fourthTopics: []
};
ThirdTopic.findById(this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].id, {
include: [{
model: FourthTopic,
as: 'fourthTopics'
}]
})
.then((currentThirdTopics) => {
if (currentThirdTopics.fourthTopics.length !== 0) {
for (let l = 0; l < currentThirdTopics.fourthTopics.length; l++) {
this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].fourthTopics[k] = {
title: currentThirdTopics.fourthTopics[l].title,
id: currentThirdTopics.fourthTopics[l].id,
fifthTopics: []
}
FourthTopic.findById(this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].fourthTopics[l].id, {
include: [{
model: FifthTopic,
as: 'fifthTopics'
}]
})
.then((currentFourthTopics) => {
if (currentFourthTopics.fifthTopics.length !== 0) {
for (let m = 0; m < currentFourthTopics.fifthTopics.length; m++) {
this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].fourthTopics[k].fifthTopics[m] = {
title: currentFourthTopics.fifthTopics[m].title,
id: currentFourthTopics.fifthTopics[m].id
}
}
}
})
.catch((err) => {
callback(err);
});
}
}
})
.catch((err) => {
callback(err)
});
}
}
})
.catch((err) => {
callback(err);
})
}
}
})
.catch((err) => {
callback(err);
})
}
})
.catch((err) => {
callback(err);
});
};
There are a few problems with this code.
First, I need to be using a DRY and recursive solution, since the database structure may change in the future.
Second, I've played around a lot with the 'finished' emitter, but I haven't figured out yet how to place it so that the event is emitted at the end of searching the database, and also so that I don't cycle back through the database multiple times.
I've been working on the following recursive solution, but the hours keep stretching by and I don't feel like I'm getting anywhere.
const buildDatabaseNames = (DatabaseNameStr, callback) => {
let camelSingular = DatabaseNameStr.slice(0,1);
camelSingular = camelSingular.toLowerCase();
camelSingular = camelSingular + DatabaseNameStr.slice(1, DatabaseNameStr.length);
let camelPlural = DatabaseNameStr.slice(0,1);
camelPlural = camelPlural.toLowerCase();
camelPlural = camelPlural + DatabaseNameStr.slice(1, DatabaseNameStr.length) + 's';
let databaseNameStr = `{ "capsSingular": ${"\"" + DatabaseNameStr + "\""}, "capsPlural": ${"\"" + DatabaseNameStr + 's' + "\""}, "camelSingular": ${"\"" + camelSingular + "\""}, "camelPlural": ${"\"" + camelPlural + "\""} }`;
let names = JSON.parse(databaseNameStr);
return callback(names);
};
const isAnotherDatabase = (DatabaseName, id, NextDatabaseName) => {
DatabaseName.findById({
where: {
id: id
}
})
.then((res) => {
if (typeof res.NextDatabaseName === undefined) {
return false;
} else if (res.NextDatabaseName.length === 0) {
return false;
} else {
return true;
}
})
.catch((err) => {
console.error(err);
process.exit();
});
};
const searchDatabase = (first, i, current, next, list, callback) => {
if (typeof first === 'string') {
first = buildDatabaseNames(first);
current = buildDatabaseNames(current);
next = buildDatabaseNames(next);
}
if (first === current) {
this.first = current;
let topicTree = [];
const isSearchFinished = new Emitter();
console.log(`emitter created`);
isSearchFinished.on('finished', () => {
console.log(`the search is done`);
callback(null, this.primaryTopicsShort);
});
}
current.CapsSingular.all()
.then((res) => {
current.camelPlural = res;
if (if current.camelPlural.length !== 0) {
for (let j = 0; j < currentParsed.camelPlural.length; j++) {
if (first === current) {
this.first[i].current[j].title = current.camelPlural[j].title,
this.first[i].current[j].id = current.camelPlural[j].id
next.camelSingular = []
} else {
this.first[i]..current[j].title = current.camelPlural[j].title,
this.first[i].id = current.camelPlural[j].id,
next.camelSingular = []
}
let isNext = isAnotherDatabase(current.)
searchDatabase(null, j, next, list[i + 1], list, callback).bind(this);
}
} else {
callback(null, this.first);
}
})
.catch((err) => {
callback(err);
});
};
I decided to stop and ask for help, as I just realized that in order to make the properties (this.first[i].current[j].title = current.camelPlural[j].title) on each recursive iteration accurate, I'll have to do a JSON.stringify, alter the string for the next iteration, place all the required iterations of itinto a variable, pass it into the next recursion, and then do JSON.parse again afterwards. It seems like I'm making this ridiculously complicated?
Any help is appreciated, thank you.

While I wasn't able to make a recursive, generic solution, I did at least find some result.
const buildTopicTreeFromCurrentDatabase = (callback) => {
let topicTree = [];
const isSearchFinished = new Emitter();
isSearchFinished.on('finished', () => {
if (isFinished === 0) {
callback(null, this.primaryTopicsShort);
};
});
/* need to go back and refactor -- violates DRY */
this.primaryTopicsShort = [];
let isFinished = 0;
isFinished = isFinished++;
PrimaryTopic.all()
.then((primaryTopics) => {
isFinished = isFinished + primaryTopics.length;
if (primaryTopics.length === 0) {
return callback('no Primary Topics defined');
}
for (let i = 0; i < primaryTopics.length; i++) {
if (i === 0) {
var isLastPrimary = false;
};
this.primaryTopicsShort[i] = {
title: primaryTopics[i].title,
id: primaryTopics[i].id,
secondaryTopics: []
};
PrimaryTopic.findById(this.primaryTopicsShort[i].id, {
include: [{
model: SecondaryTopic,
as: 'secondaryTopics'
}]
})
.then((currentPrimaryTopic) => {
isFinished = isFinished - 1 + currentPrimaryTopic.secondaryTopics.length;
if (i === primaryTopics.length - 1) {
isLastPrimary = true;
};
if (currentPrimaryTopic.secondaryTopics.length === 0 && isLastPrimary) {
isSearchFinished.emit('finished');
} else if (currentPrimaryTopic.secondaryTopics.length !== 0) {
for (let j = 0; j < currentPrimaryTopic.secondaryTopics.length; j++) {
if (j === 0) {
var isLastSecondary = false;
}
this.primaryTopicsShort[i].secondaryTopics[j] = {
title: currentPrimaryTopic.secondaryTopics[j].title,
id: currentPrimaryTopic.secondaryTopics[j].id,
thirdTopics: []
};
SecondaryTopic.findById(this.primaryTopicsShort[i].secondaryTopics[j].id, {
include: [{
model: ThirdTopic,
as: 'thirdTopics'
}]
})
.then((currentSecondaryTopic) => {
isFinished = isFinished - 1 + currentSecondaryTopic.thirdTopics.length;
if (j === currentPrimaryTopic.secondaryTopics.length - 1) {
isLastSecondary = true;
}
if (currentSecondaryTopic.thirdTopics.length === 0 && isLastPrimary && isLastSecondary) {
isSearchFinished.emit('finished');
} else if (currentSecondaryTopic.thirdTopics.length !== 0) {
for (let k = 0; k < currentSecondaryTopic.thirdTopics.length; k++) {
if (k === 0) {
var isLastThird = false;
};
this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k] = {
title: currentSecondaryTopic.thirdTopics[k].title,
id: currentSecondaryTopic.thirdTopics[k].id,
fourthTopics: []
};
ThirdTopic.findById(this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].id, {
include: [{
model: FourthTopic,
as: 'fourthTopics'
}]
})
.then((currentThirdTopic) => {
isFinished = isFinished - 1 + currentThirdTopic.fourthTopics.length;
if (k === currentSecondaryTopic.thirdTopics.length - 1) {
isLastThird = true;
};
if (currentThirdTopic.fourthTopics.length === 0 && isLastPrimary && isLastSecondary && isLastThird) {
isSearchFinished.emit('finished');
} else if (currentThirdTopic.fourthTopics.length !== 0) {
for (let l = 0; l < currentThirdTopic.fourthTopics.length; l++) {
if (l = 0) {
var isLastFourth = false;
}
this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].fourthTopics[k] = {
title: currentThirdTopic.fourthTopics[l].title,
id: currentThirdTopic.fourthTopics[l].id,
fifthTopics: []
}
FourthTopic.findById(this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].fourthTopics[l].id, {
include: [{
model: FifthTopic,
as: 'fifthTopics'
}]
})
.then((currentFourthTopics) => {
isFinished = isFinished - 1 + currentFourthTopics.fifthTopics.length;
if (l = currentThirdTopic.fourthTopics.length - 1) {
isLastFourth = true;
}
if (currentFourthTopic.fifthTopics.length === 0 && isLastPrimary && isLastSecondary && isLastThird && isLastFourth) {
isSearchFinished.emit('finished');
} else if (currentFourthTopic.fifthTopics.length !== 0) {
for (let m = 0; m < currentFourthTopic.fifthTopics.length; m++) {
if (m = 0) {
var isLastFifth = false;
}
if (m === currentFourthTopic.fifthTopics.length - 1) {
isLastFifth = true;
}
this.primaryTopicsShort[i].secondaryTopics[j].thirdTopics[k].fourthTopics[k].fifthTopics[m] = {
title: currentFourthTopic.fifthTopics[m].title,
id: currentFourthTopic.fifthTopics[m].id
};
if (isLastPrimary === true && isLastSecondary === true && isLastThird === true && isLastFourth === true && isLastFifth === true) {
isFinished = isFinished - 1;
isSearchFinished.emit('finished');
};
}
}
})
.catch((err) => {
callback(err);
});
}
}
})
.catch((err) => {
callback(err)
});
}
}
})
.catch((err) => {
callback(err);
})
}
}
})
.catch((err) => {
callback(err);
});
}
})
.catch((err) => {
callback(err);
});
};
I eventually learned that the root of the problem I face was in the asynchronous nature of the database calls.
To prevent the final callback from getting fired before all the calls were complete, I used something called a semaphore. It's a thing used often in other languages, but not often used in JavaScript (so I hear).
You can see how it works by looking at the variable isFinished. The value starts at zero and goes up for every entry it retrieves from the database. When it finishes processing the data, the code subtracts 1 from the total value. The final callback event (in the emitter), can only go off once the isFinished value returns to zero.
This isn't the most elegant solution. As #Timshel said, it probably would have been wiser not to design this database portion not have so many different tables.
But this solution will do for now.
Thanks.

How to properly return value from a data inside the function

Im new to javascript and started to learn amazing stuff from it. As the code below how can I be able to return the value of index inside getData().then(data => {. getData function has json response values.
subPatternStart() {
getData().then(data => {
var patternStart = 1525750500000;
var index = 0;
for (var i = 0; i < data.length; i++) {
if ( patternStart >= data[i].time && patternStart < data[i+1].time ) {
//...somecode
}
}
console.log("Index:" , index);
})
}
What I want to achieve is that when I call this function I should ONLY get the value of index, which in this case the console log value is equivalent into 1.
I have this in my render method.
render() {
index={this.subPatternStart()}
}
In this simple code, it returns the exact value in the render method, and I want to do something like this.
subPatternStart() {
var patternStart = 1;
return patternStart;
}

You should set the state of the component with the value you get from getData. Then React can update it self and render the page. For example
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
index: 0
}
}
subPatternStart() {
getData().then(data => {
var patternStart = 1525750500000;
var index = 0;
for (var i = 0; i < data.length; i++) {
if (patternStart >= data[i].time && patternStart < data[i + 1].time) {
//...somecode
}
}
this.setState({
index: index
});
})
}
render() {
index = this.state.index
}
}

the function subPatternStart calls an async function getData so you need to use either callback or promises to get data in return.
1. Using Callbacks
subPatternStart(callbackFunction) {
getData().then(data => {
var patternStart = 1525750500000;
var index = 0;
for (var i = 0; i < data.length; i++) {
if (patternStart >= data[i].time && patternStart < data[i + 1].time) {
//...somecode
}
}
console.log("Index:", index);
callbackFunction(index);
})
}
// calling the function
render() {
var index;
this.subPatternStart((i) => { index = i })
}
2. Using Promises
subPatternStart(callbackFunction) {
var promise = new Promise(resolve => {
getData().then(data => {
var patternStart = 1525750500000;
var index = 0;
for (var i = 0; i < data.length; i++) {
if (patternStart >= data[i].time && patternStart < data[i + 1].time) {
//...somecode
}
}
console.log("Index:", index);
resolve(index);
})
})
return promise;
}
// calling the function
async render() {
index = await this.subPatternStart();
}