javascript – Page 8490 – Blancer.com Tutorials and projects

Most efficient way to update an object property within an array of objects

I am wondering what is the most efficient way to update an object property that is stored in an array with 10k+ items.

For example if I have an array that holds objects like this {name:””, price:””)

I want to replace or more like update the price values if the array contains that element already.

Check if Array contains object with name = x, if so replace the price with the newest price.

I dont want to have duplicate elements in that array so its not getting to big, i figured I should update it if a property value already exists in it.

So far I have tried several ways like with using indexOf, splice, or just for loops. I am wondering what is the best way performance wise to deal with big arrays.

let array = [
{name:"abc", price: 24},
{name:"cde", price: 25},
{name:"fgh", price: 22},
{name:"gfds", price: 21},
]

function addToArray(elem){
  //check if array contains elem by checking for name property value
  if(array.filter(el => el.name === elem.name).length > 0){
    //update the array element that has the name of the passed elem
  }
}

Replace empty values with previous values in Objects Array

I am trying to replace empty values with previous non-empty values with dynamic keys.

[{
        "ACRI": "1298",
        "APL": "231.123",
        "BDTV": "8667.29",
        "BPOS": "29.43"
    },
    {
        "ACRI": "",
        "APL": "",
        "BDTV": "8667.29",
        "BPOS": "29.43"
    }
]

this array need to be converted into like below

[{
            "ACRI": "1298",
            "APL": "231.123",
            "BDTV": "8667.29",
            "BPOS": "29.43"
        },
        {
            "ACRI": "1298",
            "APL": "231.123",
            "BDTV": "8667.29",
            "BPOS": "29.43"
        }
    ]

I referred this Question but this only working with fixed keys not the dynamic keys.

x-model Alpinejs cant read value. Programmatic access for x-model

