|
I like using Object.entries to convert the object into an array of key-value pairs, doing whatever manipulation I want, then rebuilding the object with Object.fromEntries:TypeScript code:
|
# ? Jul 26, 2022 21:08 |
|
|
# ? May 16, 2024 17:40 |
|
Yes, that's what I'd go for too. Or just write the loop. It wouldn't be a very long loop and I think in this case it could be clearer. I actually really dislike the ergonomics of Object.entries and Object.fromEntries.
|
# ? Jul 27, 2022 00:04 |
|
i honestly always forget those functions exist. I think i've used .entries like once in 6 years developing fromEntries I just had no idea about. had to look that one up
|
# ? Jul 27, 2022 17:00 |
|
Javascript newb trying to find my way in node-red. I have two arrays of data that I am trying to assimilate. Array 1 is users Array 2 is groups I have a for loop looping through the users group in a prior node and setting the flow variables usercode and userid. It passes the appropriate variables to this function below. This function deals with the second array, groups. Within the groups array, for each user I have a list of groups that user belongs to. (The letters 'aa', 'bb', etc). I am basically trying to take this information and make a master array that looks as follows: userid, usercode, aa, bb, cc ... 3290, JonesB, 0, 1, 1 where the group numbers are binary either 0 or 1 indicating if that user is a member of the group. The problem I'm having is that the resulting array looks like this: userid, usercode, aa, bb, cc ... 3290, JonesB, 0, 1, 1 ... essentially one dimensional without a new line / new row for each new user. This seems like a simple issue but my google fu is failing me. Any guidance here? Thanks code:
|
# ? Aug 1, 2022 23:11 |
|
Mr. Bubbles posted:
code:
|
# ? Aug 2, 2022 02:47 |
|
roomforthetuna posted:You want That did it, thanks! I knew it was something simple..
|
# ? Aug 2, 2022 12:01 |
|
So this is definitely feels like a dumb question but... My angular app is consuming some API endpoint (C#) that returns a List<Dictionary<string, string>> and I don't really know how to handle this type in Javascript? The List contains 2 dictionaries, which I wish to present in 2 columns in a table. One column will be user-editable data, the other column will be some static display coming from another system. The first dictionary contains the editable data (if any), and the second dictionary is the static values. I have this code: code:
code:
So essentially the question is, how do I access the second dictionary from the object returned by my API? Sab669 fucked around with this message at 19:26 on Aug 4, 2022 |
# ? Aug 4, 2022 19:23 |
|
You are getting a compile time error because [[]] is a nonsensical type that seems to only accept an empty array inside another array? Define return values for your api call, or use 'any' to bypass the type checking edit: the thing that returns from the api is probably something like [Record<string, string>, Record<string, string>]. The api turns the data into JSON when it sends the response, and JSON has objects instead of dictionaries. Obfuscation fucked around with this message at 20:19 on Aug 4, 2022 |
# ? Aug 4, 2022 20:07 |
|
I wasn't really sure how to define just like an array of arrays, or an array of generic objects. I say generic because that getArray function is actually just living in some service and is going to be used by... probably dozens of different components, returning Lists of a variable number of dictionaries with god knows how many keys depending on whatever the array name passed in is -- so I was trying to avoid actually creating some sort of object with actual properties for me to reference in my component/HTML. So, yea, changing it to `any` works perfectly thanks
|
# ? Aug 4, 2022 20:31 |
|
Sab669 posted:I wasn't really sure how to define just like an array of arrays, or an array of generic objects. Sounds like a job for generics.
|
# ? Aug 4, 2022 23:46 |
|
Sab669 posted:So, yea, changing it to `any` works perfectly thanks
|
# ? Aug 5, 2022 00:22 |
|
Good point. I guess I'm just so ingrained in working in more strictly typed languages all my life
|
# ? Aug 5, 2022 01:06 |
Sab669 posted:I wasn't really sure how to define just like an array of arrays, or an array of generic objects. JavaScript code:
|
|
# ? Aug 5, 2022 12:01 |
|
Sab669 posted:So this is definitely feels like a dumb question but... My angular app is consuming some API endpoint (C#) that returns a List<Dictionary<string, string>> and I don't really know how to handle this type in Javascript? This is a red flag that the type itself is not very good to return from an API. First off don't return a List as that's not something that can be extended in the future without having to version the API, it'd be better to return an object with a List property. Next don't return a Dictionary<string, string>. What is that? Even if it was a poor mans tuple, don't use a tuple because no one would know what the properties are. Write code for readability and maintainability. Not for others, but for yourself. A year from now you will look at this code and have no idea what the <string, string> is. Try this - code:
|
# ? Aug 11, 2022 20:46 |
|
Well. It's hard to give a concise answer to that, and I do agree it felt pretty "smelly" when I was first introduced to this List<Dictionary<>> aspect of our database a month or two ago (and still does ). But unfortunately it's way too big of an org for us to just go change poo poo like that and it would have implications for dozens of other applications downstream. But basically we have this concept of "array fields" which I think was implemented to track groups of data through time, although I don't really know who came up with this structure or why. But for example say we've got these 4 tables: - Property - ArrayTypes - ArrayFields - ArrayData One of the "ArrayTypes" is "Expenses". The "ArrayFields" for "Expenses" might be "Taxes", "Maintenance", "Administrative Fees", "Utilities" and whatever else you can imagine costs a property owner money. Then the ArrayData table would contain the actual values, and the IDs for the Property & ArrayFields. Those Array tables are recycled for all manner of objects, not just properties, and the values aren't always going to be numeric. But either way, this lets us just insert another row into the ArrayFields without having to add another column to a table and then update all of the objects code-side to account for this new field/row. So we're basically just saying "Give me all the <ArrayFields> of <ArrayType> for <Property>"... Except we're not only getting 1 collection of fields/data, we're getting N collections with historical data & predictive data for the future -- and that is why it's a List of Dictionaries, where the key/value pair is the array field name and the array data. And each dictionary in the list would be the data for that array as it was 2 years ago, 1 year ago, current year, +1, +2 years or whatever. And lastly... Pretty much all of our applications are more or less being written to be config driven so we almost never need to actually push code changes. So while my HTML example in my original post does hard-code the dictionary keys/object properties, that won't be the case soon -- it'll just be more like "[(ngModel)]="userInputValues[arrayFieldNameFromConfig]". Then when we add a new row to the ArrayFields, all I'd need to do is just update this config file with the input type (date, text, number, label, whatever) and the array field name and the app will automagically handle it all. I'm not saying it's the best solution for the problem, especially when I'm not even sure "tracking groups of data through time" was the exact problem that resulted in this implementation, but it's what I'm stuck with so Sab669 fucked around with this message at 21:58 on Aug 11, 2022 |
# ? Aug 11, 2022 21:50 |
|
Sab669 posted:The "ArrayFields" for "Expenses" might be "Taxes", "Maintenance", "Administrative Fees", "Utilities" and whatever else you can imagine costs a property owner money. Then the ArrayData table would contain the actual values, and the IDs for the Property & ArrayFields. Those Array tables are recycled for all manner of objects, not just properties, and the values aren't always going to be numeric. But either way, this lets us just insert another row into the ArrayFields without having to add another column to a table and then update all of the objects code-side to account for this new field/row.
|
# ? Aug 12, 2022 00:21 |
|
But again the thing we're trying to avoid is that if we go and add a new row to the ArrayFields table then we don't want to have to go and update our hardcoded model with a new field and then have to deploy that code. By making it all "config driven" we're just updating some JSON in Azure somewhere and then the app will immediately reflect those changes. We have dozens of these "array types" with dozens of "array fields" each that my app will have to support, whether I manually create them all or somehow just write some script that generates the files/classes for me is still going to add a lot of stuff that would need to be maintained in the future. Sab669 fucked around with this message at 01:05 on Aug 12, 2022 |
# ? Aug 12, 2022 01:03 |
|
Sab669 posted:But again the thing we're trying to avoid is that if we go and add a new row to the ArrayFields table then we don't want to have to go and update our hardcoded model with a new field and then have to deploy that code. By making it all "config driven" we're just updating some JSON in Azure somewhere and then the app will immediately reflect those changes. But yeah, if your goal is to minimize effort, at the cost of hard to read, easy to write incorrectly, code, just use 'any' or write javascript directly. vvvv Then yeah, if you're not doing anything with the types anyway and it's not an API anyone else uses either then just use 'any'. roomforthetuna fucked around with this message at 02:37 on Aug 12, 2022 |
# ? Aug 12, 2022 01:39 |
|
The thing is though is that the HTML is basically just a giant for loop that does little more than print out a collection of tables and input controls that all automatically get force fed back to the API which does all the validation. So I'm really not writing much, there's nothing to read, there's virtually nothing to write incorrectly. It's an extremely thin client that just looks at that config file to know what the app should look like and how to send/receive some arbitrary collection of data. If I've been working on this project for 3 months, the majority of that time has just been building out that config file with some small amount of development time bending CKEditor to our will, and getting acquainted with the API we use to get/pass data from our DB. And now dicking around with these "array fields" that are a beast of their own and weren't present in the first 2 sections of the application. Sab669 fucked around with this message at 02:14 on Aug 12, 2022 |
# ? Aug 12, 2022 02:11 |
|
i need some help with DOM stuff and event handlers. i'm building a minesweeper clone that works fine on initial load but bugs out when i soft-reload the page using a reset button. on initial load, a function is called with some static values to create a basic minesweeper board, the board consists of <tr> and <td> tags that get assigned numerical id's, like so: code:
code:
code:
inspecting the page, the id's get assigned correctly to each field even after reloading so that doesn't seem to be the issue, and all the values passed as arguments to adjacentCounter are fine as well. i deduced that it must be because of the way the DOM loads and fires the event handler, since the rows below the clicked target are embedded in a different parent <tr> tag they somehow don't exist yet when the event handler is assigned (although visually on the page, they definitely DO exist) stackoverflow just redirected me to this page: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element but i'm a noob and frankly it's difficult to understand which option i should be using (the script tag is already at the bottom of my body so that's not it) here's the event handler for the reset button, it simply reads the values from some fields on an html form and passes them to boardBuilder(): code:
|
# ? Aug 15, 2022 12:54 |
|
Shibawanko posted:only bottom becomes null JavaScript code:
A quick way to verify this would be to log the value you're passing to .getElementById() JavaScript code:
|
# ? Aug 16, 2022 09:54 |
|
Yeah that was my guess too, when you are doing your index-x and index+x you should make sure that they are numbers and not strings. You can console log and even check the typeof, like console.log(typeof x).
|
# ? Aug 16, 2022 11:41 |
|
thanks for the replies, i fixed it now! yeah the problem was that somehow a string was being passed, and resetting the page with forced Number() called on the arguments for the board building function made it work, although i still don't understand why it kept working for the "top" value but not "bottom" when they have basically identical syntax now i just need to get it to do that thing where it opens up an entire "field" of tiles between mines when you click a free tile
|
# ? Aug 16, 2022 12:57 |
Shibawanko posted:i still don't understand why it kept working for the "top" value but not "bottom" when they have basically identical syntax In programming, "basically identical" !== "identical" :P
|
|
# ? Aug 16, 2022 13:35 |
|
Osmosisch posted:The reason is that the + operator also does string concatenation while the - operator does nothing to strings, and therefore doesn't give javascript the option to even try that. so when it sees - and fails to cocatenate, it resorts to treating them like integers by default and therefore it still works?
|
# ? Aug 16, 2022 13:59 |
Shibawanko posted:so when it sees - and fails to cocatenate, it resorts to treating them like integers by default and therefore it still works? What would the semantics of code:
You can try all this out really easily in your browser console if you're curious. Or you can read big ol' articles like this one and try to cram it into your head. The basic lesson is to switch to TypeScript if you want your compiler to stop you from doing this kind of thing, or get really handy with debug logging and breakpoints to see what's messing you up.
|
|
# ? Aug 16, 2022 14:17 |
|
Osmosisch posted:It's just that JS has a "keep on trucking" mentality designed to make life superficially easier but actually massively more difficult in practice. It's because javascript is still backwards compatible to the days when there were no js compilers and the rest. It's suffering from the same problems PHP did, they should get on with it and break a whole bunch of javascript code.
|
# ? Aug 22, 2022 13:20 |
|
ES6M was an opportunity to reset some things, and the only thing achieved was "use strict" . Perfect time to drop the automatic semicolon insertion 🤷🏻♀️
MrMoo fucked around with this message at 18:13 on Aug 22, 2022 |
# ? Aug 22, 2022 14:00 |
|
In fact lets just make typescript the official language, starting tomorrow everything written in javascript no longer works. Job done.
|
# ? Aug 23, 2022 13:59 |
|
Nolgthorn posted:In fact lets just make typescript the official language, starting tomorrow everything written in javascript no longer works. Job done. I second this motion
|
# ? Aug 23, 2022 14:11 |
|
Can't wait for the WASM promised land where I can use any language in the frontend.
|
# ? Aug 23, 2022 14:15 |
|
Given a distance from `0, 0` represented by `x` and `y` coordinates, and given an aspect ratio represented by a number calculated by `width / height`. How do I make a return value for `x` and `y` match that aspect ratio. Ideally, if I have a ratio calculated by `width 100` `height 50`, the returned `y` would be half the value of `x`. TypeScript code:
Why would I care if `x` or `y` was bigger? I should care whether `x` or `y` is closer to the desired output or something like that. But something like the following doesn't make any sense either, it's the same thing. TypeScript code:
TypeScript code:
Edit: Actually none of what I'm doing makes sense. Why would multiplying `y` by `ar` give me the correct value for `x` if at the same time multiplying `x` by `ar` would also give me the correct value for `y`. Ok this whole question is bad. Nolgthorn fucked around with this message at 14:50 on Aug 23, 2022 |
# ? Aug 23, 2022 14:42 |
|
Nolgthorn posted:Given a distance from `0, 0` represented by `x` and `y` coordinates, and given an aspect ratio represented by a number calculated by `width / height`. How do I make a return value for `x` and `y` match that aspect ratio. There are an infinite number of answers that match this specification, in as much as it makes sense at all, which I'm not sure it does (a distance can't really be aspect-ratio'd, a rectangle can). If you want to keep the 'direction' of your distance, the rest of the question you're missing is what constrains the length (do you want it to be as large as it can be within the limits defined by the "aspect ratio"?) If you want to keep the 'length' of your distance, the rest of the question is what constrains the direction (do you want it to be as close to the original direction as possible while touching one of the bounds from the "aspect ratio"?) From your example it seems like you don't want to keep either of those properties of the distance, you actually have x and y representing more like the width and height of a rectangle, and you want that rectangle to have the given aspect ratio. In that case what you're missing is the target constraints. If there *are no* constraints, you can just do y = x * aspect_ratio, unconditionally, or x = y / aspect ratio, unconditionally. (Or maybe the other way around, I can't be bothered to figure out which direction your aspect ratio is in.) Edit: if you want to always shrink it or always grow it to the aspect ratio then the condition you need is if (aspect_ratio > x/y) to decide which of the operations above to apply. If you want to try to evenly distribute the change between x and y then it would need something more complicated. roomforthetuna fucked around with this message at 14:58 on Aug 23, 2022 |
# ? Aug 23, 2022 14:55 |
|
After I posted it I realized how bad the question was and I didn't want to keep editing. Properties `x` and `y` represent the distance the mouse has moved from `0, 0` (where the mouse button was pressed down) in a dragging scenario. We are dragging the corner of an element, so that it will be resized. However the resized element maintains it's aspect ratio. Therefore the `x` and `y` coordinates we get back from this method should be as close to where the cursor is as possible while still maintaining the element's aspect ratio.
|
# ? Aug 23, 2022 16:11 |
|
Let's say that your window's top left is at 0,0, and it's current bottom right is at WinX,WinY. The user clicks a point MouseX,MouseY, and you want the window's bottom right to get as close as possible to that new point, but maintain the same aspect ratio. Imagine a straight line drawn through 0,0 -> WinX, WinY and continuing forever. MouseX,MouseY is going to fall on either side of the line (or exactly on it). So to cover these 3 scenarios: 1) Exactly on the line: The new WinX,WinY will be the same as MouseX,MouseY. The aspect ratio didn't change at all. 2) Above the line: NewWinX = MouseX. NewWinY = MouseX / AspectRatio 3) Below the line: NewWinY = MouseY. NewWinX = MouseY * AspectRatio So how can you tell whether MouseX,MouseY is above or below the line? Do a dot product of the vectors (0,0 -> MouseX,MouseY) and (0,0 -> WinX,WinY). If you get a negative number, it's on one side of the line, if you get a positive number it's on the other side, and if it's 0 then it's on the line. (Scenario 1 doesn't need to be handled separately, it can be handled by scenario 2 or 3 and you'll get the same result) Edit: dot product, not cross product. So the algorithm looks like: code:
minato fucked around with this message at 17:12 on Aug 23, 2022 |
# ? Aug 23, 2022 17:03 |
|
Nolgthorn posted:After I posted it I realized how bad the question was and I didn't want to keep editing. What I think you actually want here is for one of the edges of the rectangle to always intersect the mouse position, i.e. in the case of going down and right from the top right, the rectangle has to grow, because that way its right edge can be where the cursor is, versus if it shrunk then it would move away from the cursor. With that insight you might be able to do the math part yourself. Edit: you might still also need to decide what the expected behavior is if you grab the top right corner and drag it down and to the right so far that the cursor is below the bottom edge of the original rectangle. If you can't flip your original thing then it's literally impossible to satisfy the "cursor on an edge" rule in that situation. roomforthetuna fucked around with this message at 02:57 on Aug 24, 2022 |
# ? Aug 24, 2022 02:54 |
|
Sorry for the delay, other priorities happened. I'm working on this problem again. The codebase has it where the corner the mouse down event happens is 0,0 and I've written this small function that basically sets an "origin" at the opposite corner. I know origin likely isn't the correct term. TypeScript code:
TypeScript code:
TypeScript code:
But I can't figure out why instead of the `dotProduct < 0` part working along the line I want, it seems to switch at a complete perpendicular. So, 0,0 is the center of the line and it extends up and to the right, down and to the left. Where I expect it to extend up and to the left, down and to the right. This is the same on all dragging handles, the line is perpendicular to what I expect. So what happens is I drag the thing bigger and the mouse position changes the height, I drag the thing smaller and the mouse position changes the width. e: I've verified that hPos and vPos in my calcOrigin function are correct. I've verified that x and y returned from calcOrigin are as expected. So there must be an issue related to my math, the dotProduct is wrong. Nolgthorn fucked around with this message at 07:12 on Sep 7, 2022 |
# ? Sep 7, 2022 06:16 |
|
I found the solution it is the following:TypeScript code:
|
# ? Sep 7, 2022 15:38 |
|
So in TypeScript, generics are a compile-time thing. Since that's so, why can't I instance generic types? Kinda this sort of stuff.TypeScript code:
Combat Pretzel fucked around with this message at 15:47 on Sep 7, 2022 |
# ? Sep 7, 2022 15:43 |
|
|
# ? May 16, 2024 17:40 |
|
Confused about what it is. If you want your class to extend another class you should define another class and extend it. Then typescript would surely figure out what you were doing.
|
# ? Sep 7, 2022 20:15 |