Obtener la longitud de un objeto JSON
Obtener la longitud o número de elementos dentro de un objeto JSON se obtiene tomando en cuenta el número de claves en el objeto y eso se obtiene con:
Object.keys(Object).length;
Ejemplo:
<script>
var matriz1 = {'nombre':'Juan','paterno':'Perez','materno':'Perez'};
function longitudJSON(matriz){
var n_elementos = Object.keys(matriz).length;
return n_elementos;
}
console.log("Total: "+longitudJSON(matriz1));
</script>
Lo cual imprime en la consola:
Total: 3
Saludos
Mostrando las entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando las entradas con la etiqueta javascript. Mostrar todas las entradas
jueves, 1 de agosto de 2019
Uso de JSON.stringify y JSON.parser
Desarrollando una pequeña aplicación de un formulario que recuperaba los datos a través de una función y lo pasaba a otra me encontraba que no podia ver o usar el objeto que tenia. Además, al querer ver los datos con el console log me daba error
SyntaxError: Unexpected token o in JSON at position 1
y no podia recuperar los datos.
Resulta ser que aplicaba mal el uso de datos las funciones
JSON.stringify y JSON.parse
Cuando nosotros usamos JSON.stringify convertimos al obj JSON en string y,
JSON.parse lo regresa a ser un Object.
por ejemplo, si creas un objeto
var matriz1 = {};
matriz1.a = 9
y aplicas
console.log(matriz1);
obtienes
[object Object]
pero
console.log(matriz1.a)
te da
9
Si aplicas
console.log(JSON.stringify(matriz1))
imprime
{"a":9}
De tal manera que aplicar un JSON.stringify en un paso previo requiere regresar los datos a su formato de objeto con JSON.parse en un paso futuro para su uso adecuado.
Ahora bien, se puede dar el caso de que los datos que obtienes de algún origen no vengan formateados, entonces, tenemos que convertir en string los datos y luego parsearlos. Por ejemplo:
SyntaxError: Unexpected token o in JSON at position 1
y no podia recuperar los datos.
Resulta ser que aplicaba mal el uso de datos las funciones
JSON.stringify y JSON.parse
Cuando nosotros usamos JSON.stringify convertimos al obj JSON en string y,
JSON.parse lo regresa a ser un Object.
por ejemplo, si creas un objeto
var matriz1 = {};
matriz1.a = 9
y aplicas
console.log(matriz1);
obtienes
[object Object]
pero
console.log(matriz1.a)
te da
9
Si aplicas
console.log(JSON.stringify(matriz1))
imprime
{"a":9}
De tal manera que aplicar un JSON.stringify en un paso previo requiere regresar los datos a su formato de objeto con JSON.parse en un paso futuro para su uso adecuado.
Ahora bien, se puede dar el caso de que los datos que obtienes de algún origen no vengan formateados, entonces, tenemos que convertir en string los datos y luego parsearlos. Por ejemplo:
JSON.parse(JSON.stringify(matriz1))
Espero te sirva la información.
Saludosmiércoles, 27 de julio de 2016
Detener un video de Youtube con javascript insertado mediante iframe
Hola a todos
En ocasiones tenemos una serie de videos de youtube embebidos mediante iframes en una misma página, que bien pueden estar ocultos o en tabs. Pero cuando le damos play a uno y después pasamos a otro tab o boton, este no se detiene.
Para lograr pausar un video al dar clic en un boton usaremos javascript y un truco que encontre hace días en stackoverflow (el cual está desactualizado, 2012).
Librerías que necesitamos:
<script src="js/jquery.js"></script>
Insertamos el siguiente código en el <head>
<script>
<!--
$(function() {
//NOTE: in url is necessary add ?enablejsapi=1
function playVideoAndPauseOthers(frame) {
$('iframe[src*="https://www.youtube.com/embed/"]').each(function(i) {
var func = this === frame ? 'playVideo' : 'pauseVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}
$('div a[title^="video"]').click(function() {
var frameId = /video(\d+)/.exec($(this).attr('title'));
//alert(frameId);
if (frameId !== null) {
frameId = frameId[1]; // Get frameId
playVideoAndPauseOthers($('#video' + frameId + ' iframe')[0]);
}
});
});
-->
</script>
y nuestros html debe esta de la siguiente manera:
<div id="video1">
<iframe name="video1" width="600" height="315" src="https://www.youtube.com/watch?v=uYbsSj6t0V4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="video2">
<iframe name="video2" width="600" height="315" src="https://www.youtube.com/watch?v=sEe1ZGhYSWs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div><a href="#" title="video1">Opción A</a></div>
<div><a href="#" title="video2">Opción B</a></div>
Tomen en nota y es muy importante, después de la url de cada video hay que agregar
?enablejsapi=1 lo cual indica que se utilizará la API de Youtube
Es todo, cuando le de clic al botón A se iniciará el video1, al dar clic al boton b, se dentendrá el video1 y se iniciará el video2, y viceversa.
El código se puede cambiar y dejar de hacer referencia al atributo title del div y usar un data- , pero eso lo dejo de tarea.
Saludos
En ocasiones tenemos una serie de videos de youtube embebidos mediante iframes en una misma página, que bien pueden estar ocultos o en tabs. Pero cuando le damos play a uno y después pasamos a otro tab o boton, este no se detiene.
Para lograr pausar un video al dar clic en un boton usaremos javascript y un truco que encontre hace días en stackoverflow (el cual está desactualizado, 2012).
Librerías que necesitamos:
<script src="js/jquery.js"></script>
Insertamos el siguiente código en el <head>
<script>
<!--
$(function() {
//NOTE: in url is necessary add ?enablejsapi=1
function playVideoAndPauseOthers(frame) {
$('iframe[src*="https://www.youtube.com/embed/"]').each(function(i) {
var func = this === frame ? 'playVideo' : 'pauseVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}
$('div a[title^="video"]').click(function() {
var frameId = /video(\d+)/.exec($(this).attr('title'));
//alert(frameId);
if (frameId !== null) {
frameId = frameId[1]; // Get frameId
playVideoAndPauseOthers($('#video' + frameId + ' iframe')[0]);
}
});
});
-->
</script>
y nuestros html debe esta de la siguiente manera:
<div id="video1">
<iframe name="video1" width="600" height="315" src="https://www.youtube.com/watch?v=uYbsSj6t0V4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="video2">
<iframe name="video2" width="600" height="315" src="https://www.youtube.com/watch?v=sEe1ZGhYSWs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div><a href="#" title="video1">Opción A</a></div>
<div><a href="#" title="video2">Opción B</a></div>
Tomen en nota y es muy importante, después de la url de cada video hay que agregar
?enablejsapi=1 lo cual indica que se utilizará la API de Youtube
Es todo, cuando le de clic al botón A se iniciará el video1, al dar clic al boton b, se dentendrá el video1 y se iniciará el video2, y viceversa.
El código se puede cambiar y dejar de hacer referencia al atributo title del div y usar un data- , pero eso lo dejo de tarea.
Saludos
Suscribirse a:
Entradas (Atom)