Develop Reference

Create for loop with changing image

I haven't been able to find my specific case on here yet so I thought I'd ask. I'm trying to make a very simple Tamagotchi in Javascript for a school project. Musts are that I apply DOM manipulation, use a loop, use an array(or an object), and use a function.
My idea was to make an array with all the 'emotions' as images and then a for loop to slowly count them down. Giving the impression that the mood of the Tamagotchi gets worse as time passes.
This is the code I have so far, it's not a lot:
var imgArray = ["super.png", "blij.png", "neutraal.png", "meh.png", "verdrietig.png", "dood.png"] //Array with the images
for (var i = 0; i < imgArray.length; i++)
{
//for loop that counts down array
//Here I want a function that changes the image according to the array number
}
Sorry for the bad formatting, this is my first time on here :)
This is what I have in the body:
<h1>Tamagotchi</h1>
<button id="feed">Give food</button>
<button id="play">Entertain</button>
<button id="walk">Walk</button>
<div id="tamagotchi"></div>
I'd also then like the buttons that you see above to add points to make the Tamagotchi feel better (so in the for loop the array automatically keeps ++i but I'd like the button to --i, so subtract one point) imgArray[0] is the happiest and imageArray[5] is the saddest.
I hope this wasn't too vague, please let me know if I need to better explain anything!

Here is some draft so you can start from something. I've created a function allowing you to improve the state of the tamagoshi.
For you now :
Making a function to decrease it
Make them to be displayed as image and not strings
Make it prettier using css rules
If you get trouble with the code, Stack Overflow will help. SO is not made to write code from scratch, but to fix bug and coding issues.
// Array with the images
const imgArray = [
'super.png',
'blij.png',
'neutraal.png',
'meh.png',
'verdrietig.png',
'dood.png',
];
let tamagoshiState;
// Pointer to the div where you are going to insert the picture
const tamagoshiFeel = document.getElementById('tamagotchi');
// Function that can change the state of the tamagoshi
function setTamagoshiState(i) {
tamagoshiState = i;
tamagoshiFeel.innerHTML = imgArray[i];
}
// Change the tamagoshi state in a positive way
function improveTamagoshiState() {
// Tamagoshi can't be happier
if (tamagoshiState === 0) {
return;
}
setTamagoshiState(tamagoshiState - 1);
}
// Initialize the tamagoshi state at very sad
setTamagoshiState(imgArray.length - 1);
#tamagotchi {
margin-top: 2em;
}
<h1>Tamagotchi</h1>
<button id="feed" onclick="improveTamagoshiState()">Give food</button>
<button id="play" onclick="improveTamagoshiState()">Entertain</button>
<button id="walk" onclick="improveTamagoshiState()">Walk</button>
<!-- How the tamagochi feels -->
<div id="tamagotchi">
</div>

List created by jQuery takes a lot of time

I have a JSON array which has 9000 records and it is displayed using list li. The HTML object is created using jQuery :
$j.each(DTOList, function(index,obj) {
var $li = $j("<li/>");
var $button = $j("<button/>", { type: "button" , onClick:"location.href='playfile.html?messageId="+obj.id+"&operation=play&to="+obj.to+"&from="+obj.from+"'" });
var $parentDiv = $j("<div/>", { class: "buttonMargin" });
var $numDiv = $j("<div/>", { class: "num" ,text:obj.to});
var $nameDiv = $j("<div/>", { class: "name" ,text:obj.from});
var $timeDiv = $j("<div/>", { class: "time" , text:obj.time});
$parentDiv.append($numDiv);
$parentDiv.append($nameDiv);
$parentDiv.append($timeDiv);
$parentDiv.append($j("<hr>"));
$j("#datalist").append($li.append($button.append($parentDiv)));
});
Here is an example of li created by the above code:
<li>
<button type="button"
onclick="location.href='playfile.html?messageId=1165484222&operation=play&to=Fax Line&from=abc'">
<div class="buttonMargin">
<div class="num">Fax Line</div>
<div class="name">def</div>
<div class="time">Jan 04,2018 12:02:44 AM</div>
<hr>
</div>
</button>
<li>
The problem here is, the above code takes at least 1.5 mins to load and till then my HTML page is blank. Is there any way to improve the above code to increase performance?

Look at this performance test. Use for loop instead of .each() function.

