Category: javascript

I need advice.
via .map I get the product id (item.id), and from another JSON text I would need it to find in it the number of that id and take the same id found product_name and rewrite the product id to that product_name from the second JSON text.

https://justpaste.it/4cik4

{ subCategoryList && (
                
                    subCategoryList.map(function(item, id) {
                        return(
                          <tr key={id}>
                            <td>{item.subproduct_name}</td>
                            <td>{item.products_id}</td> <--- HERE
                            <td>{item.product_url_header}</td>
                            <td className='action'> <i class='bx bx-pencil hover' onClick={()=>editSubcategoryRecord(item.id, item.products_id, item.subproduct_name, item.product_url_header)}></i> <i class='bx bx-trash-alt hover' onClick={()=>deleteSubCategory(item.id)}></i> </td>
                          </tr>
                    )}.bind(this))

                  )
                }

This is what confuses me alot:

When we give a variable a for an example a empty string we do it like this:

const empty = ""

But for useState we do it like this:

const [color, setColor] = useState("Black")

But why? I get so confused that the syntax for useState looks like that.
And ofc searching did not help me.

Similar to what I did in other parts of the document and worked, I was trying to hide the delete button if an user isn’t logged in or in other profile. However, I get this message “Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘style’)
at showEditDelete”, pointing to the delete deleteBtn.display.style

async function showEditDelete() {
let deleteBtn = document.getElementById("delete-col");
let currentProfileId = await usersAPI_auto.getById(userId);
let loggedUserId = sessionManager.getLoggedUser().userId;
if (sessionManager.isLogged()){
    if (loggedUserId != currentProfileId){
        deleteBtn.style.display = "none"
    }
} else {
    deleteBtn.style.display = "none";  
}

}

Im trying to implement a responsive table directive in my angular app, which sets the min and max width and font-size of the columns in a MatTable.

These values are based on the parent containers width, and the number of columns.

The directive gets the column definitions as an input array of strings.(eg.[“ordernum”,”ordername”,”timestamp”])

Currently the code looks like this:

@Input('ResponsiveTable') columns: string[] = [];
...
constructor(
    private el: ElementRef,
    private host: MatTable<any>,
    private breakpointObserver: BreakpointObserver
  ) {}
....

 ngOnInit(): void {
    //set table style props
    this.el.nativeElement.style.minWidth =
      minCellWidth * this.columns.length + 'px';
    this.el.nativeElement.style.width = tableWidth + '%';

    // //subscriptions
    this.subscriptions.push(
      this.host.contentChanged.subscribe(() =>
        setTimeout(() => this.initStyle())
      )
    );
  }

  
...
  initStyle() {
    //get tableSize
    const parentWidth = this.el.nativeElement.parentNode.clientWidth;
    this.maxColumnWidth =
      parentWidth / this.columns.length > minCellWidth
        ? parentWidth / this.columns.length
        : minCellWidth;

    //set the headers, and maxWidth
    this.el.nativeElement.querySelectorAll('th').forEach((header: any) => {
      header.style.maxWidth = this.maxColumnWidth + 'px';
      header.style.fontSize = `calc(8px + 0.25vw + 0.5vw / ${this.columns.length})`;
      header.style.padding = '6px';
    });

    //set the table cells and maxWidth
    this.el.nativeElement.querySelectorAll('td').forEach((cell: any) => {
      cell.style.maxWidth = this.maxColumnWidth + 'px';
      cell.style.fontSize = `calc(8px + 0.25vw + 0.5vw / ${this.columns.length})`;
    });

    this.initBreakpointObserver();

    this.tableWidth = this.el.nativeElement.width;
  }

I think this is not efficient, because every time a content change happens, I have to query all the cells and headers, to set their max and min width.

It would be nice to add some CSS to the parent element, that selects all its children mat-cells and mat-headers, and set their size. Sadly I cant use a classic CSS class beacause the size value is based on the number of table columns.

Is there a way to progmatically add a CSS class that selects all the children cells and applies the style to them, even if a new row is added?

Or what could be a better solution?

I need to create a findUnique() function that creates a new array with non-repeating values.

This is how it should be:

console.log([10, 5, 6, 10, 6, 7, 2].findUnique()) // [5, 7, 2]

My try:

