We Keep Coding

Can't push item into empty array

I have this function where when I click a button I loop over some divs and get the id of that div along with some checkbox inputs id's if they are marked.
To store this values I have a dictionary which is suppose to store the items like this:
{
1: [4,5],
2: [2,3]
}
The keys represent the id's of each div and the values are the checkbox items id's that are clicked.
Full code:
$(document).on('click', '.trimite-rasp', function(){
var formData = {}
$.each($('.single-question'), function(){
var listIds = [];
var qId = $(this).attr('qid');
console.log(qId);
$.each($('.form-check-input'), function(){
if($(this).is(':checked')){
var thisId = ($(this).attr('aid'));
$(listIds).push(thisId);
}
});
formData[qId] = listIds;
});
console.log(formData);
});
The only problem here is that listIds array is always empty. I can't push the values to that array, and I'm sure the checkbox id is correct because I console.log it and it's taken correctly.

It is because you are using the array as a jQuery selector
use
var thisId = $(this).attr('aid');
listIds.push(thisId);
instead of
$(listIds).push(thisId);

Try this
listIds.push(thisId);

javascript array multidimension search index

I have an array in javascript. I've been trying to search the index but it is very frustrating. There is an object inside an array, and inside the object have an array as a value.
This is what the source code looks like:
rows = [{"id":"id0","cell":["array1","array2"]},{"id":"id1","cell":["array3","array4"]}];
I've tried this:
var v = {cell:["array1","array2"]};
rows.indexOf(v)
And also have a radio button:
<input type="radio" name='array' value="array1, array2">
jQuery here:
var i = $("input:checked").val().split(',');
rows.indexOf(i)
which has an index result of -1

Try this. It's a functional approach that loops through each index in rows, and returns true if there's a match.
var rows = [{"id":"id0","cell":["array1","array2"]},{"id":"id1","cell":["array3","array4"]}];
var index = rows.findIndex(function(i) {
return JSON.stringify(i.cell) == JSON.stringify(["array1","array2"])
});
console.log(index);
The output should return 0. The reason we need to convert both objects into JSON.strings is because of how javascripts handles the equality of two objects. You can read more about it here.

How to get selected values of Kendo Multi Select?

I'm using Kendo multi select as follow but i can't get selected values
var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var itm in items)
{
selectedData.push(itm);
}
but array selectedData return indices of items in multiselect not values .

You can also assign the array, returned from the value() method, directly to the variable, e.g.:
var ms = $("#multiselect").kendoMultiSelect({
value: ["1", "2"]
}).data('kendoMultiSelect');
var selectedItems = ms.value();
console.log(selectedItems); // ["1", "2"]

Use this other one returns indices.
var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var i=0;i<items.length;i++)
{
selectedData.push(items[i]);
}