Likely the main problem here is the DOM operation performed in this line
$j("#datalist").append($li.append($button.append($parentDiv)));
triggering document reflows over and over....
So as a first improvement try to generate all items first (without appending it into the DOM) and then append them afterwards with one single operation.
Something like this:
var elements = [];
$j.each(DTOList, function(index,obj) {
.....
elements.push($li);
});
$j("#datalist").append(elements);

Performance with jQuery .nextUntil on large DOM

I'm looking to address a performance issue I'm having with a very large DOM. In essence, this a word-processing style app inside the browser using contenteditable divs.
Suppose I have a structure like this:
<div class="header">...</div>
<div class="actor">...</div>
<div class="director">...</div>
<div class="producer">...</div>
<div class="writer">...</div>
<div class="executive">...</div>
<div class="studio">...</div>
<div class="footer">...</div>
I then have some code which ends up returning (for example):
<div class="writer">...</div>
as a jQuery object. I then need to retrieve all of this object's surrounding divs between header and footer as a selection and then further filter this list using a class e.g. 'actor'.
Currently, I have the following code, which works correctly:
// Find header
var header_object = object.prevUntil(".header").last().prev();
// Select all objects between header and footer, and then filter
var object_list = header_object.nextUntil(".footer", ".actor");
// Iterate through object_list
object_list.each(function()
{
// Run additional code on the objects
});
The only problem is that due to the app being a word processor of sorts, the DOM structure is often very large (e.g. over 5000 elements) and executing this code locks up the browser for an unacceptable amount of time (over 10 - 30 seconds).
As such, I'm looking for a way to customize the code I have to make it more efficient / improve performance.
I should also point out that the HTML structure above is not (header - 5000 elements - footer), rather it is 200 x (header - elements - footer). As such, each traversal operation is only maybe 25 elements from header to footer, but it has to run many times.
Any suggestions? Many thanks!

You could enhance performance by not using jQuery, and creating your own functions that are more specific to your use case.
function getClosest(el, klass, dir) {
while (el && (!el.classList.contains(klass))) {
el = el[dir ? 'previousElementSibling' : 'nextElementSibling'];
}
return el;
}
function getbetween(from, to, filterKlass) {
var list = [];
while(from && to && from !== to) {
if ((from = from.nextElementSibling) !== to) {
filterKlass ? (from.classList.contains(filterKlass) ? list.push(from) : Infinity) : list.push(from);
}
}
return list;
}
var object = $('.writer');
var element = object.get(0);
var header_object = getClosest(element, 'header', true);
var footer_object = getClosest(element, 'footer', false);
var object_list = getbetween(header_object, footer_object, 'actor');
object_list.forEach(function(element) {
console.log(element);
});
FIDDLE
Traversing the next element sibling directly, and checking for classes, should be much faster than using nextUntil

Searching items causes lags

I have following problem. Let's say I have DOM like this.
<div class="results">
<div class="result">
<div class="title">Aaa</div>
</div>
<div class="result filtered-out">
<div class="title">Aab</div>
</div>
<div class="result">
<div class="title">Aac</div>
</div>
<div class="result">
<div class="title">Aad</div>
</div>
<div class="result">
<div class="title">Aae</div>
</div>
</div>
and an input field like this
<input type="text" id="search">
And now I try to filter the results with a simple function defined by this
var searchBox = $(this);
searchBox.keyup(function(){
var searchBox = $(this);
var items = $(".results .result:not(.filtered-out)");
items.each(function(){
var title = $(this).find(".title").html();
if(title.toLowerCase().indexOf(searchBox.val().toLowerCase())!== -1)
$(this).show();
else
$(this).hide();
});
});
So the problem is that the list of results is quite long something between 100 and 200 elements and whenever I type something into the search input the code executes very long. Maybe around 2-3 seconds. Is there any other approach to solve this "lag"? Thank you for any advices!
EDIT Maybe something like delayed script execution or asynchronous script execution (like in ajax)?

