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

Damián De Luca

7 años ago

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:


<!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>