Category: javascript

I’m using Reactjs to create a dashboard site that has about 15 different data grids that update every 500ms via websockets with a large amount of data virtualized per grid (7k records). Performance seems great on multiple lower / higher end machines (tested 5 different pc’s and 1 mac) and the app also performs well in firefox safari and Edge.

My concern is that when I open Chrome’s task manager it says CPU usage is anywhere from 50 to 120; however, if I look at the windows task manager, CPU usage for chrome is only at 4-5%. It would seem that the values in the chrome task manager don’t correlate to the Windows Task Manager.

On chromes dev site at https://developer.chrome.com/docs/extensions/reference/processes/ it says “The most recent measurement of the process’s CPU usage, expressed as the percentage of a single CPU core used in total, by all of the process’s threads. This gives a value from zero to CpuInfo.numOfProcessors*100, which can exceed 100% in multi-threaded processes. Only available when receiving the object as part of a callback from onUpdated or onUpdatedWithMemory.”

Do I need to worry if chrome says my reactjs app is 50-120 CPU? What is it exactly that the chrome task manager measures in regards to CPU usage and how are these values calculated, I don’t understand the above linked text? Is there a better way to measure true CPU usage of my reactjs app?

Thank you.

I am trying to create a useState hook matching to this object:

[
   {
      "id":"",
      "name":""
   }
]

This is how my code is looking like:

  const [ galleries, setGalleries ] = useState([
    {
      id: "",
      name: ""
    }
  ])

setGalleries({...galleries, id: gallery.id, name: gallery.name})

Please write code that prints out an array of numbers containing 1 through 100 ([1,2,…,100]) and says whether the number is divisible by 4 or 7. Please use .map or .filter if possible

let array = [];
for (let i = 1; i <= 100; i++) {
array.push(i);
}

I am working on a nextjs project and using next auth for my authentication , i keep getting this error once i click on here . on the click of a button , i want it to redirect me to the sign up page , where i click my google accont . then it redirects me back to the page

Authorization Error
Error 401: deleted_client
The OAuth client was deleted.

i dont know what to do to solve it , i just want to sign my users in . I am also using firebase in conjuction with nextjs

How can I grant access to my const to be used inside a function? In this case I want to access my const catName inside my function fetchListings. I’m getting this error:

Question Updated:

ReferenceError: catName is not defined

<script context="module">

const fetchListings = async () => {

        try {
            // get reference to listings collection
            const listingsRef = collection(db, 'listings');
            // create a query to get all listings
            const q = query(
                listingsRef,
                where('type', '==', catName),
                orderBy(timestamp, 'desc'),
                limit(10)
            );
            // execute query
            const querySnap = await getDocs(q);

            let lists = [];

            querySnap.forEach((doc) => {
                console.log(doc);
            });

        } catch (error) {
            console.log(error);
        }
    };
    fetchListings();
</script>

<script>
    import { page } from '$app/stores';
    // export the const catName to the function above
    export const catName = $page.params.catName;
</script>

Hi {catName}!

Suppose this example: https://gojs.net/latest/samples/records.html

I’m trying to represent the ports of the table rows by a circle, while still being able to drag the link from the whole row.
Something like this:

But I keep getting this result when I try to move the ports to the right (it gets clipped by the panel)

Any help would be appreciated,
Thank you!

I have coded an HTML form and need to ensure that a user inputs a password in the Password field and repeats the same password in the Confirm Password field. To ensure they are equal, I have used a javascript function to make it possible. Also, I have disabled the Register button, and need to ensure it is only enabled if and only if the values entered in the two password boxes are equal. Everything works fine, however, when the values entered are equal, the button remains disabled, and a warning that the passwords do not match still remains.

Below is the HTML code:

<div class="form-group mb-3">
                <label class="label" for="password">Password</label>
              <input id="password" type="password" class="form-control" placeholder="Password" name="passcode" required>
              <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
            <div class="form-group mb-3">
                <label class="label" for="confirmPassword">Confirm Password</label>
              <input id="confirmPassword" type="password" class="form-control passcode" placeholder="Confirm Password" name="passCode" required onkeypress="checkConfirmation()">
              <span toggle="#confirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
            <span id="notEqualPassCode"></span>

