How can I sort an object according to its key?

I currently have this object but I need to change the position of the keys.

const json = [
  {
    correo: "[email protected]",
    enviado: true,
    excel: true,
    fechaSolicitud: "08-10-2021",
    fechas: "[2021-07-31]",
    idCliente: 34170,
    pdf: true,
    planes:
      "[{f:25,p:110020904148}, {f:25,p:112690000002}, {f:25,p:112690000006}, {f:25,p:112690000007}, {f:25,p:112690000019}, {f:25,p:112690000025}, {f:25,p:112690000026}, {f:25,p:112690000030}, {f:25,p:112690000037}, {f:25,p:112690000038}, {f:25,p:112690000039}, {f:25,p:112690000040}, {f:25,p:112690000041}, {f:25,p:112690000042}, {f:25,p:112690000056}, {f:25,p:112690000057}, {f:25,p:112690000058}, {f:25,p:112690000059}, {f:25,p:112690000063}, {f:25,p:112690000069}, {f:25,p:112690000076}, {f:25,p:112690000083}, {f:25,p:112690000084}, {f:25,p:112690000104}, {f:25,p:112690000105}, {f:25,p:112690000108}, {f:25,p:112690000117}, {f:25,p:112690000130}, {f:25,p:112690000131}, {f:25,p:112690000132}]"
  }
];

I am trying to sort the object by the keys and I need it like this

this is what it sends me when I iterate it

correo
enviado
excel
fechaSolicitud
fechas
idCliente
pdf
planes

I need to achieve this result

fechaSolicitud
idCliente
correo
enviado
pdf
excel
fechas
planes

I show you the code I’ve been trying out

let columnsArray: any[];
    for (const key in json) {
        if (json.hasOwnProperty(key)) {
            columnsArray = Object.keys(json[key])

            columnsArray.sort()

        }
    }

here is the codesanbox if someone wants to help me enter link description here

Capturing consecutively recurring digit(s) by regexp

There are a series of repeating digits those i want to capture, perhaps starting right after the decimal point or after a while. In short i have a problem with capturing

222553 in 0.00222553222553222553222553222553222553222553222553

6 in 0.166666666666666666

1 in.0.11111

with the same regexp. I have tried many that i could think of from /(d+)1/ to /(d+?d+?)1/ (which looked promising) to /(((d)3*(?!3))+?)1/ but was not able to figure it out. Could anybody help please?

Input Box Freezes After Pressing Escape Key on an Alert Message Box

I am showing an alert() message in the onkeyup event of an input element when the user presses the enter key. If the user presses Ok button or presses Enter key to close the alert box, everything is fine. But when the user presses the Escape button to close the alert, the textbox freezes. It wouldn’t be focused on, won’t be typed on, as if it is disabled.

How do I fix that?

Note: the problem won’t appear in jsfiddle

window.addEventListener('DOMContentLoaded', () => {
  document.getElementsByTagName("input")[0].onkeyup = function(event) {
    if (event.keyCode === 13) {
      alert('Press Escape Key. The textbox will freeze.');
    };

  }
});
<input placeholder="Press Enter Here" />

What did I wrong be converting that jquery code to plain javascript

I currently trying to implement an OverTheAir Update for my microcontroller. I found an example which I can use. The problem is I would like to use it without access to the internet. The problem it is written in JQuery and I did not work with JQery so far. Using JQuery does not work with the project since it has no internet access.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
  <input type="file" name="update" />
  <input type="submit" value="Update" />
</form>
<div id="prg">Fortschritt: 0%</div>
<script>
  $("form").submit(function (e) {
    e.preventDefault();
    var form = $("#upload_form")[0];
    var data = new FormData(form);
    $.ajax({
      url: "/update",
      type: "POST",
      data: data,
      contentType: false,
      processData: false,
      xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener(
          "progress",
          function (evt) {
            if (evt.lengthComputable) {
              var per = evt.loaded / evt.total;
              $("#prg").html("progress: " + Math.round(per * 100) + "%");
            }
          },
          false
        );
        return xhr;
      },
      success: function (d, s) {
        console.log("success!");
      },
      error: function (a, b, c) {},
    });
  });
</script>
";

And I tryed to get the upload part with that but it seems I missing some properties or did set wrong parameters

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Upload</title>
    <script>
      async function uploadFile() {
        let formData = new FormData();
        formData.append("file", fileupload.files[0]);
        await fetch("/upload", {
          method: "POST", // *GET, POST, PUT, DELETE, etc.
          mode: "same-origin", // no-cors, *cors, same-origin
          cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
          credentials: "same-origin", // include, *same-origin, omit
          headers: {
            "Content-Type": "application/json",
            // 'Content-Type': 'application/x-www-form-urlencoded',
          },
          redirect: "follow", // manual, *follow, error
          referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
          body: formData, // body data type must match "Content-Type" header
        });
        alert("The file has been uploaded successfully.");
      }
    </script>
  </head>
  <body>
    <p>Click on the "Choose File" button to upload a file:</p>

    <input id="fileupload" type="file" name="fileupload" />
    <button id="upload-button" onclick="uploadFile()">Upload</button>
  </body>
