Category: javascript

I’m having trouble retrieving scoreboard information using Mineflayer. It should write the entire scoreboard to the log, and the API documentation hasn’t been helpful. Could you provide guidance or point me to relevant resources?

Thanks

I am hosting my site using XAMPP and I have a database connection I can reference.

I have 3 drop down menus titled: Translations, books, chapters. The data for each is stored in my db.

I want to use Vanilla JS to query the dropdown menu content for books based on the users input for translations.

Example: If the user selects “English”, the books dropdown display all English books as soon as English has been selected.

I want these dropdowns to update in real time using fetch if possible. I plan on using this multiple times, I would like to have the Query on my main page and the server / database connection on another.

How would I create a JS function to run a query based on the value of one dropdown menu and pull data from a connection referenced on another file?

Example:

book.html

async function fetchBooks() {
  const selectedTranslation = document.getElementById('translations').value;

  try {
    const response = await fetch(
      `/getBooks?translation=${selectedTranslation}`,
    );
    const books = await response.json();

    const booksDropdown = document.getElementById('books');
    booksDropdown.innerHTML = '';

    books.forEach((book) => {
      const option = document.createElement('option');
      option.value = book;
      option.textContent = book;
      booksDropdown.appendChild(option);
      console.log(option);
    });
  } catch (error) {
    console.error('Error fetching books:', error);
  }
}

database.js

// server.js

const express = require('express');
const mysql = require('mysql');

const app = express();

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'dataBase',
});