Your original code doesn't look wrong. Are you sure you are getting only indices? Perhaps you should post your MultiSelect code as well. I found this question because I had the same problem and used the other answers for reference, but I found them overcomplicated. So let me answer in another complicated way :)
Here's what I've got. I know it's more code than you need, but I think it's important to see the full picture here. First let me set this up. There's a problem with the Kendo().MultiSelect.Name("SomeName") property if you are using it more than once. "Name" sets not only the html name, but the id as well, and you never want two ids with the same identifier. So in my code, I am appending a unique Id to my MultiSelect.Name property to ensure a unique id. I am putting the MultiSelect in each row of a table of people. I am showing this to make sure you are using the DataValueField property so you are able to get the selected values (not the text you see in the ui). If you are just showing a list of text values with no id behind them, perhaps that is why you are getting the wrong data?
#foreach (var cm in Model.CaseMembers)
{
<tr>
<td>
#(Html.Kendo().MultiSelect()
.Name("IsDelegateFor" + cm.CaseMemberId)
.Placeholder("is a delegate for..")
.DataTextField("FullName")
.DataValueField("CaseMemberId")
.BindTo(Model.Attorneys)
)
</td>
</tr>
}
then, later on, in my jQuery where I attempt to extract out the DataValueField (CaseMemberId), which is the array of selected values of the MultiSelect...
var sRows = [];
$('#cmGrid tr').each(function () {
// 'this' is a tr
$tr = $(this);
// create an object that will hold my array of selected values (and other stuff)
var rec = {};
rec.IsADelegateFor = [];
// loop over all tds in current row
$('td', $tr).each(function (colIndex, col) {
if (colIndex === 3) {
// make sure our MultiSelect exists in this td
if ($(this).find("#IsDelegateFor" + rec.CaseMemberId).length) {
// it exists, so grab the array of selected ids and assign to our record array
rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();
}
}
}
// add this tr to the collection
sRows.push(rec);
}
so this is all a super verbose way of saying that this single line, as the other people mentioned works perfectly to grab the ids. There is no need to iterate over the .value() array and push the contents to another array!
rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();
So in your original code, there is no reason the following should not work,
var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData = [];
selectedData = multiselect.value();
console.log(selectedData);
unless
you don't have your MultiSelect set up properly in C# with DataValueField
you have multiple MultiSelects on the page with the exact same id and it's reading from a different one than you think.
You don't even have value fields, just a list of text.

var selected = $("#multi").data("kendoMultiSelect").value();

The solution given by volvox works.
Below is jquery version,
var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
$.each(items ,function(i,v){
selectedData.push(v);
});

Combine Strings coming from different inputs

I have some inputs with data-attributes
<form>
<input style="width: 300px" data-schrift="SchriftEins" name="input1" id="input1" /></br></br>
<input style="width: 300px" data-schrift="SchriftEins" name="input2" id="input2" /></br></br>
<input style="width: 300px" data-schrift="SchriftZwei" name="input3" id="input3" /></br></br>
</form>
and i need to combine the values of the inputs with the same data-attributes
i create an array inputs that should store the results at the end like this:
[SchriftEins: "from first input & from second input", SchriftZwei: "from third input "]
At the moment I have something like this:
var inputs = new Array();
$("form").on("keydown",function(e){
$("form :input").each(function(){
var schrift = $(this).data("schrift");
var value = $(this).val();
inputs[schrift] = value;
});
console.log(inputs);
});
this code will overwrite the value how can i fix this?
thanks alot!

Like others have mentioned, you'll probably want to use an object instead of an array. You'll also want to use keyup, and make sure you aren't appending new data to old data. Something like this should work:
JavaScript
var inputs = {};
//this should use keyup instead of key down
$("form").on("keyup",function(e){
//inputs needs to be reset, otherwise the next keyup will continue to append the values to old data
inputs = {};
$("input").each(function(i){
var schrift = $(this).data("schrift");
var value = $(this).val();
//if the property has already been set, append the next matching schrift, otherwise just set the property to the schrift
inputs[schrift] = inputs[schrift] == null ? value : inputs[schrift] + ' ' + value;
});
console.log(inputs);
});
Some notes:
Changed the array to an object, as others have also mentioned.
Changed keydown to keyup, because on keydown the character entered will not yet be available, so the inputs variable will always be one character behind what the user has entered
Reset the inputs object each time the user enters information. This prevents the loop from appending new data to the existing old data.
Added the ternary operation to append the value to an existing property, if one exists.
You can see it working here: https://jsfiddle.net/axp1nxom/2/
Hope that helps!

I think you wanted to use an object not an array there.
Try defining the variable input like this:
var inputs = {};
And you will see a result like you wanted. More on objects: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object
If you really want an array will will have to use .push to add. You can see more about arrays here https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array
Edit: Also I see that 2 inputs have the same data-schrift value "SchriftEins". This will overwrite one over the other.

You are overwriting what the value is. What you are wanting it sounds like is a dictionary type of object. Try the following if you want an array:
var inputs = new Array();
$("form").on("keydown",function(e){
$("form :input").each(function(){
var schrift = $(this).data("schrift");
var value = $(this).val();
inputs.push(value);
});
console.log(inputs);
});
Or if you want a dictionary with named keys and values:
var obj = {
key1: value1,
key2: value2
};
$("form").on("keydown",function(e){
$("form :input").each(function(){
var schrift = $(this).data("schrift");
var value = $(this).val();
obj[schrift] = value;
});
console.log(inputs);
});
Then use it like the following:
var myValue = obj[schrift];
Hopefully this helps in what you were needing.

Looping over elements in jQuery

I want to loop over the elements of an HTML form, and store the values of the <input> fields in an object. The following code doesn't work, though:
function config() {
$("#frmMain").children().map(function() {
var child = $("this");
if (child.is(":checkbox"))
this[child.attr("name")] = child.attr("checked");
if (child.is(":radio, checked"))
this[child.attr("name")] = child.val();
if (child.is(":text"))
this[child.attr("name")] = child.val();
return null;
});
Neither does the following (inspired by jobscry's answer):
function config() {
$("#frmMain").children().each(function() {
var child = $("this");
alert(child.length);
if (child.is(":checkbox")) {
this[child.attr("name")] = child.attr("checked");
}
if (child.is(":radio, checked"))
this[child.attr("name")] = child.val();
if (child.is(":text"))
this[child.attr("name")] = child.val();
});
}
The alert always shows that child.length == 0. Manually selecting the elements works:
>>> $("#frmMain").children()
Object length=42
>>> $("#frmMain").children().filter(":checkbox")
Object length=3
Any hints on how to do the loop correctly?

don't think you need quotations on this:
var child = $("this");
try:
var child = $(this);

jQuery has an excellent function for looping through a set of elements: .each()
$('#formId').children().each(
function(){
//access to form element via $(this)
}
);

Depending on what you need each child for (if you're looking to post it somewhere via AJAX) you can just do...
$("#formID").serialize()
It creates a string for you with all of the values automatically.
As for looping through objects, you can also do this.
$.each($("input, select, textarea"), function(i,v) {
var theTag = v.tagName;
var theElement = $(v);
var theValue = theElement.val();
});

I have used the following before:
var my_form = $('#form-id');
var data = {};
$('input:not([type=checkbox]), input[type=checkbox]:selected, select, textarea', my_form).each(
function() {
var name = $(this).attr('name');
var val = $(this).val();
if (!data.hasOwnProperty(name)) {
data[name] = new Array;
}
data[name].push(val);
}
);
This is just written from memory, so might contain mistakes, but this should make an object called data that contains the values for all your inputs.
Note that you have to deal with checkboxes in a special way, to avoid getting the values of unchecked checkboxes. The same is probably true of radio inputs.
Also note using arrays for storing the values, as for one input name, you might have values from several inputs (checkboxes in particular).

if you want to use the each function, it should look like this:
$('#formId').children().each(
function(){
//access to form element via $(this)
}
);
Just switch out the closing curly bracket for a close paren. Thanks for pointing it out, jobscry, you saved me some time.

for me all these didn't work. What worked for me was something really simple:
$("#formID input[type=text]").each(function() {
alert($(this).val());
});

This is the simplest way to loop through a form accessing only the form elements. Inside the each function you can check and build whatever you want. When building objects note that you will want to declare it outside of the each function.
EDIT
JSFIDDLE
The below will work
$('form[name=formName]').find('input, textarea, select').each(function() {
alert($(this).attr('name'));
});