Tengo el siguiente código para obtener datos JSON

    $.getJSON('ajax.php', function(data) {
    });

Los datos JSON se ven así:

{"hour":"180","min":"270","sec":"30"}

Puedo alertar horas, minutos o segundos de esta manera:

alert(data.hour);

Sin embargo, quiero usar el valor de data.hour para cambiar un valor css de rotación / transformación. Intenté lo siguiente pero no parece funcionar

    $.getJSON('ajax.php', function(data) {
        $('#clock .hh').css( {'transform': 'rotate(data.hour+'deg')'});
    });

Incluso intenté cambiar el archivo JSON a esto:

{"hour":"180deg","min":"270deg","sec":"30deg"}

Y luego probé esto:

        $('#clock .hh').css( {'transform': 'rotate(data.hour)'});

Pero incluso esto no funcionó

¿Alguna idea de cómo se puede hacer esto?

0
Ahmed 11 nov. 2017 a las 23:55

2 respuestas

La mejor respuesta

Tiene un error tipográfico en su código.
No hay comillas entre data.hour para separarlo de la cadena
Aquí está la corrección

$.getJSON('ajax.php', function(data) {
        $('#clock .hh').css( {'transform': 'rotate('+data.hour+'deg)'});
    });

Después de tu edición
deberías escribir

$('#clock .hh').css( {'transform': 'rotate('+data.hour+')'});
0
Neji Soltani 11 nov. 2017 a las 21:08

El formato del fragmento de código casi revela cuál creo que es el problema:

'transform': 'rotate(data.hour+'deg')'

"data.hour" se trata aquí como un valor de cadena, no como el valor real.

Prueba esto:

'transform': 'rotate(' + data.hour + 'deg')'
0
frontend_dev 11 nov. 2017 a las 21:01