I am more familiar with PHP than with JQuery and kind of stuck on arrays. I have read just about all the posts on the forum on this subject but can't get it to work.
I have what I believe to be an array.
Something that would look like this in php
myArr = ['option-4' => '3','option-1' => '8', 'option-3' => '0' ];
In JQuery I can retrieve the values by use of the command
var x = myArr['option-1'];
This all works fine but what I need to do is make a string of the values. So I need to loop through the elements and add the value of the element to the string. The problem is the loop.
When I check the length of the array
alert("Elements in array "+myArr.length);
it always returns zero.
When I try something like
$.each(myArr , function(i, val) {
alert(myArr[i]);
});
Nothing shows.
I am missing something obviously, my PHP knowledge must be blocking things.
Can anyone please help?
That is not a valid JavaScript array. You want to use an object:
var myArr = {'option-4': '3', 'option-1': '8', 'option-3': '0' };
You can then iterate over all keys using a for .. in:
for (var key in myArr) {
alert(myArr[key]);
}
This is equivalent to a associative array in PHP. Note that you need to use the explicit key to access an element, you cannot use an index, eg myArr[0].
If you want to use jQuery:
$.each(myArr , function(key, val) {
alert(key + ": " + val);
});
Related
Hello guys I'm trying to make a array in javascript like I can make in php. In php i can make a array like this and then insert in whatever index I like
$p = array();
$p["abcd"] = "James";
Now I want this functionality in js. Is it possible to do it in js
I have done something like this but this is throwing me an error
$.each( $('table[data-step-id=' + step_id +'] input[name^=actions]') , function(key , value){
debugger;
steps_actions_dates_assign[key]["action"].push(value.val());
});
this is the error
Uncaught TypeError: Cannot set property 'action' of undefined
MY QUESTION IS NOT A DUPLICATE
I'm not trying to access a php array in javascript but I'm trying to make a array in javascript like php(the way we do not have to worry about indexes the same way I should be able to add any index I want)
THIS IS ALL OF THE CODE
var steps_actions_dates_assign = new Array();
$.each($('.steps-table') , function (key , value){
debugger;
step_id = value.children[0].value;
steps_actions_dates_assign[key]["action"] = new Array();
$.each( $('table[data-step-id=' + step_id +'] input[name^=actions]') , function(key , value){
debugger;
steps_actions_dates_assign[key]["action"].push(value.val());
});
});
JavaScript arrays are designed for numeric indexes and hold ordered data.
Use objects to store properties with arbitrary names.
var p = {};
p["abcd"] = "James";
In JS, an array is a kind of object so it is possible to store arbitrary properties on it, but you will run into problems when you attempt to iterate over the array or pass it to functions such as JSON.stringify.
If you are using ES6 than Maps are another option.
I’m wondering how to solve a matching/lookup problem and I “think” a multi-dimensional array is the solution. In short, I want to match a list of comma separated SKUs stored as a cookie value against a finite list of SKUs with matching product names and print out the matched product names onto the page. I’m not sure if this is the best way to do this, but with what I have so far I’m not clear how to properly breakup the comma separated strings from the cookie (right now it’s trying to match the entire cookie value), match them to the matrix (17 total rows) and then print out the Product Name.
<script>
var staticList = [
[“1234”, “Chocolate Ice Cream”],
[“1235”, “Peanut Butter Cookie”],
[“6G2Y”, “Raspberry Jell-O”],
[“YY23”, “Vanilla Wafers”]
];
var cookieSkus = [‘1235,YY23’]; // comma separated value from cookie
jQuery(function () {
for (var i = 0; i < staticList.length; i++) {
if (cookieSkus.indexOf(staticList [i][0]) > -1) {
jQuery('#pdisplay).append(staticList [i] [1] + '<br />');
}
}
});
</script>
<p id=”pdisplay”></p>
In this example, the paragraph "pdisplay" would contain:
Peanut Butter Cookie
Vanilla Wafers
Is there a way to correct what I have above or is there a better method of accomplishing what I’m trying to do?
First, you might want to focus on the Cookie SKUs rather than the staticList. The reason for this is that the cookie may have a variable number, and may be as small as 0 elements. (After all, we don't need to list the items if there are no items).
This may be accomplished simply by converting the string to an array and then checking if the SKU is in the staticList. Unfortunately, since you are using a multidimensional array, this would require going through the staticList for each cookie sku. Using just this suggestion, here is a basic example and fiddle:
Rewrite: Accounting for the fact that staticList is an Array of Arrays
jQuery(function() {
var skus = cookieSkus[0].split(',');
for (var i = 0; i < skus.length; i++) {
for (var j = 0; j < staticList.length; j++) {
if (staticList[j][0] == skus[i]) {
jQuery('#pdisplay').append(staticList[j][2] + '<br/>');
break; // Will end inner if the item is found... Saves a lot of extra time.
}
}
}
});
Edit 2: Using an Object (A possibly better approach)
According to the comments, you must support IE8. In this case, you might consider an Object instead of a multi-dimensional array. The reasons for this are as follows:
An object is actually an associative array (with a few perks).
You can directly check for property existence without having any nested arrays.
Object property access is typically faster than looping through an array
You can access object properties nearly exactly like accessing an array's elements.
When using an Object, the original version of my code may be used without modification. This is because the object's structure is simpler. Here is a fiddle for you: option 2
var staticList = {
"1234": "Chocolate Ice Cream",
"1235": "Peanut Butter Cookie",
"6G2Y": "Raspberry Jell-O",
"YY23": "Vanilla Wafers"
};
jQuery(function() {
var skus = cookieSkus[0].split(',');
for (var i = 0; i < skus.length; i++) {
if (staticList[skus[i]])
jQuery('#pdisplay').append(staticList[skus[i]] + '<br/>');
}
});
Responding to your comment:
The reason that the output matches what is desired is because unlike an array which has numerical indices, the object's indices are the actual skus. So, there is no staticList[0] if staticList is an object. Instead (in the context of the staticList object), 1234 = "Chocolate Ice Cream". So, an object definition basically goes as follows:
var objectName = {
index1: value1,
index2: value2,
...,
...
}
The index may be any primitive value (integer or string). The value may be any valid javascript value including a function or an inner object. Now, to get the value at a specific index, you may do either:
objectName.index1 (no quotes)
OR:
objectName["index1"] (quotes needed if the index is a string)
The result of either of those will be:
value1
It's as simple as that.
I would try something like this:
var cookieSkus = cookieSkus[0].split(',');
staticList.filter(function(cell){
return cookieSkus.some(function(val){return cell[0] === val; });
}).map(function(cell){
jQuery('#pdisplay).append(cell[1] + '<br />');
});
Disclaimer: provided based on the sample code provided above along with recent comments
I know there are a lot of questions about this, but I can't find the solution to my problem and have been on it for a while now. I have two sets of input fields with the same name, one for product codes, and one for product names. These input fields can be taken away and added to the DOM by the user so there can be multiple:
Here is what I have so far, although this saves it so there all the codes are in one array, and all the names in another:
var updatedContent = [];
var varCode = {};
var varName = {};
$('.productVariationWrap.edit input[name="varVariationCode[]"]')
.each(function(i, vali){
varCode[i] = $(this).val();
});
$('.productVariationWrap.edit input[name="varVariationName[]"]')
.each(function(i1, vali1){
varName[i1] = $(this).val();
});
updatedContent.push(varCode);
updatedContent.push(varName);
I am trying to get it so the name and code go into the same array. i.e. the code is the key of the K = V pair?
Basically so I can loop through a final array and have the code and associated name easily accessible.
I can do this in PHP quite easily but no luck in javascript.
EDIT
I want the array to look like:
[
[code1, name1],
[code2, name2],
[code3, name3]
];
So after I can do a loop and for each of the arrays inside the master array, I can do something with the key (code1 for example) and the associated value (name1 for example). Does this make sense? Its kind of like a multi-dimensional array, although some people may argue against the validity of that statement when it comes to Javascript.
I think it's better for you to create an object that way you can access the key/value pairs later without having to loop if you don't want to:
var $codes = $('.productVariationWrap.edit input[name="varVariationCode[]"]'),
$names = $('.productVariationWrap.edit input[name="varVariationName[]"]'),
updatedContent = {};
for (var i = 0, il = $codes.length; i < il; i++) {
updatedContent[$codes.get(i).value] = $names.get(i).value;
}
Now for example, updatedContent.code1 == name1, and you can loop through the object if you want:
for (var k in updatedContent) {
// k == code
// updatedContent[k] == name
}
Using two loops is probably not optimal. It would be better to use a single loop that collected all the items, whether code or name, and then assembled them together.
Another issue: your selectors look a little funny to me. You said that there can be multiple of these controls in the page, but it is not correct for controls to have duplicate names unless they are mutually exclusive radio buttons/checkboxes--unless each pair of inputs is inside its own ancestor <form>? More detail on this would help me provide a better answer.
And a note: in your code you instantiated the varCode and varName variables as objects {}, but then use them like arrays []. Is that what you intended? When I first answered you, i was distracted by the "final output should look like this array" and missed that you wanted key = value pairs in an object. If you really meant what you said about the final result being nested arrays, then, the smallest modification you could make to your code to make it work as is would look like this:
var updatedContent = [];
$('.productVariationWrap.edit input[name="varVariationCode[]"]')
.each(function(i, vali){
updatedContent[i] = [$(this).val()]; //make it an array
});
$('.productVariationWrap.edit input[name="varVariationName[]"]')
.each(function(i1, vali1){
updatedContent[i1].push($(this).val()); //push 2nd value into the array
});
But since you wanted your Code to be unique indexes into the Name values, then we need to use an object instead of an array, with the Code the key the the Name the value:
var updatedContent = {},
w = $('.productVariationWrap.edit'),
codes = w.find('input[name="varVariationCode[]"]'),
names = w.find('input[name="varVariationName[]"]');
for (var i = codes.length - 1; i >= 0; i -= 1) {
updatedContent[codes.get(i).val()] = names.get(i).val();
});
And please note that this will produce an object, and the notation will look like this:
{
'code1': 'name1',
'code2': 'name2',
'code3': 'name3'
};
Now you can use the updatedContent object like so:
var code;
for (code in updatedContent) {
console.log(code, updatedContent[code]); //each code and name pair
}
Last of all, it seems a little brittle to rely on the Code and Name inputs to be returned in the separate jQuery objects in the same order. Some way to be sure you are correlating the right Code with the right Name seems important to me--even if the way you're doing it now works correctly, who's to say a future revision to the page layout wouldn't break something? I simply prefer explicit correlation instead of relying on page element order, but you may not feel the need for such surety.
I don't like the way to solve it with two loops
var updatedContent = []
$('.productVariationWrap.edit').each(function(i, vali){
var $this = $(this)
, tuple = [$this.find('input[name="varVariationCode[]"]').val()
, $this.find('input[name="varVariationName[]"]').val()]
updatedContent.push(tuple)
});
I have a string that is JSON values separated by /r. It's sort of like records in a DB table. It looks like:
"{"id":"id","hole":"hole","stat":"stat","value":"value"}/r{"id":1354075540949,"hole":"1","stat":"score","value":"4"}/r{"id":1354075540949,"hole":"1","stat":"putts","value":"1"}/r{"id":1354075540949,"hole":"1","stat":"fir","value":"y"}/r{"id":1354075540949,"hole":"1","stat":"gir","value":"n"}/r"
The first row is the column names (id, hole, stat, value) and I just give them the same value. All other rows separated by /r is the actual data.
I split this string by /r, then loop through the result and push the result of JSON.parse() of each element to an array so now I have an array of objects with properties of the given structure (id, hole, stat, value). Everything is working except the 'id' field ends up being true or false instead of the big long number. Why is it doing that?
var tblData = localStorage.getItem(tblName).split("/r");
var data = new Array();
// fill the array
for (i = 1; i < tblData.length - 1; i++)
data.push(JSON.parse(tblData[i]));
[EDIT]
Seems this does work, but there is a jQuery.grep() I run right after this that's setting the id properties to true/false.
var changeRecords = jQuery.grep(data, func);
Where func is:
function (v) { return v.id == gCurrentRoundID && v.hole == gCurrentHole; }
Not sure why it would be setting id to true/false though.
[EDIT2]
Nevermind, I found my error. The function above wasn't the right one and the one I did have only had 1 equal sign for v.id = gCurrentRoundID, which is why it was setting it to true/false.
I would just manually change the whole string to valid JSON. Have it start with a [ and end with a ], then replace all those /rs with commas. The end result should look like
"[{"id":"id","hole":"hole","stat":"stat","value":"value"},{"id":1354075540949,"hole":"1","stat":"score","value":"4"},{"id":1354075540949,"hole":"1","stat":"putts","value":"1"},{"id":1354075540949,"hole":"1","stat":"fir","value":"y"},{"id":1354075540949,"hole":"1","stat":"gir","value":"n"},]"
Then parse that through JSON.parse
Just note that that last trailing comma may cause problems in IE8. If so, you should be able to manually fix that fairly easily. Something like s = s.substr(0, s.length - 2) + ']';
I'm using external library, jquery.cookies.2.2.0.min.js, and according to the documentation you get a list of all cookies like so.
jaaulde.utils.cookies.filter( /^site/ );
returns list of cookies whose names start with "site"
My code is as follows.
var all_cookies = $.cookies.filter( /^mark/ );
$('aside').html(''+all_cookies+'');
When I execute the above code though, the inner HTML of aside is [object Object]. What am I doing wrong?
This is because Jaaulde returns an object where the key is the name of the cookie and the value is the value of the cookie. So Jaaulde is returning something like this.
{ site_one: 'one',
site_two: 'two' }
You can't convert an object to a string like that. You need to iterate through each key-value pair and append those individually. Which can be done like so.
$.each(all_cookies, function(key, value) {
$('aside').append('Key: ' + key + '; Value: ' + value);
});