Click here to Skip to main content
15,867,686 members

The Weird and The Wonderful

   

The Weird and The Wonderful forum is a place to post Coding Horrors, Worst Practices, and the occasional flash of brilliance.

We all come across code that simply boggles the mind. Lazy kludges, embarrassing mistakes, horrid workarounds and developers just not quite getting it. And then somedays we come across - or write - the truly sublime.

Post your Best, your worst, and your most interesting. But please - no programming questions . This forum is purely for amusement and discussions on code snippets. All actual programming questions will be removed.

 
GeneralRe: Strange apparatus Pin
peterkmx21-Oct-22 1:01
professionalpeterkmx21-Oct-22 1:01 
GeneralRe: Strange apparatus Pin
MarkTJohnson21-Oct-22 3:15
professionalMarkTJohnson21-Oct-22 3:15 
GeneralRe: Strange apparatus Pin
RickZeeland21-Oct-22 3:26
mveRickZeeland21-Oct-22 3:26 
GeneralRe: Strange apparatus Pin
Mike Hankey21-Oct-22 4:54
mveMike Hankey21-Oct-22 4:54 
GeneralRe: Strange apparatus Pin
MarkTJohnson21-Oct-22 5:14
professionalMarkTJohnson21-Oct-22 5:14 
GeneralRe: Strange apparatus Pin
Nelek22-Oct-22 12:56
protectorNelek22-Oct-22 12:56 
GeneralRe: Strange apparatus Pin
RickZeeland22-Oct-22 19:38
mveRickZeeland22-Oct-22 19:38 
GeneralReactJS - Add 10,000 nodes & select options Pin
raddevus5-Oct-22 11:07
mvaraddevus5-Oct-22 11:07 
I've been learning React.
It's quite amazing actually.

I wanted to know what the impact of my simple Project* object would be if there were a lot of them.

Questions I Had
1. What If I Added 10,000 div nodes to my page?
2. What if I added 10,000 choices to a drop list (html select tag - option values)?
2a. Additionally, what if I added each Project object (serialized to string) as the value on the select tag option?

It performs amazingly well.

Bonus Info

Here's how you add a value to a drop list (select tag) in HTML / JavaScript:

JavaScript
// get reference to the drop list
 let projectList = document.querySelector("#projectList");
 // Append a new Option to the drop list - p.name is the text you'll see
 // value (string) is the value returned when item is selected.
 projectList.append(new Option(p.name, value, false, false));

Add Object As Value
But, if you're an OOP person and you want to use a specific object whenever an item is selected int he drop list then you want to store the object as the value. That way, when the user selects the item you have the original object.

Since value expects a string you will need to do this:
JavaScript
projectList.append(new Option(p.name, JSON.stringify(p), false, false));

Now when the user selects an item in the drop list you simply parse the thing back to your target object.

The changehandler is my method which is fired when user selects a new value from drop list.
JavaScript
changeHandler(e) {
    // changehandler receives event object which contains target (drop list item selected)
    // item's properties will match a Project
    let item = JSON.parse(e.target.value);
    console.log(`item.name: ${item.name}`); // original Name of the Project
}

But How Does It Perform With 10,000 Serialized Objects?
It's amazing. Takes < 1 second for drop list to respond.
Pics or it didn't happen. Roll eyes | :rolleyes: See snapshot here[^].

*Project Class
JavaScript
export class Project {
  constructor(name) {
    this.id = uuidv4();
    this.ownerId = localUser;
    this.name = name || '';
    this.created = new Date();
  }
}

File it under weird, but it is also quite wonderful. Laugh | :laugh:
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
Richard Deeming5-Oct-22 21:32
mveRichard Deeming5-Oct-22 21:32 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
raddevus6-Oct-22 2:59
mvaraddevus6-Oct-22 2:59 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
GuyThiebaut6-Oct-22 1:24
professionalGuyThiebaut6-Oct-22 1:24 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
raddevus6-Oct-22 3:00
mvaraddevus6-Oct-22 3:00 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
Amarnath S20-Oct-22 19:22
professionalAmarnath S20-Oct-22 19:22 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
raddevus22-Oct-22 5:54
mvaraddevus22-Oct-22 5:54 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
Amarnath S22-Oct-22 22:18
professionalAmarnath S22-Oct-22 22:18 
GeneralRe: ReactJS - Add 10,000 nodes & select options Pin
jschell12-Dec-22 11:11
jschell12-Dec-22 11:11 
GeneralCMD Type command - When did this happen? Pin
Dave Kreskowiak30-Sep-22 5:04
mveDave Kreskowiak30-Sep-22 5:04 
GeneralRe: CMD Type command - When did this happen? Pin
PIEBALDconsult30-Sep-22 5:13
mvePIEBALDconsult30-Sep-22 5:13 
GeneralRe: CMD Type command - When did this happen? Pin
Mircea Neacsu30-Sep-22 5:44
Mircea Neacsu30-Sep-22 5:44 
GeneralRe: CMD Type command - When did this happen? Pin
Kevin Marois30-Sep-22 5:45
professionalKevin Marois30-Sep-22 5:45 
GeneralRe: CMD Type command - When did this happen? Pin
Mircea Neacsu30-Sep-22 5:48
Mircea Neacsu30-Sep-22 5:48 
GeneralRe: CMD Type command - When did this happen? Pin
PIEBALDconsult30-Sep-22 6:06
mvePIEBALDconsult30-Sep-22 6:06 
GeneralRe: CMD Type command - When did this happen? Pin
scottgp30-Sep-22 7:39
professionalscottgp30-Sep-22 7:39 
GeneralRe: CMD Type command - When did this happen? Pin
PIEBALDconsult30-Sep-22 7:46
mvePIEBALDconsult30-Sep-22 7:46 
GeneralRe: CMD Type command - When did this happen? Pin
scottgp30-Sep-22 8:23
professionalscottgp30-Sep-22 8:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.