Array.prototype.findUnique = function() {
    let arr = this;
    let newarr = arr.filter((v, i, a) => {
       return a.indexOf(v) === i
    })
    return newarr
}

But it returns:

[10, 5, 6, 7, 2]

How can I make it return only non-repeated values?

I want to create dropdown fields containing countries and cities using PrimeReact. I want to provide this with json file. After the country is selected, I want the cities to be listed accordingly. I couldn’t find any examples. How can I achieve this?

"data" :[
    {
      "code2": "AF",
      "code3": "AFG",
      "name": "Afghanistan",
      "capital": "Kabul",
      "region": "Asia",
      "subregion": "Southern Asia",
      "states": [
        {
          "code": "BDS",
          "name": "Badakhshān",
          "subdivision": null
        },

Eu consigo obter alguns objeto em uma requisição porem gostaria de colocar todos esses objetos em uma única array. Quando crio uma array e coloco todos os objeto parece q são criada uma array para cada objeto é estranho e isso buga a minha mente.

const veiculos = dados => {

    var dev = []

    let fetchPro = fetch(`${baseUrl}/api/devices/${dados.deviceId}`, {
        headers: {
            cookie: cookie
        },
    }).then(reponse => reponse.json())
    .then(reponse => {
        dados.Prefixo = reponse.name;
        dev.push(dados)
    })

    Promise.resolve(fetchPro)
    .then(() => log.log(dev))

}

Obtenho esse resultado….

enter image description here

Eu so queria colocar os objetos dentro de uma única array por por exemplo

enter image description here

In my react app, I am retrieving some data from firebase , but when I try to store the items in my state it stores only the first item of the fulfilled promises ,

const HomePage = (props) => {
  const [events ,setEvents] = React.useState([])
const fetchGames=async()=>{
    const DB =await db.collection('game').get()

    DB.docs.forEach(item=>{
      setEvents([...events,item.data()])
      console.log(item.data()); // Here shows all the items that stored in my firebase collection
     })
    }
    
    useEffect(()=>
    {
      fetchGames()
    }, [])
return(
<div>
{
     events.map((event)=>
        (
          <div>
            {event.home_color}
          </div>

        )
        )
    }
</div>
)

Eventually the events state will display only one item , unlike in the console log which displayed all the items , how to fix this?

here getDAtes and isChecked are boolean values and we fetch startDate from grid and caluclate starttime according to it. there are time values in allTimes array

//index.js

{field: 'starttime', headername: 'starttime', renderCell: (params) => (
  <Dropdown value={(getDates && isChecked) ? getStartTime(params.row.startDate) : 
   getDropDownStartTime(params)}
     options={[...allTimes]}
     onChange={(event) => {
       params.row[STARTTIME] = event.target.value;
       handleGridUpdate(params.row, STARTTIME);
     }}
  />
}

//handlegridupdate

handleGridUpdate = useCallback((row,type) => {
  const item = info[row.id] ? Object.assign({}, info[row.id]) : {};
  if(type === STARTTIME){
    item.starttime = row.starttime;
  }
info[row.id]=item;
dispatch(setInfo(info));
}, [dispatch, info]);

I want to replace n which is in array of objects.
For now I came across this, but it replaces only string, not an actual ‘n’ which makes the line break.

var obj = {
   'a' : 'nThe fooman poured the drinks.',
   'b' : {
      'c' : 'Dogs say fook, but what does the fox say?'
   }
}

console.log (JSON.parse(JSON.stringify(obj).replace(/n/g, '')));

Fiddle: https://jsfiddle.net/t6rhdvao/15/

Thanks to everyone

this is my html

  <div class="mb-3">
    <label for="filterText" class="form-label">Ürün ara</label>
    <input type="text"   class="form-control" id="filterText" 
    placeholder="arama ifadesi giriniz">
  </div>
 
  
  <h4 style="text-align: left">Müşteriler</h4>
  <table class="table">
    <thead class="table-light">
      <tr>
        <td scope="col">Id</td>
        <td scope="col">İsim</td>
        <td scope="col">Email</td>
        <td scope="col">Soyisim</td>
       
    </thead>
    <tbody>
      <tr *ngFor="let users of users">
          <td>{{users.Id}}</td>
      </tr>
  </tbody>
  
  

this is my .ts

import { Component, OnInit } from "@angular/core";
 import { Users } from "src/app/models/Users";
import { AuthService } from "src/app/services/auth.service";
 

 

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
export class UsersComponent implements OnInit {
  user: Users   ;
  users : Users[] = []
  dataLoaded = false;
  filterText="";

  constructor(private authservice: AuthService
   ) {}

    ngOnInit(): void {
  this.getusers()
  }


  getusers() {
    this.authservice.getusers().subscribe(response=>{
      this.user = response.data
      console.log(this.users)
      this.dataLoaded = true;
    })   
  }

  getById(Id:number) {
    this.authservice.getById(Id).subscribe(response=>{
      this.user= response.data
      this.dataLoaded = true;
    })   
  }
  
  
 






}

this is error when i start the browser i see what should i do

NG0303: Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’. core.mjs:10178
Angular 3
UsersComponent_Template users.component.html:21
Angular 22
RxJS 6
Angular 8
emit
checkStable
onHasTask
hasTask
_updateTaskCount
_updateTaskCount
runTask
drainMicroTaskQueue

I’m in the process of writing path finding for Maze. I got this image while googling, which seems perfect for maze background. Any suggestions, How can I design this image using HTML, CSS and javascript.

should i use flex or grid or a simple table will do?

I’m developing a dynamic page with javascript.

I’m not that advanced with the language, I’m trying to collect the name of the classes defined in the div through the html object variable,

so far I created a loop to repeat the structure created dynamically, assign a class: object to define as a class name for each block created through the objects variable

however I would like to use the name of each class summarized as a variable or if there is a way in which I could simply call the block and dynamically create html structure within it without the others clone the same.

// objs 
const html = [
    {
        id: 0,
        class: 'hero',
        titulo: "Teste",
    },
    {
        id: 1,
        class: 'section_1',
        titulo: "Teste 2",
    },
];

// main code
let section = document.createElement("section");
let el_page = document.getElementById("main");

const global = app => {

    const main = document.getElementById("main");
    const div = document.createElement("div");

    // get names and set div all class name
    for (let i = 0; i < html.length; i++) {
        div.setAttribute("class", app.class);
    }
    //creat el div
    main.append(div);
}

html.forEach(app => global(app));

    <main id="main">
teste
    </main>

I intend to center the columns with the x-axis values ​​in the highcharts charts.

I have the following code:

Highcharts.chart('container', {
      chart: {
        type: 'column',
        options3d: {
          enabled: true,
          alpha: 0,
          beta: 0,
          viewDistance: 50,
          depth: 100
        }
      },

      title: {
        text: ''
      },

      xAxis: {
        type: 'category',
        labels: {
          skew3d: true,
          align: 'center',
          style: {
            fontSize: '16px'
          }
        }
      },

      yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
          text: 'Total de Denúncias',
          skew3d: true,
          align: 'center',
          style: {
            fontSize: '16px'
          }
        }
      },

      plotOptions: {
        column: {
          stacking: 'normal',
          depth: 200,
        }
      },

      series: series
    });

The graph looks like this:

As I show in the image the dates of the x axis are misaligned with the columns generated in the series. Can they help to center with each other?

Is there any way to make AWS SSM getparameters sync?
Requirement :
The secret key, id stored in the SSM store should be accessible on the server up.
Using Node and express in the backend as a reverse proxy, so we have a constant.js file, it stores all the API URLs, paths, etc.

constats.js file

const api1url = 'http://example.com/path1'
const api1_secretkey = 'secret_key'
..................

module.export = {api1url,api1_secretkey}

So we wanted to call the ssm stuff in here before setting the const variables

const SSM = require('aws-sdk/clients/ssm');
const ssm = new SSM();
const params = {
   Names: ['/secret_key_api_1', '/secret_key_api_2'],
   WithDecryption: true,
   };
 const parameterList = await ssm.getParameters(params).promise();

I understand that await cant be without async, I just wanted to convey what I am expecting, without it being an async call or whether it be in the callback of getparameters.

const api1url = 'http://example.com/path1'
const api1_secretkey = parameterList.Parameter[1].Value

But since it is an async call we are not able to wait for it ,tried doing it in a separate async function and then returning the data but since the function is still async having difficulties.