app.get('/getBooks', (req, res) => {
  const selectedTranslation = req.query.translation;
  const query = `SELECT DISTINCT book FROM english`;

  connection.query(query, [selectedTranslation], (err, results) => {
    if (err) {
      console.error('Error fetching books:', err);
      res.status(500).json({ error: 'Failed to fetch books' });
    } else {
      const books = results.map((result) => result.book);
      res.json(books);
    }
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

I have 3 HTML dropdown menus for translations, books, and chapters. The selected content of the 1st impacts the content shown on the 2nd, and the 2nd impacts the 3rd. I also need the dropdowns to update in real time so I’m using JavaScript to detect when the selections change.

I want to call this query from the page where the data will be displayed.. “SELECT DISTINCT book FROM translationTable”

I can’t nest PHP Code inside of JS, so how would I call my table using JS if I have a separate file for my DB connection? I want to try to stay as vanilla JS as possible. Thank you.

// server.js

const mysql = require('mysql');

// Create a connection to the database
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'myDB'
});

module.exports = connection;

// book.html
<script>
  var sql = "SELECT DISTINCT book FROM translationTable";
  result = ?;

displayContent(result);

</script>

Eu tenho 3 botoes e quero navegar entre eles, por exemplo: setinha pra cima para ir subindo passando de botao para outro, e setinha para baixo para ir descendo entre os botoes.

e quando eu quiser apertar o a tecla enter para mostras um console log do botao que foi escolido.

a linguagem utilizada é a javaScipt

enter image description here my code JS

enter image description here my code HTML

isoo foi o que tentei mas nao deu certo

Good day!
I am developing a practice UI code in Angular 17 but getting error upon ng serve for the entire project:

NG9: Property 'roomsCatalog' does not exist on type 'RoomsCatalogComponent'.

Project code can be found here GitHub repo link and path for the mentioned file is my-workspaceprojectsnew-hotel-inventorysrcapproomsrooms-catalogrooms-catalog.component.ts

The rooms-catalog.component.ts file is:

import { Component, Input, OnInit } from '@angular/core';
import { RoomDetails } from '../rooms';

@Component({
  selector: 'app-rooms-catalog',
  templateUrl: './rooms-catalog.component.html',
  styleUrl: './rooms-catalog.component.scss'
})
export class RoomsCatalogComponent implements OnInit{
  @Input() roomsCatalog: RoomDetails[]=[];
  constructor(){}
  ngOnInit(): void {}
}

The rooms.ts file imported into rooms-catalog.component.ts file is:

export interface RoomCount{
    totalRooms : number;
    availableRooms : number;
    bookedRooms : number;
}

export interface RoomDetails {
    roomType : string;
    roomNumbers : number;
    amenities : string;
    price : number;
    photos : string;
    checkinTime : Date;
    checkoutTime : Date
}

Also the rooms-catalog.component.html file is:

  <table class="table">
    <tr>
      <th>Index</th>
      <th>Even/Odd</th>
      <th>Room Type</th>
      <th>Number of rooms</th>
      <th>Room Amenities</th>
      <th>Checkin Time</th>
      <th>Checkout Time</th>
      <th>Room Price</th>
    </tr>
    <tr *ngFor="let room of roomsCatalog; let e = even; let o = odd; let i=index;"
        [ngClass]="e? 'odd' : 'even'">
        <th>{{i+1}}</th>
        <th>{{e? "Odd" : "Even"}}</th>
        <th>{{room.roomType}}</th>
        <th>{{room.roomNumbers}}</th>
        <th>{{room.amenities}}</th>
        <th>{{room.checkinTime | date}}</th>
        <th>{{room.checkoutTime | date}}</th>
        <th>{{room.price}}</th>
    </tr>
  </table>

Would appreciate any help in this regard!

Many thanks in advance

Tried checking the error online but got no help. Confused as roomsCatalog is present as a property in the exported class RoomsCatalogComponent

I have an autocomplete in my angular reactive form.
I want to display myObject.name but use myObject.id as value.

When the form is prefilled with existing values, I need to get myObject.name base on myObject.id which takes some time. So unfortunately, what is shown in the autocomplete is an id and not a name. I can’t make it work.

I tried with observable but it looks like displayWith does not support it. How can I do that ?

Typescript :

    public displayWith(id: string): string {
    if (!id) {
        return '';
    }
    let freespinName = '';
    this.freespins$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(freespins => {
        const found = freespins.find((freespin: Freespin) => freespin.id === id);
        freespinName = found?.name || id;
    });

    return freespinName;
}

HMTL :

                     <mat-label>Freespin</mat-label>
                        <input type="text"
                               placeholder="Select a freespin"
                               matInput
                               formControlName="rewardId"
                               [matAutocomplete]="auto">
                        <mat-autocomplete requireSelection #auto="matAutocomplete"
                                          [displayWith]="displayWith.bind(this)">
                            <mat-option *ngFor="let freespin of filteredFreespins[i] | async"
                                        [value]="freespin.id">
                                {{freespin.name}}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>

import React, { useEffect, useState } from 'react';

function MainContent() {
    const [objectsArr, setObjectsArr] = useState(null);

    useEffect(() => {
        async function fetchMyAPI() {
            let response = await fetch('http://localhost:3030/pickedObjects')

            response = await response.json();
            setObjectsArr(response)
        }
        fetchMyAPI()
    }, [])

    const contentDiv = document.getElementsByClassName('content')[0];

    return (
        <ul className="content row">
            {objectsArr.map((item) => {
                return (
                    <ContentItem className="item" item={item} />
                )
            })}
        </ul>
    );
}

export default MainContent;

I am trying to render an array of elements, using useEffect that calls a fetch, and the I use .map() to directly render them

So when I try to run this I get an error:

Uncaught TypeError: Cannot read properties of null (reading ‘map’)

which is a setObjectsArr initial value. So is the setObjectsArr(response) in the useEffect not being set, or it’s being set too early?

How can I fix that?

I tried almost everything but I cant find the reason why it doesn’t work.The fetch itself is okay, it returns a decent value, but useState doesn’t set it.

I have the following object. The data comes in from 2 separate messages, both of which have a timestamp and icao (id number). However, one message has ident info (callsign) and the other has aircraft position.

export interface AircraftInfo {
  timestamp: Date
  icao: string
  ident?: {
    callsign: string
  }
  pos?: {
    lat: number
    lon: number
    altitude: number
  }
}

As the data comes in, I update the necessary sections. What’s the most elegant way to update the pos property? I suspect if it already exists, the best thing to do is to update individual properties rather than overwriting with a new object. If it doesn’t, a new object has to be assigned.

This results in code like this:

  // update position if position exists, otherwise create position with position
  if (info.pos) {
    info.pos.altitude = altitude
    info.pos.lon = lon
    info.pos.lat = lat
  } else {
    info.pos = { altitude, lon, lat }
  }

This feels a little clunky. Is there a better way to do this?

I am adding pagination and query search into my Ticket List

This is the Ticket List Page Code

  const [query, setQuery] = useState("");

  function handleSearch(e) {
    console.log(e.target.value);
    setQuery(e.target.value);
  }
  useEffect(() => {
    dispatch(getAllTicketsAsync(page, query));
  }, [page, query]);

This is Ticket Slice, I am using Redux Toolkit

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async (page, query) => {
    const response = await getTickets(page, query);
    // The value we return becomes the `fulfilled` action payload
    return response;
  }

and finally this is API call

export async function getTickets(page, query) {
  const response = await fetch(
    `http://localhost:8080/tickets?_page=${page}&_limit=4&q=${query}`
  );
  const data = await response.json();
  const totalItems = await response.headers.get("X-Total-Count");
  console.log(data);

  return {
    data,
    totalItems: +totalItems,
  };
}

);

I could not see what am i doing wrong here? Query should be empty string when nothing is typed in it then why this is the requested URL – “http://localhost:8080/tickets?_page=1&_limit=4&q=[object%20Object]”

Just looking if this already exists before I take a stab at it.

Looking for a js or jquery plugin that has all the plumbing to display essentially a SELECT (dropdown) but with the OPTIONs being a custom table/grid where selecting a TR would be equivalent to selecting an OPTION.

I can find tons of select replacement plugins, but nothing that allows for an arbitrary number of data columns to be displayed (and aligned across all options like a table would take care of). Just somewhat surprised if no one has ever tackled this before.

Are there any use cases of using File System API in Firefox? All examples on MDN show savePicker functions that are not supported by Firefox. Can you use this API for something useful or is it useless in Firefox?

I’ve found requestFileSystem but it’s deprecated and not supported by Firefox.

I want to play with the API and maybe create FS library or extension to lightning-fs for usage with isomorphic-git.

Hello PHP and Laravel Community, I am working on a Laravel project where I am using the Webklex PHP IMAP library to read incoming emails from a mail server, insert them into a database, and then display them to users for consultation. This includes showing the email in HTML format to the client. Therefore, id like to secure these emails against JavaScript injection before they are inserted into the server database. Here are my specific questions and concerns:

• What are the best practices for securely handling and storing email data (headers, text, HTML, attachments) in PHP, especially considering the risks of SQL and JavaScript injections?

• Given that the HTML content of the emails will be displayed to users, what are the recommended methods to sanitize or process this content for safe display?

• I intend to only accept image and PDF attachments. What is the most secure way to filter and process these attachments before inserting them into the database?

• Do you have any recommendations or resources on best practices for securely handling email content and attachments in this scenario?

Any guidance or resources you can provide would be immensely helpful.

Thank you in advance for your expertise and assistance!

Before posting this question, I have researched online for resources pertaining to email security in this context. However, I found that most available resources are quite general and do not precisely address my scenario’s specific challenges. I am eager to learn from the community’s collective experience. What would you recommend or what steps have you taken in similar situations to ensure the security of emails, especially considering JavaScript injection risks and the safe handling of specific types of attachments?

Using Sheets, when I input a part number into a cell B3:B7 for a VLOOKUP in G & H sometimes it recognizes the input and sometimes it does not. I’m pulling off of “Shelf Stock” which is an IMPORTRANGE from another sheet.
https://docs.google.com/spreadsheets/d/1v-987Qg1eUH5Hev9NR6HI41GxrUYdb_6Yi37kd0_HIs/edit#gid=604824118

I do not have node-sass or sass package installed in my app. But i keep getting this error me

ERROR in ./src/scss/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/scss/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:108:19)
    at Object.sassLoader (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:46:20)
