We Keep Coding

Javascript - var being used in another var?

why do some people store a var within another var?
For example:
var checked = $("#filterControls :checkbox:checked");
var arr = checked
A more expansive view of the code below.
var checked = $("#filterControls :checkbox:checked");
if (checked.length) {
rows.hide(200);
var arr = checked
.map(function() {
return "." + $(this).val();
})
.get();
var selector = arr.join("");
$(selector).show(200);
}

You got a wrong idea about the map function. The map function is immutable, but it returns the modified entries. Because of that you have to assign it to a new value. So checked has the unmodifed values and arr has the values which were modified by map-function.

Cannot read property push of undefined while trying to push field value

Currently code is as given below,
var child_tids = [];
$('.term-selection').each(function(index){
var field = $(this).attr('field');
child_tids.push($(this).val());
});
I need to segregate it based on the attribute 'field'
So I tried the below
var child_tids = [];
$('.term-selection').each(function(index){
var field = $(this).attr('field');
child_tids[field].push($(this).val());
});
But it gives me the error in console "Cannot Read property push of undefined, how can I implement it?

child_tids would need to be an object, and then create an array for each field you can try:
var child_tids = {};
$('.term-selection').each(function(index){
var field = $(this).attr('field');
if (!child_tids[field]) child_tids[field] = [];
child_tids[field].push($(this).val());
});

What you need is an object and not an array. Use something like:
var child_tids = {};
$('.term-selection').each(function(index) {
var field = $(this).attr('field');
if (typeof child_tids[field] != "object") child_tids[field] = [];
child_tids[field].push($(this).val());
});

store the localstorage value in the form of json

Hi I am trying to save some input[type="text"] and input[type="hidden"] values in local storage. Below is the JS:
$('.proceed_btn').on('click', function(){
$('input[type="text"]').each(function(){
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
$('input[type="hidden"]').each(function(){
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
});
The value are getting stored perfectly. But I want to store these value in json format. But how to save both these values in one variable. For example:
order: {
id: '',
product: '',
service: '',
name: ''
}
I have checked the JSON stringify but how to implement with different types of input together

Simply build an object and then stringify it. For instance, if I assume the name of your input elements is the name you want to use on your object:
$('.proceed_btn').on('click', function(){
// Blank to start with
var order = {};
// Loop through all inputs...
$('input[type="text"], input[type="text"]').each(function(){
// ...adding their values as properties
order[this.name] = this.value;
});
// Store that object in JSON format
localStorage.setItem("order", JSON.stringify(order));
});
Later if you want to retrieve it and set the inputs based on its values:
var order = JSON.parse(localStorage.getItem("order") || "null");
if (order) {
$('input[type="text"], input[type="text"]').each(function(){
if (this.name in order) {
this.value = order[this.name];
} else {
this.value = "";
}
});
}

There are only 2 parameters will be there while writing localstorage:
ex.
localStorage.setItem( 'car', car );
1st parameter is key actually and 2nd parameter is value;
You have passed 3 paramters which is wrong.
If you can to store multiple values in localstorage, create object of that values and write that object to localstorage:
ex.
var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem('car', JSON.stringify(car));
console.log( JSON.parse( localStorage.getItem( 'car' ) ) );

I think this will help.
var objectToSave = {};
$('.proceed_btn').on('click', function(){
$('input[type="text"],input[type="hidden"]').each(function(){
var elem = $(this);
var id = elem.attr('id');
var value = elem.val();
objectToSave[id] = value;
});
localStorage.setItem('order', JSON.stringify(objectToSave));
});

Empy array values are created when adding to array

I have the below code:
var changes = new Array();
$(".item_prices").on("blur", function(){
var item_id = $(this).attr("id");
var item_price = $(this).html();
changes[item_id] = item_price;
});
Every time a new value is entered, I want to save the item's ID as the key and its price as the value. If I save items with IDs 4 and 6 and prices 1.99 and 2.99, respectively, I get the following array:
{,,,,1.99,,2.99}
How do I add to the array without incurring empty values?

Use object, not Array:
var changes = {};
The rest is the same.
Key-value should always be saved in an object.
Since you're using jQuery, here is another answer to an unasked question,
Use native javascript functions when it's possible and simple, specially when it's even simpler:
var item_id = $(this).attr("id");
var item_price = $(this).html();
Can and should be:
var item_id = this.id
var item_price = this.innerHTML;

You don't want an array, a simple object will form a collection of key value pairs for you:
var changes = {};
If / when the time comes to enumerate these changes:
for (var name in changes) {
if (changes.hasOwnProperty(name)) {
var value = changes[name];
...
}
}

Arrays are a special case of objects, whose elements have consecutive integer keys. You don't have consecutive keys, so Array is "filling the gaps" for you.
Use a barebones Object instead:
var changes = {};

Get value from dynamically created checkboxes if checked

I made few checkboxes along with a button which on submit calls a function where I want to get all the values of checkboxes which have been checked.
Code for creating those checkboxes is:
for (var loop=0; loop < count; loop++)
{
var chap = document.createElement("input");
chap.type = "checkbox";
chap.value = nearby[loop];
chap.id = nearby[loop];
document.getElementById("mapdisplay").appendChild(chap);
var nearo = nearby[loop];
var s = document.getElementById("mapdisplay");
var text = document.createTextNode(nearby[loop]);
s.appendChild(text);
var br = document.createElement('br');
s.appendChild(br);
}
Now I want to retrieve the values which are checked. I am trying this (but to no available)
function fsearch()
{
var p = x;
var narr = new Array();
narr=nearby;//a global arr
var checked_vals = new Array();
$('#mapdisplay input:checkbox:checked').foreach()
{
checked_vals.push(this.value);
}
Please suggest something to retrieve the checked values id of generated values are in array form. I can not use $("#nearby[0]").val().

var checkedCheckBoxesValueArray = $('#mapdisplay input:checkbox:checked').map(
function(){
return this.value;
}).get();

Correct syntax would be:
$('#mapdisplay input:checkbox:checked').each(function(index) {
checked_vals.push($(this).val());
});
Live test case: http://jsfiddle.net/e6Sr3/