Category: javascript

I’ve recently updated angular version from 12 to 13. I have a class with a clone method. The implementation of the the class is something like this:

export class MyClass {

...

public clone(): MyClass {
   const newObject: MyClass = Util.deepClone(this);

   newObject.updateProperty();

   return newObject;
}

...

}

The deepClone method at Util class has the following implementation:

/**
   * Returns a deep copy of the object
   */
  public static deepClone(oldObj: any) {
    let newObj = oldObj;
    if (oldObj && typeof oldObj === 'object') {
      if (oldObj instanceof Date) {
        return new Date(oldObj.getTime());
      }
      newObj =
        Object.prototype.toString.call(oldObj) === '[object Array]' ? [] : {};
      for (const i in oldObj) {
        newObj[i] = this.deepClone(oldObj[i]);
      }
    }
    return newObj;
  }

My problem is: this piece of code works in version 12, but it doesn’t in version 13.
The function “ùpdateProperty()“` is undefined in version 13, but it is ok in version 12.

As I couldn’t find anyone with similar issues neither similar questions, I would like some help to find:

1. what changed from Angular 12 to Angular 13 that makes this piece of code stop working in version 13;
2. how to solve the issue.

I programing with PHPStorm and frameworks – Laravel for backend and Vue 3 for frontend.

I set up airbnb-base in the eslint configuration. However, I have a problem because in the editor settings in File | Settings | Editor | Code Style | JavaScript can’t get and set airbnb. How can I arrange it well so that there is a conflict during work?

What is the current best practice for having the same facilities in PhpStorm but in PHP?

I wanted to get some properties of this array and as I update the value inside my inputs

the array

{"status":true,"data":[{"id":1,"pessoa_id":75505,"created_at":"2022-02- 
01T17:42:46.000000Z","holder":"LEONARDO LIMA","validade":"2026-06- 
01","bandeira":"Mastercard"}]}

The method

SelecionarCartao(){

//this.mundipaggS.postToken(this.responseData).subscribe((res: any) => {});

console.log(this.responseData.token)
}

<div class="form-group ">
                                    <label for="ncartao">Número do cartão <span class="text-danger"> *</span></label>
                                    <input name="card-number" maxlength="19"  #cardNumber formControlName="digiNumero" id="ncartao" type="text" class="form-control col-lg-6  " >
                                </div>

                                <div class="form-group">

                                    <label for="nomeimpresso">Nome <b>impresso</b> no cartão<span class="text-danger"> *</span></label>
                                    <input #nomeImpresso formControlName="digiNome"  name="holder-name" id="nomeimpresso" class="form-control col-lg-6" type="text" >

I have an array of cryptocurrencies and I want to sort them based on the attribute market_cap_rank:

This is the structure of the objects in the array:

{
current_price: 5.39533e-7
id: "bitecoin"
image: "https://assets.coingecko.com/coins/images/22571/large/logo200.png?1642080037"
last_updated: at {seconds: 1644321837, nanoseconds: 961000000}
market_cap: 0
market_cap_rank: null
name: "Bitecoin"
price_change_percentage_24h: -1.99253
symbol: "$BITC"
}

I need to sort an array of these objects based on the market cap rank.

The following returns the original string without the the value of targetForRemoval removed:

let targetForRemoval = "https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_includes"

let testing = "Why will you not remove the following url https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_includes from this string?"

testing = testing.replace(targetForRemoval, "");

console.log(testing); // Still includes the url

In addition to the standard string replace i have also tried it with regex:

let regExp = new RegExp(targetForRemoval);
testing = testing.replace(regExp, "");

In testing i did notice that when i remove the ? from the url, the replace method works, but this is obviously not a solution.

Can anyone explain why the ? breaks the replace method?

I need to set the default value to my react material UI check box. So I did this task using React.useEfect hook.

This is how it looks like after setting the value using useEfect.

But now I am facing a problem. After I unchecked my check box, I can’t check again. And I have no idea what going on with my code. If anyone can help me with this, I am really thankful for that.

const [checked, setChecked] = React.useState({});
const variant= useSelector((state) => state.promoCodesReducer.selectedPromo);
React.useEffect(()=>{
   variant &&  variant.filter((filterData)=> 
   setChecked((newValues) => ({ ...newValues, [filterData.variantId]:checked })))

  },[row,variant])

My Check Box Component :

function addVariantSection(data) {
    return (
      <Grid key={data._id} container spacing={1}>
        <Grid item xs={12} style={{ justifyContent: 'space-between', display: 'flex', flexDirection: 'row' }}>
          <div style={{ margin: 10 }}>{`${data.productName ? data.productName : itemName}-${data.variant1} ${data.variant2}`}</div>
          <div>
            <Checkbox
              // eslint-disable-next-line no-useless-concat
              id={`${data.variantId ? data.variantId:data._id}-` + `checkData`}
              color='primary'
              // checked={checked[data._id ? data._id:data.variantId]}
              checked={checked[data.variantId ? data.variantId:data._id]}
              onChange={handleChecked(data.variantId ? data.variantId:data._id,data.productId)}
              style={{ margin: 10 }}
            />
          </div>

        </Grid>
      </Grid>
    );
  }

Methord for check box Value :

const handleChecked = (id,pid) => (e) => {
    const { checkedID } = e.target;
    const vID = e.currentTarget.id.split('-', 1);
    setChecked((values) => ({ ...values, [id]: checkedID }));
  };

here’s my code:

    useEffect(() => {
    function handleResize() {
      setTimeout(() => {
        //...
      }, 0);
    }

    window.addEventListener("resize", handleResize);
    return (_) => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

I want to use this hook in class component, but i dont know how to convert. Is it possible to do this with lifecycle methods?

Let’s say I have list A like this

let A = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,....]

and now I want it to be

let A = [3,14,25,36,47]

So in my case they are 11 digits apart from each other.

My attempt was to

A.split(0,2) //so array starts with 3 
newArr = A.filter(function(value, index, Arr) {
    return index % 3 == 0;
});

but this got me every 10th element

I am trying to make a hide/show navbar in ReactJS.
But on the first click I am getting this error and its working fine after the first click.

• Note: Its twice and i have no idea why

Here is my code and its only working (after first error) when

setMenu(!menu);

is before

nav.classList.toggle(“nav-open”);

otherwise the error just keeps coming.

export default function Navbar() {
  const [menu, setMenu] = useState(true);
  const nav = document.querySelector("nav");

  const openNav = () => {
    setMenu(!menu);
    nav.classList.toggle("nav-open");
  };

  return (
    <nav id="nav-wrapper">
      <header className="nav-header">
        <div
          className="arrow-btn"
          onClick={() => {
            openNav();
          }}
        >
          {menu ? (
            <Icon.HiChevronDoubleLeft size={20} className="arrows" />
          ) : (
            <Icon.HiChevronDoubleRight size={20} className="arrows" />
          )}
        </div>
        <img src={Profiledp} alt="." />
        <p className="name">Naman Pokhriyal</p>
      </header>
  </nav>

I have this part of code:

$('#clientsfilter').on('input', function() {
     var string = $('#clientsfilter').val();
     if (string != "") {
         //console.log("input is not empty");
         var timeoutid = setTimeout(function() {
             // some stuff
             console.log("fired!");   
         }, 1500);
         console.log("timeoutid is "+timeoutid);
     }
     else
     {
        // console.log("input is empty");
     }    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="clientsfilter" type="text" size="27">

When a user types something, it perform some actions after 1,5 seconds. But if a user will type one symbol after another too fass (time between symbols less than 1,5 seconds), the setTimeout() stuff will fire every time user adds symbol (or deletes). I want to prevent firing setTimeout function too many times, only if 1.5 seconds passed from last typing. I found information about

clearTimeout(timeoutid);

But how can I use it my situation?

I’m really stuck at converting a PNG image from unicode (I think) to an object URL. I’m using Vue js to convert it. The data is returned by a .NET application using

return new FileContentResult(ms.ToArray(), "image/png");

In my frontend / client app, I can see that I receive this response

But what now? 🙂 I tried a lot of things, without any luck. I’m not too familiar with these types of conversion… I did it once and completely forgot how.

ps: If I use Postman, the image is loaded correctly.

I’ve a input field as type date and the of that format is dd/mm/yyyy which is not default. In my desktop screen it’s working properly and also I’ve a placeholder in the same field as DD/MM/YYYY.

All is working fine in desktop screen but once I change screen from desktop to iPads or mobile devices my placeholder isn’t working and date format automatically changed to mm/dd/yyyy.

Is there any solution available for the date format so that it remains same in desktop screens and iPad or mobile screen.

Note: I’ve tried searching solution in Stackoverflow but I didn’t got any satisfied solution and those are not working.

I have callback function ->

  let numberOfItems = 0;

  callback: ({ item }) => { 
    // console.log("item", item);
    if (item.id) {
      numberOfItems++;
    }
  }

in this calback I calculate the number of current items.

After I compare two array

if(numberOfItems === arrayTwo.length)

But i Need inside callback function to do this ->

if(numberOfItems === arrayTwo.length)

but I can’t because the callback is constantly looping.

Is it possible to do that within the callback function?

Having the following array of objects:

const input = [ {id: 3, data: {name: 'john'} },
                {id: 6, data: {name: 'mike'} },
                {id: 2, data: {name: 'anna'} }
              ];

I want to write a method that recevies a new object, if the object’s id is in the array, it replaces that one with the new one, otherwise it creates a new object.

For example, if the method receives this object: {id: 1, data: {name: 'maria' }}, it will add it to the array, so the array will look like:

const input = [ {id: 3, data: {name: 'john'} },
                {id: 6, data: {name: 'mike'} },
                {id: 2, data: {name: 'anna'} },
                {id: 2, data: {name: 'maria'} }
              ];

If it receives {id: 3, data: {name: 'jack' }} it should replace the object with id=3 so the result would be:

const input = [ {id: 3, data: {name: 'jack'} },
                {id: 6, data: {name: 'mike'} },
                {id: 2, data: {name: 'anna'} },
                {id: 2, data: {name: 'maria'} }
              ];

The code:

function doMagic(input, newObj) {
  if (input.some(el => el.id === newObj.id) {
    // replace it
  } else {
    // add the object to the array
  }
}

I am testing an app on IE.

I’m having the problem reading the ` character when the (dynamic) table is read.

list.forEach(item=>{
  let child = document.createElement("tr");
  child.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.password}</td><td>${item.email}</td><td>${item.sex}</td><td>${item.country}</td><td>-</td><td>-</td>`;
  table.appendChild(child);
})

If it can be fixed, how can I do this?