ERROR in ./node_modules/@accelerate/prime-ng/resources/themes/gm/theme.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./node_modules/@accelerate/prime-ng/resources/themes/gm/theme.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:108:19)
    at Object.sassLoader (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:46:20)
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:108:19)
    at Object.sassLoader (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:46:20)
ERROR in ./src/app/components/home/home.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:108:19)
    at Object.sassLoader (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:46:20)
ERROR in ./src/app/components/mast/mast.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:108:19)
    at Object.sassLoader (C:UsersDocumentsRepositories-GitHubIDM_157256_device-hierarchy-uinode_modulessass-loaderlibloader.js:46:20)

Here is my package.json

{
  "name": "@accelerate/prime-ng-quick-start",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@accelerate/prime-ng": "0.0.47",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.0",
    "@angular/compiler": "^8.2.0",
    "@angular/core": "^8.2.0",
    "@angular/forms": "^8.2.0",
    "@angular/material": "^8.2.0",
    "@angular/platform-browser": "^8.2.0",
    "@angular/platform-browser-dynamic": "^8.2.0",
    "@angular/router": "^8.2.0",
    "chart.js": "^2.9.3",
    "classlist.js": "^1.1.20150312",
    "css-element-queries": "^1.2.0",
    "font-awesome": "^4.7.0",
    "ng-mocks": "^9.0.0",
    "normalize.css": "^8.0.1",
    "primeflex": "^1.0.0",
    "primeicons": "^2.0.0",
    "primeng": "^8.1.1",
    "quill": "^1.3.7",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.4",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "^8.2.0",
    "@angular/language-service": "^8.2.0",
    "@types/jasmine": "^3.3.10",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^11.11.3",
    "codelyzer": "^5.2.2",
    "jasmine": "^3.5.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "ts-node": "^8.0.3",
    "tslint": "^5.16.0",
    "typescript": "^3.5.3"
  }
}

There is no node-sass or sass in my package.json. And the weird thing is that, my friend is using the same version of everything as I am like: node, cli, env variables etc and his is working just fine but I am seeing these error I cannot figure out why am I getting this error. I do not want to install any other packages since i know that its already working on my friend’s machine.

In an salesforce lwc project i have a list of checkboxes populated with an array. The requirement is that when any other checkbox is selected it unselects the first one. I am trying this code

@track acc_array = [];

  get options() {
    return [
      { label: "Any option", value: "Any option" },
      { label: "Option One", value: "Option One" },
      { label: "Option Two", value: "Option Two" },
      { label: "Option Three", value: "Option Three" }
    ];
  }
handleValidity(e) {
    try {
      
      var arr = e.target.value.join(";");
      const tt = arr.split(";");
      if (tt[0] == "Any Option" && tt.length > 1) {
        tt.splice(0);
        this.acc_array = tt;
      }
      this.message = "Selected " + this.acc_array;
    } catch (e) {
      this.message = "Error " + e;
    }

<lightning-checkbox-group
    class="slds-box"
    label="Select a color"
    options={options}
    value={acc_array}
    onchange={handleValidity}