It's generally not a good idea to use the DOM as a datasource, it's not meant for it and is therefore slow. Personally I would recommend using a small MVVM library or something similar so you don't have to manually manage the DOM yourself.
I've used Vue.js below, but you could just as well use any similar solution. Keeping your data in the code will allow you to operate on it a lot faster since you don't have to re-request it all the time and you avoid doing a lot of work for modifications. All operations below are done on 1000 objects:
var items = [];
for (var i = 0; i < 1000; i++) {
items.push({
title: 'Item #' + i
});
}
var v = new Vue({
el: '#list',
data: {
items: items,
input: ""
},
computed: {
filteredItems: function() {
var value = ("" || this.input).trim().toLowerCase();
if (!value.length) return this.items;
return this.items.filter(function(item) {
return item.title.toLowerCase().indexOf(value) !== -1;
});
}
}
});
ol {
list-style: none;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<div id="list">
<input placeholder="Search" v-model="input" />
<ol>
<li v-repeat="filteredItems">{{title}}</li>
</ol>
</div>

When searching the dom through many elements it is recommended to use javascript as opposed to jQuery if speed is what you are after. jQuery has it's purpose but for large amounts of dom searching using javascripts getElementById or querySelector / querySelectorAll is going to be much much faster. If you check this jsPerf example you can see that the jQuery selector operates roughly 94% slower than the comparable getElementById.

You should try using some logging to figure out which part is taking the longest. If you find that it's the items selector (with the psuedo-not), you could try to optimize that, however I don't see anything about the filtered-out class so I'm not sure exactly what that does.
Here's some simple optimizations though:
var searchBox = $(this);
searchBox.keyup(function(){
var $searchBox = $(this);
var searchBoxVal = $searchBox.val().toLowerCase();
var items = $(".results .result:not(.filtered-out)");
items.each(function(){
var $item = $(this);
var title = $item.find(".title").html();
if (title.toLowerCase().indexOf(searchBoxVal) !== -1)
$item.show();
else
$item.hide();
});
});

My guess the lag is because you are performing the search based on the DOM elements, and at the same time manipulating them with hiding/ showing.
I suppose the DOM is populated from some data source? If so it'll be better to perform the search/ filter from that data source, then use the filtered data set to populate the DOM again. (And even if you don't have the data source at first, you can build one by reading the original DOM)

How can I go to next item of array in Angularjs expression?

I have been trying to dynamically change the array number of my expression. My initial state:
<p class="title text-center">{{data[0].title}}</p>
<p class="subtitle text-center">{{data[0].sub_title}}</p>
Data is just an array returned from an http request. What I want is that when I click or swipe an element on the page that it jumps to the second item in the data array, e.g.:
<p class="title text-center">{{data[1].title}}</p>
<p class="subtitle text-center">{{data[1].sub_title}}</p>
I have been trying to make an expression in an expression, but I think that that is very wrong. Also, I have tried adding a variable to the $scope in the controller:
$scope.update = function (whateverispassedinfromotherfunction){
var item = whateverispassedinfromotherfunction;
return "data["+whateverispassedinfromotherfunction+"].sub_title";
}
and then this in the HTML
<p class="subtitle text-center">{{update}}</p>
but that does not make any sense to Angular and to me neither :).
Anyone that knows a solution?

Make your current index a variable, initted to 0, and increment it. You can increment either by making a function on your controller that increments it, or just directly in a ng-click / ng-swipe.
<span ng-click="idx++"> <!-- init idx to 0 in your controller -->
<p class="title text-center">{{data[idx].title}}</p>
<p class="subtitle text-center">{{data[idx].sub_title}}</p>
</span>

Dylan's answer will work, but generally when you find the need for this kind of logic, you should try to wrap it up into a more general component.
For example, we'll call it Lense, as it's just a way of viewing one value at a time, given an collection of sequential values.
app.factory('Lense', function() {
return function(values) {
var lense = {};
lense.index = 0;
lense.next = function() {
lense.index += 1;
};
lense.previous = function() {
lense.index -= 1;
};
lense.value = function() {
return values[lense.index];
};
};
});
Now you have a class which can be injected in order to create a lense which contains all of the logic for you.
You can inject it and use it anywhere you need:
function MyController($scope, Lense) {
var data = [ { ... }, { ... }, { ... } ];
$scope.lense = Lense(data);
}
Then your views become a lot more declarative:
<p class="title text-center">{{lense.value().title}}</p>
<p class="subtitle text-center">{{lense.value().sub_title}}</p>
<a ng-click='lense.previous()'>Previous</a>
<a ng-click='lense.next()'>Next</a>
Not only that, but it is a lot easier to write unit tests for factories than it is for directives, as they involve no rendering on HTML.
Finally, it will be a lot easier to debug. Say you want to print the value of the current index every time the user clicks next, you can just add it to your lense factory.
lense.next = function() {
lense.index += 1;
console.log(lense);
};
If your logic is embedded in an expression, then there's no way to do this, because console isn't a property on the current $scope.
<div ng-click='index++ && console.log(index)'></div>