Develop Reference

'Cannot read property 'split' of undefined' for array [duplicate]

I have a problem with a javascript array: "arrFinal[i] is undefined"
In my script arrFinal is dynamically generated
function fillTextareas () {
var arrFinal = [];
arrFinal[0] = [];
....
....
// Then some code that define the content of arrFinal, the length of arrFinal ( tailleArrFinal, tailleArrSubFinal)
....
....
for(i=0;i<=tailleArrFinal;i++){
for(j=0;j<tailleArrSubFinal;j++) {
$("form textarea#t" + i + "_" + j).val(arrFinal[i][j]);
}
}
}
When the function is called, a dump show me that the array arrFinal is correctly fill and the script works but i have an alert "arrFinal[i] is undefined". How can i do that without alert ?
Thanks !!

It looks like an off-by-one error in the outer loop.
It should be i < tailleArrFinal, not <=.

By looking at your loop I can see at least 2 errors: you miss "var" and ".length" (you have to test for array length!)
try to replace:
for(i=0;i<=tailleArrFinal;i++){
for(j=0;j<tailleArrSubFinal;j++) {
$("form textarea#t" + i + "_" + j).val(arrFinal[i][j]);
}
}
}
with:
for(var i=0;i<tailleArrFinal.length;i++){
for(var j=0; j<tailleArrSubFinal.length; j++) {
$("form textarea#t" + i + "_" + j).val(arrFinal[i][j]);
}
}
}

how can I append some html code using js several times

Hy guys, I have the following problem...
I need to draw in some cases (ex. when edit, save, update, etc) a defined html code (is the one at the end of the post) using js but I don't want to explicitly add the whole code every time i need it, so I'm wondering... ¿Is there a better way than adding it to a var and then .append or .html the code? instead of building the code every time I want to make it into an object oriented approach with properties and building it when needed, is there a way?
This is the code
for (var i = 1; i <= lineas; i++) {
c += "<div class='row'><section>some html for example</section></div>";
c += "<div>some other stuff</div>";
}
$('#res').append(c);
By a better way to do this... I mean... or I'm looking for, some kind of object oriented way to doit, hope you guys get it.
Regards!

If you mostly use the same formats, you can write an object that will define some commonly-used (in your judgement) helpers:
var helper = {
sectionInDiv: function(divClass, sectionText) {
var result = "<div class='" + divClass +"'><section>" + sectionText +"</section></div>";
return result;
},
divOnly: function(text) {
var result = "<div>" + text + "</div>";
return result;
},
repeat: function (n, htmlText){
var result = "";
for (var i = 1; i <= n; i++) {
result += htmlText;
}
return result;
}
...
}
and then use it:
var htmlToRepeat =
helper.sectionInDiv("row", "some example text") +
helper.divOnly("some more text");
helper.repeat(10, htmlToRepeat);

Populate a prompt with elements of an array and number them off