Below is the javascript code for the checkConfirmation() function:

<script type="text/javascript">
function checkConfirmation(){
    var passcode = document.getElementById("password").value;
    var confirmPasscode = document.getElementById("confirmPassword").value;
    let btnSubmit = document.querySelector(".submit");
    btnSubmit.disabled = true;

    if (passcode != confirmPasscode){
        btnSubmit.disabled = true;
        document.getElementById("notEqualPassCode").innerHTML = '<i class="fa fa-fw fa-exclamation-triangle"></i>Passwords do not match!';
    } else {
        btnSubmit.disabled = false;
        document.getElementById("notEqualPasscode").innerHTML = '';
    }
}

Please someone tell me what could be wrong.

I’m trying to implement a form class that allows me to better implement working with forms in Svelte, but I’m running into the issue that when I update a instance property inside the ‘use’ action function… the new value is not getting updated in the view.

Here is the link to a REPL I’m working with:

https://svelte.dev/repl/13ac33881a184795947be6ae9f104834?version=3.44.3

Essentially what I’m trying to achieve in this piece of code is that when the user clicks into the input, the inputs bounded class instance ‘touched’ property gets updated in the ‘use’ action, which should in turn, re-render the ‘touched’ value in the UI.

I’m not sure why the value is not updating in the UI.

Any help to make understand what I’m doing wrong is greatly appreciated.

I have data rows in multiple sections. I keep track of the start and end rows of each section in my google spreadsheet and they change dynamically as rows are inserted or deleted. I used App Script to fetch the current section X#:Y# from the spreadsheet and then run a script to sort it. This used to work perfectly, however, I recently did something that bricked it – and I cannot tell why…

Here’s an excerpt of the code:

function onEdit(){

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  var editedCell = sheet.getActiveCell();
  var columnToSortBy = 5;
  var tableRange = [];
  tableRange[0] = sheet.getRange(2,32).getValue(); //A6:K17
  tableRange[1] = sheet.getRange(3,32).getValue(); //A59:K62
  var range0 = sheet.getRange(tableRange[0]);
  var range1 = sheet.getRange(tableRange[1]);

if(editedCell.getColumn() == columnToSortBy){   


    range0.sort( { column : columnToSortBy } )
    range1.sort( { column : columnToSortBy } )

}
}

undefined variable?!
*Note: I copied the script from another StackOverflow post. It has served me well for nearly 2 months.

I tried looking at the debugger and my variables all appear as undefined. I tried manually replacing tableRange[0] with (for example) “A2:K10” and the script works fine. But as soon as I try the old way it stops working… I’m thinking this is something to do with JS as I’m totally ignorant of the language. Could you please help me?

For some reason, whenever I run this function, it first takes a very long time to execute but secondly always replaces in cell E9, rather than going to the next available cell (in this case E10).