</html>

I would like to upload the new firmware which is a .bin file does that require some special settings?

I am using this example: https://github.com/espressif/arduino-esp32/blob/master/libraries/ArduinoOTA/examples/OTAWebUpdater/OTAWebUpdater.ino

I modified it alittle bit so it can be used in the access point mode.
I Can post the modified code too but since it does not work with html code there should be no error since it works with the JQuery code.
(I posted that code here too: https://forum.arduino.cc/t/why-can-i-do-not-perform-an-ota-update-when-i-am-in-the-ap-mode-it/952874/3)

Javascript Classes – ECMA6 – Inherited Methods

Goal: Build subclasses that inherit proprieties and methods from the super class “Media”. I am testing out the new cleaner systantic sugar of the class, extends and super keywords of the ECMA 6 Syntax but throwing an error.

Issue: TypeError.

Code Thus Far

class Media{
  constructor(title){
    this._title = title;
    this._isCheckedOut = false;
    this._ratings = [];
  }
  get title(){
    return this._title;
  }
   get isCheckedOut(){
    return this._isCheckedOut;
   }
   get ratings(){
    return this._ratings;
  }
  set isCheckedOut(value){
    this._isCheckedOut = value;
  }
  toggleCheckOutStatus(){
    this._isCheckedOut = !this.isCheckedOut;
  }
  getAverageRating(){
    let ratingsSum =
      this._ratings.reduce((accumulator, rating) => accumulator + rating);
      return ratingSum / this.ratings.length;
  }
  addRating(value){
    this._rating.push(value)
  }
  }
  class Book extends Media{
     constructor(author,title,pages){
       super(title);
  }
      get author(){
        return this._author
      }
      get pages(){
        return this._pages
      }
  }
class Movie extends Media{
    constructor(director,title,runTime){
      super(title);
    }
    get director(){
      return this._director
    }
    get runTime(){
      return this._runTime
    }
    get title(){
      return this._title
    }
}
class CD extends Media{
    constructor(singer,title,runTime){
      super(title);
    }
    get director(){
      return this._singer
    }
    get runTime(){
      return this._runTime
    }
    get title(){
      return this._title
    }
}

const historyOfEverything = new Book('Bill Bryson','A Short History of Nearly Everything',544);
historyOfEverything.toggleCheckOutStatus();

console.log(historyOfEverything.isCheckedOut);
historyOfEverything.addRating([4,6,10.2,4])
console.log(historyOfEverything.getRatings()

Current Results TypeError: Cannot read properties of undefined (reading ‘push’) Unsure of why I am getting this error when the syntax for the Array method .push() is correct.

React Router v6 refreshing page when previous path was different

I have some question about forcing to reload page.
I have context provider who is fetching data on the first render.
I have different paths, on homepage I’m showing that fethced data.

But if user changes path (route) to for example “/about” and he come back to “/” i want to make that page will be refreshed (for fetching data on more time). Hmm, how can I achieve this?

Send JSON document to PHP script using vanilla AJAX (not JQuery)

I’m attempting to send a JSON document to a PHP script using AJAX. The JSON document is constructed from the value of a <textarea>.

I have successfully executed the solution using JQuery, and (for fun?!) am working on achieving the same result with vanilla AJAX.

The calling PHP script:

print("<script>n");
print("  function preview() {n");
print("    var xhttp;n");
print("    xhttp = new XMLHttpRequest();n");
print("    xhttp.onreadystatechange = function() {n");
print("      if (this.readyState == 4 && this.status == 200) {n");
print("        document.getElementById("output").innerHTML = this.responseText;n");
print("      }n");
print("    };n");
printf("    var postData = {n");
printf("        'html' : document.getElementById("editor").value,n");
printf("    };n");
printf("    xhttp.open("POST", "markuppreview.php");n");
printf("    xhttp.setRequestHeader('Content-type', 'application/json');n");
printf("    xhttp.send(postData);n");
print("  };n");
print("</script>n");

print("<pre><textarea id="editor" name="content" placeholder="Enter your markup"></textarea></pre><br />n");
print("<button value="Preview" onclick="preview();">Preview</button>n");
print("<h2>Preview</h2>n");
print("<div id="output" style="height:100px"></div>n");

The receiving PHP:

$Parsedown = new Parsedown();
$Parsedown->setSafeMode(true);

$data['success'] = false;
$data['output'] = '';
if ($_POST['html']) {
    $data['success'] = true;
    $data['output'] = $Parsedown->text($_POST['html']);
}
echo json_encode($data);

I receive the following error, and can’t work out why the postData.html isn’t being received.

Warning: Undefined array key "html" in /Library/WebServer/Documents/markuppreview.php on line 8
{"success":false,"output":""}

I also tried a Javascript object method for constructing the JSON document, but received the same message. When I alert the JSON document, it does show an html element with the data from the <textarea>.

printf("    var postData = new Object();n");
printf("    postData.html = document.getElementById("editor").value;n");
printf("    postData = JSON.stringify(postData);n");
printf("    alert(postData);");

how to rotate vector around axis in world coordinates?

I have an axis in world coordinates, as defined by 2 vectors, for example one that points upwards at x = 10:

const axisStart = new Vector3(10, 0, 0)
const axisEnd = new Vector3(10, 0, 1)

I’m getting the normalized axis direction like so:

const axisDirection = new Vector3().subVectors(axisEnd, axisStart).normalize()

How can I rotate a vector (e.g. Vector3(50, 0, 0)) around my original axis?

I’ve tried using Vector3.applyAxisAngle(axisDirection , radians), but because the axis has been normalized, the rotation happens around the world center (0, 0) and not around the axis’ original position.

SQL Parse Error Using JavaScript with Express and MySQL

I am trying to make a log in system. Right now I am working on allowing the user to register. I am trying to make it so you can’t create an account that has the same username or email as another. However, it is giving me a parse error.

Here is the code:

app.post("/create", (req, res) => {
  const email = req.body.email;
  const username = req.body.username;
  const password = req.body.password;

  db.query("SELECT email, username FROM users WHERE email = ? AND username = ?"),
    [email, username],
    (err, result) => {
      if (err) {
        console.log(err);
      } else if (result) {
        res.send("Username or Email is already in use.")
      } else {
        db.query(
          "INSERT INTO users (email, username, password) VALUES (?,?,?)",
          [email, username, password],
          (err, result) => {
            if (err) {
              console.log(err);
            } else {
              res.send("Values Inserted");
            }
          }
        );
      }
    };
});

Here is the error I am getting:

{
  code: 'ER_PARSE_ERROR',
  errno: 1064,
  sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '? AND username = ?' at line 1",
  sqlState: '42000',
  index: 0,
  sql: 'SELECT email, username FROM users WHERE email = ? AND username = ?'
}

How to make 1 year timeout – node

im making a bot in node and i wanted to make a timeout with the lenght of 365 days, and node doesn’t allow me to do it, how can i do it?

Current Code:

setTimeout(() => {
 talkedRecently.delete(message.author.id);
}, 31536000000);

Output:

(node:21788) TimeoutOverflowWarning: 31536000000 does not fit into a 32-bit signed integer.

Thanks in advance!

How to update lists after delete a category

I want to update the Category list after delete a category, I used custom hook for fetching data from the server. I’m not sure how to update state on custom fetch hook

const {data, error, loading} = useFetch("/api/admin/category");
    const [category, setCategory]= useState([]);

    useEffect(() => {
        setCategory(data)
    },[])

    const deleteHandler = (id) => {

        const deleteRequest = async () => {
            const data = await axios.delete(`/api/admin/category/${id}`);
            return data;
        }

        deleteRequest()
            .then(res => {
                data.filter((item) => {
                    return id !== item.id;
                })
            })
    }

Can WinForms be used to create an app that has functionality similar to Chrome extensions? Detecting what was clicked, modifying CSS.. etc

I am interested in creating a visual web scraper. Visual meaning the user clicks in a web page to decide what elements to scrape and the app knows what the user clicked on. The user doesn’t need to be technical and knows CSS or XPath. Some Chrome extensions do this like https://dataminer.io and AnyPicker.

Then I came across ScrapeStorm which is a desktop app and does the same thing without using a Chrome extension. It’s an Electron app.

I don’t have experience developing Chrome Extensions or using Electron.

I know .NET and Javascript. My question is.. can I develop a desktop app similar to Scrapestorm using WinForms and using some type of a browser control in it and be able to fully interact with the control?
What libraries and technologies do I need so that C# code can interact with HTML elements and user actions in a browser control in realtime? (I think Electron uses BrowserWindow). The reason I am going with WinForms other than being familiar with it is that the app will be doing stuff with the scraped data using .NET and I prefer to do everything in a single .NET app.
I will also be looking at Electron.NET and see if maybe it’s a better choice, even though I am not familiar with Electron and Node.

What is the purpose of “additionalItems” property on arrays in rjsf?

I’m studying rjsf documentation and I’m confused about the additionalItems section of array docs.

Here is the example code from the docs:

const Form = JSONSchemaForm.default;

const schema = {
  type: "array",
  items: {
    type: "string"
  },
  additionalItems: {
    type: "boolean"
  }
};

ReactDOM.render((
  <Form schema={schema} />
), document.getElementById("app"));

and here is the official codepen

The rendered form seems to behave exactly the same if I remove the additionalItems, so what is the purpose? I guess it has one, since it’s explicitly brought up in the docs, but I can’t figure it out 🙂