(Stack Overflow doesn't have a tag for 'prompt' so I have used alert as I am guessing it is similar enough to attract the right answerers.)
Hello,
I am currently making a JavaScript-based game for an assignment at university. I am usually pretty good with problem solving but have been stumped by this issue.
To explain, I have an array which names the possible armour slots the player can pick. In any order these can be picked, and each time the choice gets pushed to a second array which handles what has already been picked (and in what order) and that item gets spliced from the original array. There is a while loop which runs through until all 3 have been picked.
var armourSlotToPick = ["Head", "Chest", "Legs"],
armourSlotPicked = [],
armourLoop = 1,
indexArmour = 0;
function numInArray() {
indexArmour++;
return (indexArmour + ". " + armourSlotToPick[indexArmour - 1] + "\n");
}
function armour() {
while (armourLoop < 4) {
var armourPick = prompt("Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray));
if (armourPick == 1) {
armourSlotPicked.push(armourSlotToPick[0]);
armourSlotToPick.splice(0,1);
} else if (armourPick == 2) {
armourSlotPicked.push(armourSlotToPick[1]);
armourSlotToPick.splice(1,1);
} else if (armourPick == 3) {
armourSlotPicked.push(armourSlotToPick[2]);
armourSlotToPick.splice(2,1);
} else {
alert("Invalid choice, you suck");
break;
}
armourLoop++;
}
}
I know it probably wouldn't be possible to do the whole return in numInArray() to the prompt, but it shows some working.
Now the problem: I got it working so that each item in the array was numbered (var armourSlotToPick = ["1. Head", "2. Chest", "3. Legs"],) but as you could see, if the player chose 2, then the next time it would show "1. Head (new line) 3. Legs" and when the player chooses 3, a problem would occur, as they were really meant to choose 2. How is it possible to number the items in the array, in a prompt?
I'm possibly over thinking this but I have suffered for a few hours now.
I thank you in advance for any insight you may have,
Daniel.
EDIT: Solved.
Below is the end result, a slight variation from the edited answer from Jonathan Brooks.
var armourSlotToPick = [null, "Head", "Chest", "Legs"]
var armourSlotPicked = [null];
var armourLoop = 1;
function armour() {
while (armourLoop < 4) {
var message = "Pick an armour slot to generate an item for:\n";
for (var i = 0; i < armourSlotToPick.length; i++) {
if (armourSlotToPick[i] !== null) {
message += "" + i + ". " + armourSlotToPick[i] + "\n";
}
}
var armourPick = prompt(message);
if (armourPick > armourSlotToPick.length-1 || armourPick < 1) {
alert("Invalid choice, you suck");
} else {
var insert = armourSlotToPick.splice(armourPick, 1);
armourSlotPicked.push(insert);
}
armourLoop++;
}
armourSlotPicked.splice(0,1);
}
armour();
alert(armourSlotPicked.join("\n"));
I thank all that have contributed to this discussion and the end result, and I hope this is a good example for future problems people may have similar to this.

Check out my fiddle, I think I have a working solution.
What you really want to be using are Object Literals with your own indexing (starting from 1) - if it were me, I would create my own way to iterate over this custom indexing by adding a method to the Object's prototype, but I digress.
You're overcomplicating your code by using a while loop, and that large bulk of if statements is unnecessary: instead, all you need is some basic validation on the input and then you can just trust whatever input passes this validation. That is demonstrated here:
if ( armourPick > armourSlotToPick.length || armourPick < 1 ) {
alert("Invalid choice, you suck");
}
else {
armourSlotPicked.push( armourSlotToPick[armourPick-1] )
alert (armourSlotPicked[armourSlotPicked.length-1].value);
}
Read my code carefully, and you should get a better understanding of how to deal with certain issues.
EDIT:
As per your request, I think I have a solution that suits your needs. Basically all you have to do to have the arrays "start" at an index of 1 is to fill the zeroth element with a null value, like so:
var armourSlotToPick = [null, "Head", "Chest", "Legs"]
var armourSlotPicked = [null];
You just have to remember to take this null object into account in your code, for example:
if (armourSlotToPick[i] !== null) {
message += "" + i + "\n";
}
The indices will update automatically. See this updated fiddle for more details.

use structures / objects as content in the array, instead of just values.
the basic concept:
armourSlotPicked.push({ "key": 1, "value":armourSlotToPick[1]})
alert("value: " + armourSlotPicked[0].value)
alert("key: " + armourSlotPicked[0].key)
edit: responding to comments can take some space.
IMHO a prompt is the completely wrong tool for this, since most browsers would ask the user permission to prevent multiple popups, and since a promt can only return 1 piece of information, you can only ask for 1 thing per popup. Instead you ought to use a div element, with checkboxes for each information..
That being said it can easily be used in a promt.
The prompt is just a built in function, that takes a string as an argument (which is shown as text in the popup) and returns a string with the users input.
what does the magic for you is in fact this:
array.foreach(): The forEach() method executes a provided function once per array element.
in your case that means it calls a function that returns a string for each element in the array, and concatenates the strings.
in the old days you would have written this:
var messageText= "Pick an armour slot to generate an item for:\n"
for(var i = 1; i < armourSlotToPick.length; i++){
messageText += i + ". " + armourSlotToPick[i- 1] + "\n";
}
var armourPick = prompt(messageText);
but in this modern age, you define a printing function, and use it to generate the loop:
function numInArray() {
indexArmour++;
return (indexArmour + ". " + armourSlotToPick[indexArmour - 1] + "\n");
}
//more code before we get to where the function is used....
indexArmour = 0;
var messageText = "Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray);
var armourPick = prompt(messageText);
or in a single line as in your code:
indexArmour = 0; //you forgot this - otherwise the list will only be complete once?
var armourPick = prompt("Pick an armour slot to generate an item for:\n" + armourSlotToPick.forEach(numInArray));
It produces the same output, because it does the same thing, its just written very differently!
If the array holds "object literals" instead of simply values, as I suggest, the old fashioned code would look something like this:
function contains(a, value) {
try{
for (var i = 0; i < a.length; i++) {
if (a[i].value == value) {
return true;
}
}
}
catch(err) {
// do nothing
};
return false;
}
and later..
for(var j = 0; j < 4; j++){
for(var i = 0; i < Math.min(armourSlotToPick.length); i++){
if( contains(armourSlotPicked, armourSlotToPick[i- 1]) )
continue;
var messageText = "Generate an item for armour in slot: " + i + "\n"
messageText += armourSlotToPick[i- 1] + "\n";
}
var armourPick = prompt(messageText);
if (armourPick > 0 && armourPick < armourSlotToPick.length) {
armourSlotPicked.push({"key":j, "value":armourSlotToPick[armourPick]);
}
...
}
//now we have an array that holds information about when what was picked..
or something along those lines.. this is bt.w completely untested, it's just for illustration

You want to use the array index to number your items. Since your numbers are one-based and the index is zero-based, you will need to convert between the two when outputting and interpreting the response.
This approach will also allow you to eliminate all but two of the cases in your if-else statement.

Javascript Error: Cannot Convert Object to Primitive Value

I'm receiving this error using the following javascript code:
function tempTest(evt) {
alert(evt.currentTarget.id);
ct = document.getElementById(evt.currentTarget.id);
rslt = document.getElementById('rslt');
var props;
for (var prop in ct) {
if (ct.hasOwnProperty(prop)) {
propVal = ct[prop];
var propDat = prop + ' = ' + propVal;
props += propDat + '<br/>';
}
}
rslt.innerHTML = props;
}
This one has me puzzled. Any ideas?

Not all the properties of a HTML element are primitives. for example, parent, childs etc are also HTML elements. You can't just use them as strings or numbers.
You need to add there a condition and use that property accordingly.

If the object in question is json, you can call JSON.stringify(thingThatIsJson) which will return a String. .toString() does not work on json.
This is a message to those of you dealing with something like req.body which will work in console.log() which is rather confusing since it may not otherwise behave like a String (like when you're trying to add it to another String).

(The OP:)
Just wanted to post the updated snippet for anyone who stumbles onto this post...
function tempTest(evt) {
alert(evt.currentTarget.id);
ct = document.getElementById(evt.currentTarget.id);
rslt = document.getElementById('rslt');
var props;
for (var prop in ct) {
if (ct.hasOwnProperty(prop)) {
var propVal = ct[prop];
props += prop + ' (' + typeof(prop) + ')' + ' = ';
if (typeof(ct[prop]) == 'string') {
propVal += ct[prop];
} else {
if (propVal != null && propVal.toString) {
props += propVal.toString();
} else {}
}
props += '<br/>';
}
}
rslt.innerHTML = props;
}

The problem lies with the propVal part of your code. Since that may not be converted into a string.

Way to check a bunch of parameters if they are set or not in JavaScript

So, this happens to me quite frequently, but here's my latest one:
var generic_error = function(title,msg){
if(!title){ title= 'Oops!'; }
if(!msg) { msg = 'Something must have gone wrong, but no worries we\'re working on it!'; }
$.fancybox(
{
content:'\
<div class="error_alert">\
<h2>'+title+'</h2>\
<p>'+msg+'\
</div>'
});
}
Is there a cleaner way to check all params like title and msg above and OR set them as optional OR define defaults in the function like how PHP does it for example? Sometimes i could have 10 options and if(!var){var='defaults'} x 10 is icky...

Slightly shorter but equivalent to what you're doing now is to use "||" AKA "or" AKA "the default operator".
title = title || 'Oops!';
msg = msg || 'Something must have gone wrong, but no worries we\'re working on it!';

I doubt you'll find anything considerably shorter and simpler than if(!title)title='DefaultTitle' for function arguments.
However, I'd even use the longer form to make it more explicit: if (title===null) title='DefaultTitle'.
Here is a related question with an answer, but I think it would just makes your code more complicated. How can I access local scope dynamically in javascript?

You could use ternary notation as recommended by this article but in a simpler form:
var n = null;
!title ? title = 'Oops' : n;
You've also got the arguments[] array which holds the arguments and could be used in a loop, something like this:
function test(one,two,three) {
i=0;
while(typeof(arguments[i]) != 'undefined') {
alert(arguments[i++]);
}
}
test(40,27,399);

switch (arguments.length) {
case 0: title = 'Oops';
case 1: message = 'Something must have gone wrong...';
}

Here's another approach. The argsOK function is a little complex, but calling it is easy.
//-----------------------------------------------------
/*
PURPOSE Ensures a function received all required arguments, no extra
arguments & (if so specified) no arguments are empty.
RETURNS True if the arguments validate, else false.
*/
function argsOk(
functionCallee , // Caller's callee object
allArgsRequired , // True = All arguments are required
emptyArgsAllowed // True = Empty arguments are allowed
){
var ok = true;
for (var i = 0; i < 1; ++i) {
var functionName = functionCallee.toString().split(' ')[1].split('(')[0];
var args = functionCallee.arguments;
var expectedArgCount = functionCallee.length;
var actualArgCount = args.length;
if ((allArgsRequired && actualArgCount < expectedArgCount) ||
(actualArgCount > expectedArgCount)) {
error("Function " + functionName + " expected " + expectedArgCount + " arguments, but received " + actualArgCount + ".");
ok = false;
break;
}
if (emptyArgsAllowed) {
break;
}
for (var j = 0; j < args.length; ++j) {
if (args[j] != null && args[j].length == 0) {
error("Function " + functionName + "() received an empty argument.");
ok = false;
break;
}
}
}
return ok;
}
Example of calling it (a one-liner, as you can see):
//------------------------------------------------
function image(item, name, better)
// PURPOSE Write a request for picture or photo
// ENTRY Init() has been called
{
if (!showingShortVersion()) {
var betterString = '';
if (better != null && better == true)
betterString = 'better ';
if (argsOk(arguments.callee, true, false))
write('<p class="request maintain">If you have ac­cess to a ' + betterString + item + ' of ' + name + ' that we could put on­line, please click here.</p>');
}
}

In general, especially in Javascript, clean != short.
Do not use if(!title){ title= 'Oops!'; } as a general solution, because e.g. 0 and empty string are falsy, too. Arguments that are not set, are undefined, so I prefer using
if (title === undefined) {
title= 'Oops!';
}
It may be more wordy to do so, but It will prevent unwanted side effects, and in my experience, Javascript generates a lot of unwanted side effects, if you try to use shortcuts.