This question relates directly to Highcharts, but is really more pertinent to general JavaScript and loops.
My code is as follows:
load:function(){
var series0 = this.series[0];
var series1 = this.series[1];
setTimeout(function(){
series0.addPoint(myjson.list[0].value);
series1.addPoint(myjson.list[1].value);
}, 1000);
}
I wanted to first show an example of code that works. With Highcharts, this code gathers the designated indexes from my JSON lists and appends them to my existing chart.
When attempting a for loop to perform the same action however I end up bungling it.
My for loop attempt:
var update = [];
for (i = 0; i < myjson.list.length; i++){
update[i] = this.series[i];
update.addPoint(myjson.list[i].Printvalue);
}
There is clearly something wrong with my loop logic, and yet I am unable to figure out exactly what. When running this loop code I get an error of:
update.addPoint is not a function
My biggest guess is it has to do with the way I am handling the this instance.
In your example, update is a normal array because you declare it with var update = []. The normal JavaScript array does not have a function called addPoint.
I'm not sure what it should be, but it definitely doesn't have anything to do with your use of this.
If the items in this.series include addPoint, you might want to use this:
update[i].addPoint(myjson.list[i].Printvalue);
Note the [i] after update.
Related
I have a JSON response from a server, which returns me a array with 32 objects (in this case). Something like this:
[{object1},{ object2},{ object3}, etc].
Each object have some info that I use to populate an html template. For that, I just use a simple loop:
for(var i = 0; i < api_empresaListar.length; i++)
{
var item = api_empresaListar[i];
var htmls;
htmls = $('...lots of html code');
...
Then it’s just a simple matter of finding/changing the values, and append items on the DOM. Everything works fine. BUT, for some next parts of the code, I would like to access all the info from the object I used to build the html elements (I just show part of the info). So, after searching a lot, I tried to use data, like this:
var tp = htmls.find(".rl_grupo"); // the main div of each html element created in the loop
$(tp).data('key', api_empresaListar[i]); // here, I expected to just insert the object data in each created item.
But when I try it in the console, I got the object info as expected, but always from the last element in the array. Why is that happening? I believe it might be something stupid, but I can’t figure it out.
So, any ideas on how to solve this, or another method to make this work is appreciated. I made it work by setting some "display:none" placeholder html tags and populate those with the info I need later, but looks like a poor solution...
You should not set your htmls variable in the loop. I think that you crush its content every turn, that's why you only have the last item. You should do something like this:
var htmls = $('<div></div>');
for(var i = 0; i < api_empresaListar.length; i++) {
htmls.append($('...lots of html code'));
}
How about setting an index number on each element inside of your html creating code, then iterating over the $('.rl_grupo') elements, like this?
$('.rl_grupo').each(function(){
var index = $(this).data('index');
var currentData = api_empresaListar[index];
$(this).data('key', currentData);
})
how to fetch the values of all paragraph (p) at a time ..
for example below is how my inspect view looks like
"testing sample one."
"testing sample two."
and below is my code sample to extract the value of id 'run'
browser.findElement(by.css('[id=run]')).getText()
this just extract the first value or I can modify and get the second value of id.. my need is I need to get both values at one go.. in the same line of code.. could you please advise
Though missing an html-example and a bit more description of what you like to extract, I'll give it a try.
In general you could/should use element.all(by.css()), aka $$(), instead of browser.findElements, except you know exactly, why you use findElements.
Read some details about the difference here.
Then as mentioned in a comment already, there is a findElements() (see API-Doc for findElements() here), returning an array of all values, matching the criteria. Just you can't immediately use getText() on it, as you get an array of elements and getText() requires a single element (see API-Doc for getText() here). Therefore you'd need to pass it through some loop.
Without knowing enough context here a small set of ideas to pick from.
var allP = new Array();
var allPString = null; //if one long string is desired
//here I'm using now element.all() instead of browser.findElements
var allPEl = $$('p#run'); //equal to element.all(by.css('p[id=run]')); //returns array of all found elements
var allPElBrowser = browser.findElements(by.id('run')); //returns array of all found elements
var i = allPEl.length();
var j = 0;
allPEl.each().getText().then(function(text){ //getAttribute('value') instead of getText(), if getText doesn't work.
allP.push(text); //add it to Array
allPString += text+' '; //add to String with a space at the end
j++; //counter
if(i === j-1){continueTest()}; //call continuation at the end of last loop, due to asynchronous nature of 'then()'.
});
continueTest = function(){
allP.toString() //in case of comma separated list from Array is desired
// here comes the rest of your test case logic
};
Note, that I go with the assumption that you need resolved promises, so the content of your <p>'s to continue.
If you can continue just with the array of <p>-objects, which you later resolve within an expect() all you need is $$('p#id');.
If the solution doesn't work for you, let me know, what part is still missing or where problems occur.
Attempting to build a resume creator as a project for codeacademy.
I'm using a button to "save" the user's input to an array so it can later be appended into the resume.
However, I'm failing at getting the data to "save" to the array. I've looked at similar questions here on stackoverflow and I cannot for the life of me figure out what I am doing wrong.
here's my fiddle
specific code block I'm having trouble with:
$('#experiencesave').click(function(){
for (var i = 0; i < jobs; i++){
jobtitle.push = $('#jobtitle'+i).val();
}
$('#morejobs').append(jobtitle);
});
Well, .push [MDN] is a function which has to be called:
jobtitle.push($('#jobtitle'+i).val());
As an alternative solution, instead of using a for loop, you might want to use .map to collect the values:
var jobtitle = $('input[id^=jobtitle]').map(function() {
return this.value;
}).get();
I don't see a reason to give each of those input elements an ID though. Just give them a class. That makes it a bit easier to bulk-process them later. E.g. the selector could then just be $('input.jobtitle').
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript infamous Loop problem?
I am having a small issue, and it would be very nice if some of you could realize about what kind of logic is missing here, since I cannot seem to find it:
I have an array with the results of some previous operation. Let's say that the array is:
var results = [0, 1];
And then I have a bunch of code where I create some buttons, and inside a for loop I assign a different function to those buttons, depending on the position of the array. The problem is that for some reason, all the buttons created (two in this case) come out with the function assigned to the last value of the array (in this case, both would come out as one, instead of the first with 0 and the second with 1)
This is the code:
for (var i = 0; i < results.length; i++) {
var br2 = b.document.createElement("br");
var reslabel = b.document.createTextNode(Nom[results[i]].toString());
var card = document.createElement("input");
card.type = "button";
id = results[i]; // this is the problematic value.
card.onclick = newcard; // this function will use the above value.
card.value = "Show card";
divcontainer.appendChild(br2);
divcontainer.appendChild(reslabel);
divcontainer.appendChild(card);
}
As it is, this code produces as many buttons as elements in the array, each with its proper label (it retrieves labels from another array). Everything is totally fine. Then, I click the button. All the buttons should run the newcard function. That function needs the id variable, so in this case it should be:
First button: runs newcard using variable id with value 0
Second button: runs newcard using variable id with value 1
But both buttons run using id as 1... why is that?
It might be very simple, or maybe is just that in my timezone is pretty late already :-) Anyways, I would appreciate any comment. I am learning a lot around here...
Thanks!
Edit to add the definition of newcard:
function newcard() {
id = id;
var toerase = window.document.getElementById("oldcard");
toerase.innerHTML = "";
generate();
}
the function generate will generate some content using id. Nothing wrong with it, it generates the content fine, is just that id is always set to the last item in the array.
Your id is a global variable, and when the loop ends it is set to the last value on the array. When the event handler code runs and asks for the value of id, it will get that last value.
You need to create a closure to capture the current results[i] and pass it along (this is a very common pitfal, see Javascript infamous Loop problem?). Since newcard is very simple, and id is actually used in generate, you could modify generate to take the id as a parameter. Then you won't need newcard anymore, you can do this instead:
card.onclick = (function(id) {
return function() {
window.document.getElementById("oldcard").innerHTML = "";
generate(id);
};
}(results[i]));
What this does is define and immediately invoke a function that is passed the current results[i]. It returns another function, which will be your actual onclick handler. That function has access to the id parameter of the outer function (that's called a closure). On each iteration of the loop, a new closure will be created, trapping each separate id for its own use.
Before going on, a HUGE thank you to bfavaretto for explaining some scoping subtelties that totally escaped me. It seems that in addition to the problems you had, you were also suffering from scoping, which bit me while I was trying to craft an answer.
Anyway, here's an example that works. I'm using forEach, which may not be supported on some browsers. However it does get around some of the scoping nastiness that was giving you grief:
<html>
<body>
<script>
var results = [0,1];
results.forEach( function(result) {
var card = document.createElement("input");
card.type = "button";
card.onclick = function() {
newcard( result );
}
card.value = "Show card";
document.body.appendChild(card);
});
function newcard(x) {
alert(x);
}
</script>
</body>
</html>
If you decide to stick with a traditional loop, please see bfavaretto's answer.
I have an object called TruckModel which is defined earlier in my JavaScript file called milktruck.js
I'm trying to create an array of these TruckModel objects because I don't know at any given time how many TruckModel objects will be needed as players of my multiplayer game enter and exit.
I know that my current code isn't working because the model won't display when I use the teleportToThat function below.
I was able to get the model to display by declaring only one TruckModel() object in my index.html file and then using the teleportToThat
Here's my code for this, do you see any errors in how I'm doing it?
Non-working version:
var opponentTrucks = [];
for (var i = 0; i < markers.length; i++) {
opponentTrucks[i] = new TruckModel();
opponentTrucks[i].teleportToThat( lat, lng, heading );
}
Working version: (Difference being that I'm trying to have a varying amount of TruckModel objects)
Declared in index.html file:
var model;
Declared in JavaScript file:
model.teleportToThat( lat, lng, heading );
Here's the entire JavaScript file:
http://thehobbit2movie.com/milktruck.js
If you want to be able to find the objects by numeric index, you want an array, not a plain object:
var opponentTrucks = [];
What you've got will work, kind-of, but there's no reason not to use a real array if you're going to treat it like one anyway.
edit — it's still not really clear exactly what the problem is. This line here:
opponentTrucks[i].teleportToThat( lat, lng, heading );
What is that supposed to do? Where is it called from? What's the value of "i"? If you simply have that statement following the loop, then it's not going to work. If you want to have that "teleportToThat()" function called for each one in the array, then you should put the function call inside the "for" loop.
If you're only using numeric keys, you want an array, rather than an object:
var opponentTrucks = [];
for (var i = 0; i < markers.length; i++) {
opponentTrucks.push(new TruckModel());
}
This probably wouldn't stop your code actually working, but it would almost certainly be an improvement.
If there are still errors, perhaps you could say what they are :-)