Countdown on Ionic 2 - angularjs

Question

ionViewDidEnter() {
//----------------------------------------------------------------------LISTAGEM ALMOÇOS--------------------------------------------------------------------------------------
let data = JSON.stringify({id: this.id});
let link = *;
this.http.post(link,data)
.map(res => res.json())
.subscribe(data=>{
console.log(data);
this.almocos = [];
//IDs das conversas
for (var a = 0; a < data.length; a++){
this.foto2 = data[a][2];
if(Number.isInteger(data[a][7])){
console.log(data[a][7])
this.tempo[0] = data[a][7] + "dias"
this.tempo[1] = "";
this.tempo[2] = "";
}else {
this.tempo = data[a][7].split(":");
this.tempo[0] = this.tempo[0] + ":";
this.tempo[1] = this.tempo[1] + ":"
}
this.tempos = [];
this.foto =[];
let cor;
let pessoas;
let forma;
if (data[a][4].length == 1){
if(data[a][5]== this.nome){
data[a][2]= data[a][4][0][1]
}
pessoas = data[a][4][0][0];
this.foto.push(data[a][4][0][1]);
} else if (data[a][4].length == 2) {
pessoas = data[a][4][0][0] + " e " + data[a][4][1][0];
this.foto.push(data[a][4][0][1]);
this.foto.push(data[a][4][1][1]);
} else {
pessoas = data[a][4][0][0] + " e " + (data[a][4].length-1) + " pessoas"
for (var i = 0; i < data[a][4].length; i++){
this.foto.push(data[a][4][i][1]);
}
}
if(data[a][4].length > 1){
if(data[a][6] == 1){
data[a][2] = "social.png";
cor= "#e73C58";
forma = "S"
} else if (data[a][6] == 2){
data[a][2] = "profissional.png";
cor= "#1ab2bc";
forma = "P";
}else if (data[a][6] == 3){
data[a][2] = "academico.png";
cor= "#9b59b6";
forma = "A";
}
}else{
if(data[a][6] == 1){
cor= "#e73C58 ";
forma = "S"
} else if (data[a][6] == 2){
cor= "#1ab2bc ";
forma = "P";
}else if (data[a][6] == 3){
cor= "#9b59b6";
forma = "A"
}
}
this.cores = "#ffffff";
this.almocos.push(
{
id : data[a][0],
dia : data[a][1],
foto : data[a][2],
foto_anf: this.foto2,
estrelas : data[a][3],
pessoal : pessoas,
tipo : cor,
forma :forma,
fotos : this.foto,
segundo : this.tempo[2],
minuto : this.tempo[1],
horas : this.tempo[0]
});
setInterval(function(){
console.log("segundos");
let segundos;
let minutos;
let hora;
segundos--;
if (segundos == 0){
segundos = 60;
minutos--;
}
if (minutos == 0){
minutos = 59;
hora--;
}
segundos-- ;
this.tempos = [];
this.tempos.push(segundos);
}, 1000);
}
}, error =>{
console.log("erro")
});
//----------------------------------------------------------------------FIM LISTAGEM ALMOÇOS--------------------------------------------------------------------------------------
}
<div style="float:right;position:relative;left:0px;position:relative;top:3px">
<span><ion-icon style="font-size:14px;" name="md-time"></ion-icon><span style="font-size:13px;position:relative;bottom:1px;margin-left:2px"> {{almoco.horas}}{{almoco.minuto}}{{almoco.segundo}} </span></span>
</div>
The variables are hours, minutes and seconds. Each is related to a date in the database, where we get the time remaining. I'd like to be able to show in real-time a countdown until the actual date.
I know it's possible via Observable, but I can't figure out how. An answer with integer variables (e.g. hours= 23; minutes=14; seconds=19) would be ideal, so I can just attribute the values from the database.
Thanks in advance!

Answer 1

I noticed some issues in your code that could help you to solve your problem:
You should avoid to change the data object itself and instead create a copy and work with that. That way you always know what the server responded with and what you changed.
You have a lot of "hardcoded" array indexes. If you have control over the backend, you should try to avoid that and instead use an object with named properties. So instead of doing
this.push(data[a][4][0][1]);
you could do something like
data[a].almoco.photoUrl // Depending on what you want to do, obviously
which looks a lot nicer and gives you more readable code.
Now to your countdown problem:
First of all, you have your setInterval inside your for loop, which means that the setInterval is called multiple times per second. (At least as many times as you have elements in your array).
You also define
let segundos;
let minutos;
let hora;
but never assign them a value, so your if-checks will always be wrong.
You should also avoid calculating the time when you get the response from the server and instead store the end-time you get from the server as a javascript date.
Once you have that, you can either calculate the difference manually in your setInterval (end-date - current date, make sure you call it only once) and use a custom angular pipe to convert the seconds to a nice format, or use an npm nodule like this: https://github.com/previousdeveloper/angular2-simple-countdown