JSON Random – Cómo mostrar contenidos aleatorios de un JSON con JavaScript

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo Web moderno y comprender sus características es fundamental para los desarrolladores Web que utilizan sus características día a día.

Mediante JavaScript es posible obtener y mostrar contenidos random (aleatorio) de un JSON. Esto se puede lograr empleando Math.floor() junto con Math.random(), como podemos ver en el siguiente código:

JSON Random


<!DOCTYPE html>
<html>
<head>
<script>
var imagenes = [
{ img: "image1.png", text: "Example 1"},
{ img: "image2.png", text: "Example 2"},
{ img: "image3.png", text: "Example 3"}
];
window.addEventListener("load", function load(){
var i = Math.floor(Math.random()*imagenes.length);
document.getElementById("box").innerHTML = "<img src='img/" + imagenes[i].img+ "' alt='" + imagenes[i].text+ "' /><p>" + imagenes[i].text + "</p>";
},false);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

2 Comentarios en “JSON Random – Cómo mostrar contenidos aleatorios de un JSON con JavaScript
  1. yasnel dice:

    Hola amigo, como puedo poner un enlace segun la imagen. gracias

    • Hola!
      Respecto a tu consulta, en la estructura del JSON deberían tener un key más para el link. Por ejemplo, se podría llamar link, y a ese key le asignas el enlace en cada registro en el JSON.
      Luego, cuando se hace el random, habría que usar la etiqueta a y en el href ubicar imagenes[i].link
      Espero que te sea útil.
      Saludos

Responder a yasnel Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*



Encontrame en las redes sociales. Contactame.