I have data that is in all caps. I want to make the first letter of each word capitalized and the rest of the word lowercase but I cannot seem to do it.
I tried this using lodash
{
Header: 'Security Name',
accessor: 'securityName',
minWidth: 70, // minWidth is only used as a limit for resizing
width: 260, // width is used for both the flex-basis and flex-grow
maxWidth: 300,
Cell: e => <div>{_.lowerCase.firstUpper(e.value)} </div>,
},
But it won't work. Any ideas on how to make this possible?
The reaosn why your code did not work is because the method is not firstUpper but upperFirst.
Also, you need to write _.lowerCase(_.upperFirst(e.value)) instead of _.lowerCase.upperFirst(e.value), because JavaScript methods take parenthesis to initiate.
However, the better solution will be using capitalized directly, which is also provided by lodash .
// Example
_.capitalize('FRED');
// => 'Fred'
Related
I use a JS helper file that consists of objects that are passed into a function that renders it. However, the \n doesn't work and I am not sure how to add line breaks. This is my helper list.
export const TweetList = [
{
link: 'https://twitter.com/JayWuzer/status/1553804606265651200',
tweet: "Being your full authentic self is a life hack. \n The ones who don't vibe with you will naturally be repulsed, and the ones who do vibe with you will naturally be drawn to you. \n Saves a LOT of time and heartache.",
date: 7/31/2022
},
This is my function that renders the text.
Could not format properly so I used an image instead.
you need to add styles
whiteSpace: 'pre-line'
I have a a complex theme object, everything is typed in typescript.
I have an object, lets say:
that's much larger and complex then this:
const themeObj = {
colors: {
red1: "#asd123",
//... etc
},
sizes: {
size1: "10px",
size2: "11px",
size3: "14px",
}
}
the ts works fine, in which I can use the theme object and it will show me on hover:
fontSize: theme.sizes.size3; //can auto complete, and shows me all sizes
except the main issue I have with this is it only show that the size (i.e. size3) is a string
like so:
(property) size3: string
It would be extremely valuable if I could add more information to this hover, such as the actual value of the string (14px). I could use this sort of detailed feature in multiple places. I have a very difficult time googling this as well.
Is this IDE dependant? I use vscode.
Since you say you're using TypeScript, you can simply change the themeObj to be typed as const, and then its values won't be widened to string.
try this one:
fontSize: {theme.sizes.size3};
it may work
This may seem like a bit of a newbie question, but I’ve just started a new job and am trying to understand more about and roughly how the following javascript code works:
app.placementOptions["cycleslideshow"] = {
".cycle-slideshow" : {
speed: 500
, timeout: 8000
, fx: "fade"
, pager: ".decoration-right"
},
".regen-slideshow .cycle-slideshow" : {
speed: 800
, timeout: 12000
, fx: "scrollHorz"
, pager: ".decoration-right"
}
};
Note that this above code apparently styles the slideshow buttons to be the small circles at the bottom right of the area above the fold on this site: https://www.ccht.org.uk
And the full JS for that is here: https://www.ccht.org.uk/js/plugins.js
Can someone explain what the snippet code roughly does? What is it? Is it JavaScript OOP with key value pairs? Can someone link to an article to help me read up about it? My employer may use BX Slider: https://bxslider.com
I was told that this part of the code is key: pager: ".decoration-right" - the company uses the LESS CSS preprocessor if that makes a difference.
And is Stack Overflow the right place to put this kind of question that has no actual solution (not that I won't accept any answer)? Hopefully it won't get closed as being broad. Thanks for any advice here.
I haven't looked at your full code yet, but this code is essentially just setting the cycleslideshow property of the placementOptions object (which is itself a property of the app object) to be equal to everything to the right of the = sign.
So basically, you have an object app which could be intialized like this:
const app = {
placementOptions: {}
}
Then with the snippet above, you're creating a new key on the placementOptions object, which could have also just been written as app.placementOptions.cycleslideshow in this case (in other words, the bracket notation wasn't needed).
The cycle slideshow object has two keys, which are both JavaScript objects representing collections of CSS rules, so this object is likely referenced when styling some DOM element, as you said, and can easily be accessed by the class names. In this case, wrapping the property names in quotes is required, because valid property names can't begin with . or have spaces in them unless they're wrapped as strings like this.
The pager line may have particular significance to the CSS, but has no particular JavaScript significance. Each of these CSS properties are just keys on their respective objects.
The following code is equivalent to your original snippet (not taking into account any additional keys/values that app or placementOptions may have:
const app = {
placementOptions: {
cylceslideshow: {}
}
}
app.placementOptions.cycleslideshow['.cycle-slideshow'] = {
speed: 500
, timeout: 8000
, fx: "fade"
, pager: ".decoration-right"
};
app.placementOptions.cycleslideshow['.regen-slideshow .cycle-slideshow'] = {
speed: 800
, timeout: 12000
, fx: "scrollHorz"
, pager: ".decoration-right"
};
Note that in this case, where bracket notation is used, it is required, for the same reason I mentioned above. You wouldn't neccessarily write the code this way, the way it is written is already fine, but this is just breaking it down into smaller parts for you and showing you they're the same.
In either case, you could access the object like this:
console.log(app.placementOptions.cycleslideshow['.cycle-slideshow']);
// logs:
/*
{
speed: 500,
timeout: 8000,
fx: "fade",
pager: ".decoration-right"
}
*/
Or access part of the object:
console.log(app.placementOptions.cycleslideshow['.cycle-slideshow'].speed);
// logs: 500
Overall the question is a bit broad, but hopefully this helps.
EDIT: not sure how beginner or basic you're looking for, but here's an article that goes over some of the basics about working with JS Objects: https://medium.freecodecamp.org/lets-explore-objects-in-javascript-4a4ad76af798.
freeCodeCamp itself has plenty of beginner resources (articles, challenges, videos, etc.) for learning JS.
The snippet you have provided seems to be simply specifying the configurations for the classes in the HTML, such as ".cycle-slideshow" and ".regen-slideshow .cycle-slideshow".
I'm not sure what the plugin code is doing exactly behind the scenes, but those configuration values specified in the snippet will be read by the plugin by the key "cycleslideshow". The value is the collection of settings specified. This is using the JavaScript object format, similar to JSON.
To find out exactly what each entry from the configuration mean and what the expected values are, you can search their github page since it seems to be open source.
I'm trying to figure out why when adding a data-attribute to (Let's say an image) requires the attribute name to be put into quotes. I know that it needs to be done, but if a student asked me I wouldn't have the exact answer why. So take the two examples below.
1.) I'm looking for an explanation why the dash is a problem.
2.) Is there a way to escape it so you don't need to put it in quotes?
This Doesn't work:
$("img").attr({
alt: "a picture of my cat",
data-item : "pet",
data-color : "orange",
});
This Does work
$("img").attr({
alt: "a picture of my cat",
'data-item' : "pet",
'data-color' : "orange",
});
3.) The arguments that are passed to the attr() method is an object literal right?
4.) Is this just a rule in object literal syntax that a dash is not allowed?
1.) In object literals, the - symbol is not allowed as an identifier because it is also the minus operator in javascript.
2.) no, you have to use quotes.
3.) yes.
4.) yes, see 1.
I agree with #Ferdi265.
However one additional point I would make is to use jQuery.data().
jQuery.data() doesn't actually update the DOM, it updates a javascript object referencing the element and stores the value there.
It's much better for performance as no DOM manipulation is required.
$("img").attr({
alt: "a picture of my cat"
}).data({
item: "pet",
color: "orange"
});
Obviously this doesn't update your element's attributes, and therefore any future reference to these values will have to be done with jQuery.data();
$("img").data("item");
If you're interested in understanding how this works under-the-hood I wrote an article on it a while back:
http://curtistimson.co.uk/jquery/understanding-jquery-data-storage/
this is how I worked around it:
.attr({ style: "font-size : 50px;background-color : powderblue;font-family:arial" })
as a specific example of how to specify multiple attributes in an element creation statement. This is after the above examples did not work.
I am using Jquery autocomplete with local array of size ~5000, every word is ~10 chars.
I am initializing the object like this:
.autocomplete({matchContains: true, minLength: 3, delay: 700, source: array1, max: 10, highlight: true })
The problem is, that when I start to type, it takes a lot of time (sometime crashes the browser) until the result is displayed.
What can I do?
Thanks
You could use AJAX to fetch the array instead of putting it into the HTML, increase the delay and the required minLength before querying the server in order to reduce the matches.
I would do like Darin Dimitrov said, but I would also do a .Take(10) (or some arbitrary number that sounds good to you) in a quick linq statement on the server side. This would lessen the result set and would still become more accurate as the user continues to type.
Are you using the standard jQuery autocomplete plugin? If so, I'm unfamiliar with the option parameter "source" that you used.
The proper syntax for that plugin is: autocomplete( url or data, [options] ). It sounds like your version works with the 'source' option parameter,(although while crashing the browser) so I'm confused. If the browser is crashing, I'd expect the problem to be related to the javascript.
I recommend trying:
$('whatever').autocomplete(array1,{
matchContains: true,
minLength: 3,
delay: 700,
max: 10,
highlight: true
});