|
Javascript 2 announced: https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/
|
# ? Mar 10, 2022 07:17 |
|
|
# ? May 27, 2024 04:13 |
|
Ape Fist posted:Javascript 2 announced: It's weird to be on the same team as Microsoft, but drat this proposal kicks rear end
|
# ? Mar 10, 2022 13:29 |
|
EDIT figured it out. You can refer to an object's fields through a string like so: theObject["propertyName"], so in my case my ckeditor definition simply needed to be <ckeditor [(ngModel)]="asrModel[field.modelProperty]" ..> For lack of a better term, does Angular support reflection? Like I want to use the value of oneObject.SomeStringProperty to get the actual value of otherObject.TheActualPropertyIWant I don't know if what I'm trying to accomplish is technically possible. Right now, I've got a hardcoded rich text editor bound to a property on my object, which gets loaded onInit. component.HTML: code:
code:
What I'm trying to do now, instead of hardcoding my UI is just load a JSON object that defines a collection of Sections, which has a collection of Subsections, which has a collection of Fields. That got that working, but I can't abstract out the `[(ngModel)]="asrModel.specialConsiderations"` of the HTML shown in my first snippet above into my JSON. My field JSON looks like this: code:
And my updated component.html: code:
I hope that all makes sense Like I said I'm pretty new to Angular, I strongly suspect it's possible I just don't know how / can't find it on SO. Sab669 fucked around with this message at 17:33 on Mar 10, 2022 |
# ? Mar 10, 2022 16:54 |
|
Ape Fist posted:Javascript 2 announced: This is relevant to my interests.
|
# ? Mar 10, 2022 23:17 |
|
camoseven posted:It's weird to be on the same team as Microsoft, but drat this proposal kicks rear end
|
# ? Mar 11, 2022 01:34 |
|
I barely if ever use JQuery, but i'm running into a issue that I think should be easy to solve but I can't. I'm trying to get a field value via JQuery and THEN set it to a bit of local storage so I can use it on another form. THis is the code I have:code:
Thanks for any help goon.s
|
# ? Mar 31, 2022 16:49 |
|
phone postin but what's your getter look like for locale storage? Also what does the dev console say is set in locale storage after the event has fired?
|
# ? Mar 31, 2022 17:30 |
|
I got it to populate finally and work, I think it was a caching issue .
|
# ? Mar 31, 2022 17:43 |
|
We have an interface that allows zooming in and out using the scroll wheel or the trackpad. This functionality only works if you are holding down the Ctrl key on windows or the Meta key on mac. There is one horrendous issue that is going to drive me crazy. https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e One day IE10 pioneered this idea to bubble the pinch event up through the mouse wheel event, for convenience. Which is great, now the mouse wheel and pinching on a trackpad both trigger the same event. That's exactly my use case. However when it's a pinch event the scale is way off, by a factor of 10, so that has to be corrected so how do I tell the difference between a pinch and a scroll of the wheel? Well Microsoft decided that to help you out, just check the value of event.ctrlKey. Which is the key that the users of our app always happen to be holding down when they want to zoom and it is completely useless to me. How in the world am I supposed to make use of wheel events and pinch events in conjunction with the ctrl key, if javascript is using the ctrl key to tell me whether it is a trackpad event :/ Edit: I know I can detect keyboard events separately, that would tell me if the key was actually being held down or not. But if they are actually holding it down, I have no way to tell if they're using the trackpad or the mouse. What kind of implementation is that? I'm not saying I'm better than Microsoft but I don't understand what they were thinking in that conference room. Nolgthorn fucked around with this message at 14:10 on Apr 5, 2022 |
# ? Apr 5, 2022 13:01 |
|
JavaScript code:
When the wheel event fires I keep track of how big the deltaY was. From that point until they stop spinning the wheel I use whatever the smallest delta was as a divisor. That way I get a consistent 1 or -1, or 2 or -2 etc. Then I don't have to care about what type of mouse they are using or what input device it is or any of that. It's pretty much saying "I don't care how much they moved it I just care that they moved it." But additionally accounts for very large movements, as I've noticed it does that sometimes and delivers a value two or three times bigger than the others. Then I just multiply that by a zoom speed. Nolgthorn fucked around with this message at 08:24 on Apr 7, 2022 |
# ? Apr 5, 2022 14:59 |
|
Nolgthorn posted:
If you try that with an apple magic mouse, you're going to have a fun time. That mouse likes to emit a scroll event really really tiny deltaY (like .0001) when you scroll it horizontally (or in most cases swipe your finger slightly to the left or right because it has no buttons.) The scroll wheel event does all sorts of crazy poo poo and you'll see differences depending on OS, whether scroll wheel is set to go by line or by page, type of mouse, etc. I'd highly recommend just letting it scroll the page and not trying to use it to do other things if you can possibly help it.
|
# ? Apr 5, 2022 16:12 |
|
I'm trying to have it zoom the page. But can't get around pinch on the tackpad and mouse wheel both emitting the same event, only differentiated by the ctrl parameter. Our app uses the ctrl key to enable the functionality in the first place. So there's no way to tell which input type it is. That's the problem. I'm not trying to change the way the page scrolls, that's a nightmare.
Nolgthorn fucked around with this message at 19:00 on Apr 5, 2022 |
# ? Apr 5, 2022 18:57 |
|
I am in the middle of rewriting one of my Blazor server front ends into React. I don't think this is a React question, but more JavaScript related, so here goes. I am making a retail store page as a demo (it also has an employee portal and vendor portal). On the index page, just for variety, the page selects three products at random and displays them to the user as items specially selected for them. I have this function: JavaScript code:
JavaScript code:
So I try to call the service in one of my pages, like this: JavaScript code:
So I suspect that I have some sort of fundamental disconnect on promises or something. I can't figure out why RandomProducts has three products in an array, and seems to return it, but the caller is getting back null. Can someone educate me please? TIA
|
# ? Apr 6, 2022 18:19 |
|
LongSack posted:I am in the middle of rewriting one of my Blazor server front ends into React. I don't think this is a React question, but more JavaScript related, so here goes. The promise is asynchronous, so basically you are saying "go fetch me three products and let me know when you're done and what they are". But the code doesn't stop and wait for the fetch to happen, it moves right on to the console.log, if block, etc. I assume when you logged out of RandomProducts you were doing it in the "then" block, so it waited til the call was done then logged the data you got back. Also RandomProducts returns null but it actually needs to return a promise, then you can async/await or chain it or whatever. Phone posting but hopefully that helps a bit
|
# ? Apr 6, 2022 18:42 |
|
camoseven posted:The promise is asynchronous, so basically you are saying "go fetch me three products and let me know when you're done and what they are". But the code doesn't stop and wait for the fetch to happen, it moves right on to the console.log, if block, etc. I assume when you logged out of RandomProducts you were doing it in the "then" block, so it waited til the call was done then logged the data you got back. Thank you! I changed ProductService to: JavaScript code:
JavaScript code:
|
# ? Apr 7, 2022 18:29 |
|
code:
For instance in SQL like terms, Select * FROM assignments WHERE aName = 'AssignmentName1'. I'm sure this is simple but having trouble with methods for how to accomplish it.
|
# ? Apr 20, 2022 21:10 |
|
you're looking for .find() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find TypeScript code:
TypeScript code:
teen phone cutie fucked around with this message at 21:20 on Apr 20, 2022 |
# ? Apr 20, 2022 21:18 |
|
teen phone cutie posted:you're looking for .find() Perfect, that did it. Thanks
|
# ? Apr 20, 2022 22:35 |
|
Hey all, i'm having the hardest time trying to think up the right way to search for this, but does anyone know of a library that lets you take a image, let's say of a house, and overlay data on top of it? Sort of like a mapping tool that allows custom markers but only on a image and not on a geolocation basis...if that makes sense.
|
# ? Apr 21, 2022 15:28 |
|
I've never used this, but https://recogito.github.io/annotorious/ looks like it might fit what you want. I've used image annotation packages for a C# project a long time ago. Forget how it all works, but I recall it being pretty easy to just overlay text dynamically onto an image. Sounds like you're trying to "stack" layers images on top of one another though rather than text? What exactly do you mean by "markers"
|
# ? Apr 21, 2022 15:42 |
|
That seems like it will work. Essentially what i'm doing is trying to make a "floorplan" out of a image that shows open vacancies in rooms etc, but it retrieves the data from a database. I think this annotation might work for that though but if you know of a mapping software solution that would work too!
|
# ? Apr 21, 2022 15:48 |
|
Yet another “React related but really a JavaScript question” The Book I used to learn React with ASP.Net Core defined components like this: TypeScript code:
TypeScript code:
TypeScript code:
TypeScript code:
TIA
|
# ? Apr 25, 2022 23:30 |
|
LongSack posted:So my question is, is one of those better than the other? "const foo = () => <function definition>" is not quite equivalent to "function foo(...)", as there are differences in the way they are executed. For example, see this MDN example which shows how "this" is interpreted in an arrow function.
|
# ? Apr 26, 2022 00:28 |
|
Are the reactstrap docs wrong? I'm trying to use a dropdown, and the code exactly copy pasted from the docs doesn't work, it doesn't do anything when I click it. https://reactstrap.github.io/?path=/docs/components-dropdown--dropdown JavaScript code:
JavaScript code:
|
# ? May 2, 2022 12:24 |
|
Miss Broccoli posted:Are the reactstrap docs wrong? Looks like the actual code for the example is here: https://github.com/reactstrap/reactstrap/blob/master/stories/examples/Dropdown.js You need some state code to handle the toggle for the root <Dropdown>
|
# ? May 2, 2022 14:23 |
|
Hey all, I have a quick question about React and APIs. I am calling a API like this: code:
code:
|
# ? May 4, 2022 23:48 |
|
worms butthole guy posted:Hey all, I have a quick question about React and APIs. Use async / await to wait for the call to complete before getting the value and returning: code:
|
# ? May 4, 2022 23:53 |
|
Lumpy posted:Use async / await to wait for the call to complete before getting the value and returning: So I tried that and it works inside the function but if I try to call that function and assign it to a variable, and then console log it I get the same thing code:
|
# ? May 4, 2022 23:55 |
worms butthole guy posted:Hey all, I have a quick question about React and APIs. whew, you need to look up how promises work or you'll suffer every time you need to work with them. What you're returning there is still a promise, you need to either work inside a then code:
code:
worms butthole guy posted:So I tried that and it works inside the function but if I try to call that function and assign it to a variable, and then console log it I get the same thing You need to call the function with await if you want to settle the promise, there's no way to skip that step.
|
|
# ? May 4, 2022 23:55 |
|
code:
Axios.get immediately returns a Promise, which is a placeholder for the actual result that will eventually arrive later (unless an error occurs). The Promise's state will initially be unfulfilled, and a few ms later it will be fulfilled. Promises were invented to avoid unmaintainable source code, where chains of async actions would result in "trees" of result handling code. However Promises also had their own syntax issues (lots of .then() statements and sub-functions), so they got surpassed by the "async/await" syntax above, which adds some syntactic sugar over Promises to allow the developer to write async code in a fashion that looks very close to (imo much more readable) synchronous code. You still have to know what a Promise is, but you don't have to care about it as much. e: My code probably has a bug there, I think I fixed it. "Async somefunction() { ... }" means that "somefunction" returns a Promise, and "result = await somefunction()" calls that function and "pauses" the runtime until the Promise is fulfilled. You can only call "result = await somefunction();" from within a function marked as async, which can kinda lead to source code adding async/await all over the place. You can mark an event handler as async and that's fine, because although it's supposed to return a Promise, the browser (which calls the handler) throws away the result so it doesn't matter that it's not a "true" async function. minato fucked around with this message at 00:15 on May 5, 2022 |
# ? May 5, 2022 00:06 |
|
Cool thank you all. I usually work with NextJS or PHP so I never really have to deal with data fetching except for in the componentDidMount.
|
# ? May 5, 2022 00:16 |
|
The way I got taught to do it is with an effect hook. Is that incorrect? like so:code:
code:
|
# ? May 5, 2022 03:17 |
|
Yeah so maybe i'm not using React the right way or something lol. Essentially what i'm trying to do is this: 1. Hit a outside API that gathers the list of attractions 2. Sort that API to filter out attractions I dont want. 3. Then pick a random attraction from this object. 4. Then send the result of this object to the API call from above 5. Use a mix of data from number 3 & 4 to display info and to all of this once every five minutes I tried messing with promises and such last night but I eventually got to a point where it was just constantly running the API call non stop. I know with NextJS I could do all of this stuff before it even gets the chance to load the page, but React seems to want to load everything all at once, so i'll get random errors of xyz not being available yet. So I wonder a few things: 1. Is there something else I should use for this besides React? I'd perfer not to use NextJS again as I wanted to change it up. This will never be publically exposed. 2. Am I doing everything wrong using a mixture of useeffect and promises and instead should just make one function that has a huge chain of .thens? 3. I've been using functional react; I know class based react CAN grab all this data before page generation right? Thanks for the help and all the stupid questions. I don't have my code on me otherwise i'd post it.
|
# ? May 5, 2022 14:23 |
|
Okay sorry for the delay. Here's the code I have:code:
Thanks for all help
|
# ? May 6, 2022 00:26 |
|
worms butthole guy posted:Okay sorry for the delay. Here's the code I have: Maybe try this? code:
first move tengen fucked around with this message at 14:53 on May 6, 2022 |
# ? May 6, 2022 14:42 |
|
worms butthole guy posted:So I know this ultimately lies in my "useEffect" and my state. Right now, that final console.log(ride + ride) just returns "ride: [object Promise]". The reqAssets function seems to work fine except it's not actually returning anything, which i'm not sure why because if I type on top of the return statement console.log(pickedRide) it'll work...ripping my hair off over this lol. JavaScript code:
|
# ? May 6, 2022 19:28 |
|
Has anyone encountered this error before?quote:Failed to compile. I'm trying to install this library, I tried both their Recommended Way and got the above error. Then I tried their Angular CLI steps but as soon as I add the imports to my app.module.ts I get the above error. I've googled around a bunch and I see lots of posts with similar errors but a different export, and all the solutions seem specific to the whatever library that specific post is about.
|
# ? May 6, 2022 19:59 |
|
Sab669 posted:Has anyone encountered this error before? You need to set your bundler (probably webpack) to interpret .mjs files as js files. Or use an older version of that library that doesn't use .mjs files
|
# ? May 6, 2022 21:05 |
|
Thanks, although I have no idea how to do that Looking into it now, definitely seems like a problem for Monday though.
|
# ? May 6, 2022 21:52 |
|
|
# ? May 27, 2024 04:13 |
|
first move tengen posted:Maybe try this? The way I handle this (thanks to “ASP.NET Core 5 and React Second Edition”) is like this: TypeScript code:
|
# ? May 6, 2022 23:26 |