This is my code:

    
    var RecruitRosterRange = RecruitRoster.getRange(1,1,RecruitRosterLastRow,7);

    var RecruitRosterRangeValues = RecruitRosterRange.getValues();
  
    var RecruitRosterRow = 8;
    while (RecruitRosterRow <= RecruitRosterLastRow)

      {
      if (RecruitRosterRangeValues[RecruitRosterRow-1][1] == "")        // Is Website ID cell blank?
      {
        RecruitRoster.getRange(RecruitRosterRow, 5).setValue(AutomationSheet.getRange(asFTAddWebID).getValue()); // Add Website ID to website ID column on Recruit Roster
        RecruitRosterRow = RecruitRosterLastRow+1;
      }
      //Repeats if not
      else 
      {
        RecruitRosterRow++;
      }
    }```

And this is my sheet:
[sheet][1]


  [1]: https://i.stack.imgur.com/k6kXm.png

If you need any additional screenshots or explanation, please let me know. Thank you!

I recently tried to upload my new bot on 13v to heroku, but for my surprise it gives this error:

2021-12-24T19:32:08.411245+00:00 app[worker.1]: /app/node_modules/discord.js/src/rest/APIRequest.js:33
2021-12-24T19:32:08.411261+00:00 app[worker.1]: agent ??= new https.Agent({ ...this.client.options.http.agent, keepAlive: true });
2021-12-24T19:32:08.411262+00:00 app[worker.1]: ^^^
2021-12-24T19:32:08.411262+00:00 app[worker.1]:
2021-12-24T19:32:08.411262+00:00 app[worker.1]: SyntaxError: Unexpected token '??='
2021-12-24T19:32:08.411262+00:00 app[worker.1]: at wrapSafe (internal/modules/cjs/loader.js:1001:16)
2021-12-24T19:32:08.411263+00:00 app[worker.1]: at Module._compile (internal/modules/cjs/loader.js:1049:27)
2021-12-24T19:32:08.411263+00:00 app[worker.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
2021-12-24T19:32:08.411263+00:00 app[worker.1]: at Module.load (internal/modules/cjs/loader.js:950:32)
2021-12-24T19:32:08.411263+00:00 app[worker.1]: at Function.Module._load (internal/modules/cjs/loader.js:790:12)
2021-12-24T19:32:08.411264+00:00 app[worker.1]: at Module.require (internal/modules/cjs/loader.js:974:19)
2021-12-24T19:32:08.411264+00:00 app[worker.1]: at require (internal/modules/cjs/helpers.js:93:18)
2021-12-24T19:32:08.411265+00:00 app[worker.1]: at Object.<anonymous> (/app/node_modules/discord.js/src/rest/RESTManager.js:4:20)
2021-12-24T19:32:08.411265+00:00 app[worker.1]: at Module._compile (internal/modules/cjs/loader.js:1085:14)
2021-12-24T19:32:08.411265+00:00 app[worker.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
2021-12-24T19:32:08.533679+00:00 heroku[worker.1]: Process exited with status 1
2021-12-24T19:32:08.589332+00:00 heroku[worker.1]: State changed from up to crashed
2021-12-24T19:34:09.000000+00:00 app[api]: Build started by user [email protected]
2021-12-24T19:34:22.000000+00:00 app[api]: Build succeeded
2021-12-24T19:34:22.191934+00:00 app[api]: Deploy b3f02b01 by user [email protected]
2021-12-24T19:34:22.191934+00:00 app[api]: Release v6 created by user [email protected]
2021-12-24T19:34:24.110959+00:00 heroku[worker.1]: State changed from crashed to starting
2021-12-24T19:34:26.145669+00:00 heroku[worker.1]: Starting process with command `node index.js`
2021-12-24T19:34:26.812717+00:00 heroku[worker.1]: State changed from starting to up
2021-12-24T19:34:27.250285+00:00 app[worker.1]: /app/node_modules/discord.js/src/rest/APIRequest.js:33
2021-12-24T19:34:27.250299+00:00 app[worker.1]: agent ??= new https.Agent({ ...this.client.options.http.agent, keepAlive: true });
2021-12-24T19:34:27.250299+00:00 app[worker.1]: ^^^
2021-12-24T19:34:27.250300+00:00 app[worker.1]:
2021-12-24T19:34:27.250300+00:00 app[worker.1]: SyntaxError: Unexpected token '??='
2021-12-24T19:34:27.250300+00:00 app[worker.1]: at Module._compile (internal/modules/cjs/loader.js:1049:27)
2021-12-24T19:34:27.250301+00:00 app[worker.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
2021-12-24T19:34:27.250301+00:00 app[worker.1]: at Module.load (internal/modules/cjs/loader.js:950:32)
2021-12-24T19:34:27.250301+00:00 app[worker.1]: at Function.Module._load (internal/modules/cjs/loader.js:790:12)
2021-12-24T19:34:27.250301+00:00 app[worker.1]: at Module.require (internal/modules/cjs/loader.js:974:19)
2021-12-24T19:34:27.250302+00:00 app[worker.1]: at require (internal/modules/cjs/helpers.js:93:18)
2021-12-24T19:34:27.250302+00:00 app[worker.1]: at Object.<anonymous> (/app/node_modules/discord.js/src/rest/RESTManager.js:4:20)
2021-12-24T19:34:27.250303+00:00 app[worker.1]: at Module._compile (internal/modules/cjs/loader.js:1085:14)
2021-12-24T19:34:27.250303+00:00 app[worker.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)

but it runs perfectly from my pc, I tried things like delete the whole index.js except the scensials things, nothing worked

I am building a react website. As part of the site, I have a cards which are rendered using a JS map function. It looks like this:

return (
  <div className="cards">
     {HomeCard.map((item) => (
        <Card image={item.image} heading={item.heading} text={item.text} />
     ))}
  </div>
)

This gets data from another file which contains this object:

const homeCardsText = [
    {
        id: 1,
        image: web_design,
        heading: "Web Design",
        text: "<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Maecenas leo arcu, sagittis eget varius vel, fringilla nec metus. Nullam ultrices felis nec fermentum tincidunt. Maecenas tincidunt commodo ante a dapibus"
    },
    {
        id: 2,
        image: web_dev,
        heading: "Web Development",
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo arcu, sagittis eget varius vel, fringilla nec metus. Nullam ultrices felis nec fermentum tincidunt. Maecenas tincidunt commodo ante a dapibus."
    },
    {
        id: 3,
        image: web_accessibility,
        heading: "Web Accessibility",
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo arcu, sagittis eget varius vel, fringilla nec metus. Nullam ultrices felis nec fermentum tincidunt. Maecenas tincidunt commodo ante a dapibus."
    },
];

export default homeCardsText;

Note very specifically in id:1 there are HTML tags. When this is rendered to the front end, the HTML becomes sanitized and renders as plaintext. How do I get this to render as HTML?

Hope you’re all doing good, I’ve tried looking around for a specific answer regarding this issue I’m having in ReactJS where I’m trying to map over an array I’m fetching via my local system and I keep getting this error in the console:

TypeError: null is not an object (evaluating 'daysData.map')

Here is a snapshot of my bit of code where I’m initializing the array from fetch:

And here it is in text format:

// Here I initalize the array with useState
  const [daysData, setDaysData] = useState(null);

  // Here is the port I'm fetching my array from.
  useEffect(() => {
    fetch('http://localhost:5001/chocolates')
      .then((resp) => resp.json())
      .then((data) => setDaysData(data));
  }, []);

  // Console logging is sending back the array with no issues
  console.log(daysData);

And here is the map function where I’m trying to render a with the ‘id’ key from the array:

Here is the bit of code in text format:

{/* Here I'm getting the error " TypeError: null is not an object (evaluating 'daysData.map') " */}
      {daysData.map((day) => (
        <div>{day.id}</div>
      ))}

And here is an example of the array where I’ve fetched data from in which I’m trying to map over:

Thanks for any help in advance

I’m a newbie at this and would appreciate some guidance. I’m trying to show some data from Python in an ag-grid on HTML, using Flask and JS, but don’t seem to getting anywhere. Could someone please help me ?

This is the Python code with the rowData that I want to show in an ag-grid:

from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

@app.route('/')
def settings():
    rowData = [{ make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }]

    return render_template('settings.html', rowData=rowData)

I’ve put the ag-grid into a JS function and wanted to call it from the HTML:

function myFunc(rowData) {
      
     const columnDefs = [
        { field: "make" },
        { field: "model" },
        { field: "price" }
       ];

      // let the grid know which columns and what data to use
      const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
      };
      
      // setup the grid after the page has finished loading
      document.addEventListener('DOMContentLoaded', () => {
          const gridDiv = document.querySelector('#myGrid');
          new agGrid.Grid(gridDiv, gridOptions);
      });
}

The HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ag-Grid Basic Example</title>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
    <script src="app.js" type="text/javascript">
        myVar = myFunc({{rowData|tojson}})
    </script>
</head>
<body>
    <div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
</body>
</html>

I’m writing to you as I need help converting a reply from BLE device, and I want to convert it to comprehensible data, but I’m failing to. I’m using React native BLE manager library, and the documentation for the bluetooth device Is like this.

"peripheral": "D6:AD:15:67:4A:A5", "service": "XXXXX-XXXXX-XXXXXX", "value": [85, 0, 255, 0, 0, 13, 0, 96, 93, 0, 0, 0, 0, 0, 49, 0, 0, 0, 1, 0]