CODEWITHSUNDEEP
jquerycountdown
jc1992
jc1992

Reputation: 644

Countdown Jquery

I have problem with jquery , I use the following code to get the dates in format json, this code works correctly.

In the console.log(tiempo) I can see this dates

2015/11/21 12:34:56
ex.html:15 2016/10/10 12:34:56
ex.html:15 2017/10/10 12:34:56
ex.html:15 2018/10/10 12:34:56
ex.html:15 2019/10/10 12:34:56

However in the HTML I only can see the first date I recieve from json.

<script type="text/javascript">
    function tiempo(tiempo){
        console.log(tiempo);
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    jQuery.each(arr, function(index, value) {
        $( ".prueba" ).append('<div class="clock"></div>');
        tiempo(value.now);
    });
</script>

An image is better to explain.

enter image description here

UPDATE

Wihich this code , I only show One date 

<body>
    <div class="clock"></div>
</body>

<script type="text/javascript">
    function tiempo(tiempo){
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    for ( var i = 0 ; i < arr.length ; ++i ) {
        tiempo(arr[i].now);
    }
</script>

Upvotes: 0

Views: 149

Answers (3)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Make this:

for (var i = 0; i < arr.length; ++i) {
    var element = $('<div class="clock"></div>').html(tiempo(value.now));
    $(".prueba").append(element);
}

And that's all

Upvotes: 0

Hayko Koryun
Hayko Koryun

Reputation: 1244

The problem is with this piece of code (specifically the selector: .clock):

$('.clock').countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
 });

What you are doing here is setting the value of all the div elements with the class clock, not just the last one you created.

There are a number of solutions to your problem, but the one that requires the minimum amount of change is to use the jquery function last like so (to pick the last element from the set):

$('.clock').last().countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

Upvotes: 1

jaggedsoft
jaggedsoft

Reputation: 4038

You can use a standard for loop to iterate through objects:

var arr = [
    {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
    {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
    {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
    {"transporte":"Metro","now":"2018/10/10 12:34:56"},
    {"transporte":"Tram","now":"2019/10/10 12:34:56"}
];
for ( var i = 0 ; i < arr.length ; ++i ) {
    console.log(arr[i].now);
    $( ".prueba" ).append('<div class="clock"></div>');
    tiempo(value.now);
}

Upvotes: 0

Related Questions