I`m try to Programmatic access for x-model. But it is undefined. What is wrong?

this.$refs['SCOPE']._x_model.get()

this.$refs[‘SCOPE’]._x_model – undefined.

<select x-model="scope" x-ref="SCOPE" name="form-scope" id="form-scope" class="js-choice">
   <option value="">Выберите сферу применения</option>
</select>

Doc – https://alpinejs.dev/directives/model#programmatic%20access

Sign SHA512-HMAC with private key in java

I want to build a function that sign a SHA512 HMAC with a Private key with a password to open that file. I have done that with Javascript but I’m not able to do it in JAVA. here is my code in Javascript:-

const fs = require('fs')
const crypto = require('crypto');

const getSignatureByInput = (input, crt) => {
    let privatePem = fs.readFileSync(crt);
    let key = privatePem.toString('ascii');
    let sign = crypto.createSign('RSA-SHA512');
    sign.write(input)
    let signature = sign.sign({ key, passphrase: 'Password' }, 'hex')
    return signature;
}

// Usage
let hamc = crypto.createHmac("sha512", '12345678-73a8-414c-9832-fcd4b2d9b362').update(
    JSON.stringify({
    "body": {
        "Id": "123"
    }
})
).digest("hex");


console.log(hamc)

let signatureSignedByPrivateKey = getSignatureByInput(hamc,'./private.key');
console.log(signatureSignedByPrivateKey)

and the below is the example of my private key:-

Appreciate your support!
Thanks in advance…

How to see if values are in the same “line” within an object in javascript

Not sure how to approach this problem, but I want to see if two values are in the same ‘line’

var inventory_needed = [
    { section: "hardware",          supplies: "hammers"                       },
    { section: "plumbing",          supplies: "pipes"                         },
    { section: "garden",            supplies: "grass seeds"                   },
    { section: "cleaning supplies", supplies: ["hand sanitizer", "detergent"] },
    { section: "appliances",        supplies: ["fridges", "dishwashers"]      } 
];

psuedocode of what I want to try to attempt

if(section.value && supplies.value in the same line) {
    return true;
}
else {
    return false;
}

//example 1
if("appliances" && "fridges" in the same line) {
    return true; //would return true
}
else {
    return false;
}

//example 2
if("plumbing" && "fridges" in the same line) {
    return true; 
}
else {
    return false; //would return false
}

Filling up one dropdown with same value of the other

Currently I have 2 dropdown boxes with the same options. These options are all filled from the backend. Now I want it so that whenever I choose 1 option in the dropdown box, the other dropdown also automatically chooses the same value and this works both ways. The following is my dropdown box code:

        <select name="lead_status" id="leadstatus" class="form-control">
          <option value="">Select</option>
          <?php foreach($leadstatus as $key => $status): ?>
          <option value="<?php echo $key; ?>" <?php echo $key==$lead->lead_status?'selected="selected"':'' ?>><?php echo $status; ?></option>
          <?php endforeach; ?>
        </select>
        <select name="lead_status" id="leadstatus2" class="form-control">
          <option value="">Select</option>
          <?php foreach($leadstatus as $key => $status): ?>
          <option value="<?php echo $key; ?>" <?php echo $key==$lead->lead_status?'selected="selected"':'' ?>><?php echo $status; ?></option>
          <?php endforeach; ?>
        </select>

I’ve tried creating a function for onclick where it creates a check saying:

if (document.getElementById('leadstatus').value == '1')
  document.getElementById("leadstatus2").value = '1';

But this wont work since I have a lot of data in the dropdown lists and it is dynamic.

How to enable Autocomplete as well as costum inputs in the same input-field in Angular?

How do I enable Autocomplete as well as costum inputs in the same input-field in Angular?
The user should have the option to input ” * ” for getting the autocomplete “All items” and he should be able to input ” * abc * ” and search for this specific value. However after inputing “*” the autocomplete gets triggered and the user cant go on typing.

a_enum contains a value “*” which means search for all items in a_enum.

Removing [value] in the visible input-field breaks the autocomplete. Items are not transferred to the visible input-field.

<input [id]="a" [value]="a_enum">
<input [id]="a" [value]="a_enum" hidden="hidden">
<div *ngFor="item of items">{{item}}<div>

How to get a date format from date string value? [duplicate]

Need to get dd/MMM/yyyy (date format) from 01/jan/2022(date string)?

Is there any possible way available?

html inside latex

I am new to Latex, want to know how to add html to latex.
e-g here the is sample code

begin{equation}
        begin{aligned}
        3r&= <div id="someid123">This is some div</div> quad text{(problem statement)} \
        r&=? quadtext{(divide both side)} \
        6r + 3 &= 6 * ? + 3 = ? quadtext{(substitute in $r$)}
        end{aligned}
     end{equation}

What I want is to call the div using JavaScript and replace content after latex code is generated, any idea how to do that? because right now when I add html code to latex it just messes everything up.

This is how the output looks if I add html

begin{equation} begin{aligned} 3r&=
This is some div
quad text{(problem statement)}  r&=? quadtext{(divide both side)}  6r + 3 &= 6 * ? + 3 = ? quadtext{(substitute in )} end{aligned} end{equation}

React routing not loading pages

Hi i am learning react and i got stuck on a problem. i have started working on routing but its not working at all. Code:

 import {Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';


function App() {
  return (
      <div>
        <Route path = '/'>
          <AllMeetupsPage />
        </Route>
        <Route path = '/new-meetup'>
          <NewMeetupsPage />
        </Route>
        <Route path = '/favorites'>
          <FavoritesPage />
        </Route>
      </div>
  );
}

export default App;

i have a blank screen even though the pages should load. Each page when open should only print one line just to see that i can see routing working however all i see is a blank space meaning its not working correctly.You can view the full code here: https://github.com/Kroplewski-M/Routing
thank you in advance

Is there any other way around which I can use to add any property to head seaction of the app in nuxtjs without using nuxt head method

I want to have similar feature like WordPress, where I can add meta tags or insert external script from front-end and it will injected to actual website.

Like I non programmer admin can add any third party script from admin panel and it will be inject to SSR nuxt application.

Please help it’s possible to to, I really appreciate

Typescript Uncaught ReferenceError: exports is not defined

I’m having trouble figuring out what this error means but i’m sure it can be resolved with another “easy hack”….. As everything lately to do with web tech stacks seems to be fixed with another little “easy hack”…….

Getting this error for some dumb reason i’m sure.

Uncaught ReferenceError: exports is not defined

at app.js:2

(anonymous) @ app.js:2

all i did was export a function to test typescript out.

core/CoreTest.ts

export function testFunction () : void {

console.log("This is a core test");

}

and then i called it here…

app.ts

import { testFunction } from './core/CoreTest.js';

testFunction();

Need to add one input field in file upload component

I have one component in which we have file upload facility. I need to add one additioonal input filed so when user clicks on the upload button one input filed and one file should be sent to server.
since its class component I am not able to use hook. its legacy application.

import axios from 'axios';

import React,{Component} from 'react';

class App extends Component {

    state = {

    // Initially, no file is selected
    selectedFile: null
    };
    
    // On file select (from the pop up)
    onFileChange = event => {
    
    // Update the state
    this.setState({ selectedFile: event.target.files[0] });
    
    };
    
    // On file upload (click the upload button)
    onFileUpload = () => {
    
    // Create an object of formData
    const formData = new FormData();
    
    // Update the formData object
    formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
    );
    
    // Details of the uploaded file
    console.log(this.state.selectedFile);
    
    // Request made to the backend api
    // Send formData object
    axios.post("api/uploadfile", formData);
    };
    
    // File content to be displayed after
    // file upload is complete
    fileData = () => {
    
    if (this.state.selectedFile) {
        
        return (
        <div>
            <h2>File Details:</h2>
            
<p>File Name: {this.state.selectedFile.name}</p>

            
<p>File Type: {this.state.selectedFile.type}</p>

            
<p>
            Last Modified:{" "}
            {this.state.selectedFile.lastModifiedDate.toDateString()}
            </p>

        </div>
        );
    } else {
        return (
        <div>
            <br />
            <h4>Choose before Pressing the Upload button</h4>
        </div>
        );
    }
    };
    
    render() {
    
    return (
        <div>
            <h3>
            File Upload using React!
            </h3>
            <div>
                <input type="file" onChange={this.onFileChange} />
                <button onClick={this.onFileUpload}>
                Upload!
                </button>
            </div>
        {this.fileData()}
        </div>
    );
    }
}

export default App;

I tried a lot but it is not working properly. if you need I can put the modified code. since its quite messy I put only working code without input field.
Could you please help me to add one input field, please.

How to make smooth progress bar that doesn’t jump/skip when incrementing large increments

It’s easy to make a simple progress bar like this one. It looks smooth enough: https://jsfiddle.net/H4SCr/

—
Also shown below:

var d = document.getElementById('child');

function run(div,i){
i += 1;
div.style.width = i+'px';
 if(i > 200) i = 200;
div._timer = setTimeout(function () {
run(div,i)
 },100);

}

run (d,0);

#bar{
    width:200px;
    height:20px;
    background-color:black;
    position:relative;
}
#child{
    position:abosoute;
    top:0px;
    left:0px;
    background-color:red;
    height:20px;
}

<div id="bar">
    
    <div id="child"></div>
    
</div>

However, in the example, it’s only smooth because I’m incrementing by one. If I chose to increment by 50 or 30, it is really choppy and doesn’t look smooth.
I’m recieving the progress amount from a third party API, so this is how the progress will look as I recieve the data:
5%, 23%, 72%, 77%, and 100%

Instead of incrementing the progress bar by 1, I have 5 different progress statuses. How do I make large increments and still make it look smooth?

What’s the regular expression of TXT record?

TXT records can enter the keywords below.

a-z  
A-Z  
0-9  
Space  
- (hyphen)  
! " # $ % & ' ( ) * + , - / : ; < = > ? @ [  ] ^ _ ` { | } ~ .

What is the regular expression that allows you to enter only this?

The bottom is what I made.

const txt_rex = /[#&\+-%@=/\:;,.'"^`~_|!/?*$#<>()[]{}]/i;