Use key as ID to write text to paragraph - javascript

I am trying to do a each loop and generate the class names to write the text stored in the array dynamically instead of doing them one by one. Nothing seems to write to the paragraphs though?
var user = {};
user['fname'] = 'Hello';
user['lname'] = 'World';
$.each(user, function(key, value) {
$('p').hasClass(key).text(value);
});

.hasClass() returns a boolean. It returns whether any of the elements in the collection have that class.
What you want to do is create a selector that searches for that class. Something like this:
$('p').filter('.'+key).text(value);
Or even this:
$('p.'+key).text(value);

Related

JSON.stringify gives something completely different

var tempid = document.getElementById("TDID1");
Using alert(JSON.stringify(tempid)) Gives
{"jQuery3600419938127216425761":{"events":{"click":[{"type":"click","origType":"click","data":null,"guid":14,"namespace":""}]}}}
When all i want it to give is a variable typeof sting with document.getElementById("TDID1")
JSON.stringify creates a string for the value you give it. When that value is an object, the string is JSON describing all of the own, enumerable properties of the object.
In your case, the object is a DOM element, and one on which jQuery has been used at some point.
When all i want it to give is a variable typeof sting with document.getElementById("TDID1")
If I understand you correctly, that's not what JSON.stringify is for. You could write the string directly of course:
const str = 'document.getElementById("TDID1")';
...but there's no way, starting from the value returned by getElementById, to construct a string for the way you accessed that value.
Or if you want the value of that element (assuming it's an input or select element), you could get that value from .value:
const value = document.getElementById("TDID1").value;
Or if you want the text content of a non-input element:
const text = document.getElementById("TDID1").textContent;
Or if you want the inner HTML of the element:
const html = document.getElementById("TDID1").innerHTML;
Or the outer HTML of the element:
const html = document.getElementById("TDID1").outerHTML;

How can I store the output of .filter in an array or string?

How can I store the output of a filter() function in an array or string to later use in another function?
jQuery('.marca').change(function(){
var regex = new RegExp(/^2x\d$/);
if(jQuery(this).find('input').prop("checked")) {
jQuery(this).nextAll().filter(function() {
// I would like to save the output from this .filter
// function to use to make a string of classes to pass to the next function.
console.log(this.className.match(regex)); //output below
return this.className.match(regex);
})
.show();
} else {
jQuery(this).nextAll().hide();
}
});
I use the above code to check the classes of a form with checkboxes and display a "subclass" only if the previous button was checked.
I use regex and filter() to find and display the next set of classes and I want to pass the resulted classes in the next jQuery selector to avoid manually adding them.
Hope I'm making some sense. Here is a fiddle with the entire code for a better understanding - https://jsfiddle.net/srjjj/brtp8x2h/9/
I have tried to simply add the result in a variable, but it won't store the entire set of values but only the last one (.2x4).
Here is the above console.log output and I guess the reason it's not working is because this is not an array of arrays but 4 different arrays but I'm not sure what to do next and how to save all of them in a variable.
console.log output
Have you tried declaring an array outside of the filter function and then pushing values in that array?
var matched = [];
jQuery(this).nextAll().filter(function () {
matched.push(yourFilteredElement);
});

Quick Javascript thought about document.getElementByClassName for fixing error

Quick JS question :
if you do something like :
var text = document.getElementByClassName("grid3").innerText;
what is the best way if you have multiple elements with that class?
what is the best way if you have multiple elements with that class?
It depends which element you want to reference... your example will always fail because that method returns a NodeList regardless of the number of elements. Note that it's getElementsByClassName (plural "elements").
If you want to get the first:
var text = document.getElementsByClassName("grid3")[0].innerText;
If you want to get them all (in an array):
var allText = [].map.call(document.getElementsByClassName("grid3"), function (elem) {
return elem.innerText;
});
Its document.getElementsByClassName("grid3") with s...you will always get back an array of Objects. Therefore innerText will not work there.
You could get the innerText of single elements in this array like this:
var el = document.getElementsByClassName("grid3");
var text = el[0].innerText;
Or if you have just one element with that class, give it a id and use
var el = document.getElementById("yourelementsid");
Here is a fiddle that shows how it works and not works:
Fiddle
There is no method document.getElementByClassName, you lost "s".
document.getElementsByClassName always returns an array (or array-like object), so you have to loop througt this array to find what you want.
document.getElementByClassName() return a list of elements so you can use it as array.
var textArr = document.getElementByClassName("grid3");
for(var i = 0; i< textArr.length; i++){
// here is your text
var text = textArr[i].innerText;
}

Select all HTML ID's as a jQuery Object

Is it possible with jQuery to select all "IDS" of a specific block at the same time? I know that you can specify for example $('div') but I would like to select the ID's in my object. Is there an easy way to do this in jQuery? Something like:
$object = $('.wrapper');
$object.find(function(){
//GET ALL THE IDS..somehow?!
});
I'm a little curious of its purpose, but you could try this:
var ids = $('[id]', $object).map(function() {
return this.id;
});
It uses $object to provide the context for your selector, finds all elements within said context that have an id attribute, and then builds an array of the id values.
FYI, the resulting ids variable is a jQuery array-like object. If you just want a plain JS array, add a .get() after the map function:
var ids = $('[id]', $object).map(function() {
return this.id;
}).get();
// ^
jsFiddle Demo
$object.find('[id]').each(function(){
//this.id is your man
});

Search for a string in a list of strings

I have a list of strings & I want to check that a specific string is not found in it.
I use javascript, so I was wondering if a Trie or binary search method would be better. Is there something pre-implemented that can be used for something like this ?
Here is the object :
var TheObject = { "TheItemId": Index, "TheItemText": NewItem };
I have a list of this objects, when I insert a new Item, I want to be sure "TheItemText" doesn't contain any similar texts.
JavaScript objects can be treated as hash-maps. So you would keep an object var strings = {}. Whenever you add object to the list, you would also add property to the strings object: strings[text] = true. Then you can easily check whether the text has been added before with if (strings[text]) {. Downside of this solution is that you must track changes in two collections (your list and strings). Maybe you do not need list at all, then you can use strings[NewItem] = { 'TheItemId': Index, 'TheItemText': NewItem }. Changes to 'TheItemText' and the property name must be still coordinated.
Wouldn't something like this work?
typeof TheList.TheItemText === 'undefined'

Categories